form submission ajax woes on Ipad/Android

  • Resolved drking

    (@drking)


    9 years, 4 months ago

    I’ve written a plugin for private use. When a user lands on a particular page, identified by the pageslug, the plugin writes a <div></div> inside which is a form. When the form is submitted, the server sends back a response which is written into the <div></div> to replace the original contents. This works reliably on desktops. On Ipads and Android, the page simply resets, and the server does not react to the data from the form.

    The code hereunder is a cutdown minimal version. It appears that Ipad/mobile browsers are prone to shutting themselves down to save memory and then restarting/refreshing – but if this is the case I don’t understand why the server is not getting the info. Can the browser shut down while the javascript is running? Seems daft if so. Am I approaching this in the wrong way? I’d be grateful for any advice! Thank you.

    The plugin is to allow members of a choir to say if they are available for a concert. I’ve had this working happily for some years outside WP using a different method, but can’t do it that way in WP

    ////test.php
<?php
 /*
 Plugin Name: Test
 Description: test
 Version: 0.1
 Author: me
 */

//===== load script =====
function test_enqueue_scripts() {
	if ( $GLOBALS['post']->post_name == 'test' ) { // if this is our page, load our scripts
		wp_enqueue_script( 'test_js_handle', plugin_dir_url( __FILE__ ) . 'test.js', array( 'jquery' ) );
	}
}

add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts' );

//===== every time any page is requested =====
function test_content_filter($content) {
	$name = $GLOBALS['post']->post_name;
	if ( $name == 'test' ) {
		return test_content();
	}
	return $content; // for all other pages
}

add_filter( 'the_content', 'test_content_filter' );

function test_content() {
	$html = "<div id='test_content'>";
	$html .= "<form method='post' id='test_form' onsubmit='test_submit()'>";
	$html .= "<input type='text' name='test_text' value=''>";
	$html .= "<input type='hidden' name='action' value='my_ajax_hook'>";
	$html .= "<input type='submit' value='send'>";
	$html .= "</form>";
	$html .= "<p id='ajax_url'>" . admin_url( 'admin-ajax.php' ) . "</p>";
	$html .= "</div>";
	return $html;
}

//===== ajax =====
function test_ajax_availm_page() {
	$user_id = 1; // admin
	$info = $_POST['test_text'];
	$user_id = wp_update_user( array( 'ID' => $user_id, 'user_url' => $info ) );
	echo 'I got: ' . $_POST['test_text'];
	wp_die();
}

add_action( 'wp_ajax_my_ajax_hook', 'test_ajax_availm_page' );
add_action( 'wp_ajax_nopriv_my_ajax_hook', 'test_ajax_availm_page' );

?>

////test.js
function test_submit(){
	var ajaxurl = jQuery("#ajax_url").text();
	var serialdata = jQuery("#test_form").serialize();
	jQuery('#test_content').html( "Please wait..." );
	jQuery.post(ajaxurl, serialdata,
		function(server_response){
			jQuery('#test_content').html( server_response );
		}
	);
}

Viewing 2 replies - 1 through 2 (of 2 total)

  • Your code, even the ajax call itself has a very minimal footprint. I see no reason why the mobile browser would be shutting down?

    One thing to think of, mainly because of when I submit an ajax form with I never use on-click, is you’re not stopping the default event.

    Here’s a quick example gist: https://gist.github.com/46fccd3f5c3a1a1b0a38 – my javascript is abit different, but still similar.

    Alternatively you might be able to just do something like this:

    function test_submit( evt ) {
    evt.preventDefault();
    // your stuff here
}

    But again, I’ve never used on-click handlers in HTML, so excuse my ignorance.

    Thread Starter drking

    (@drking)

    Thank you Jerry – brilliant! For simplicity I did it in the php (avoids js cache issues); the <form> line now reads:

    $html .= "<form method='post' id='test_form' onsubmit='event.preventDefault(); test_submit();'>";

    and this now works on FF, IE, Ipad and Android.

    An alternative might be to have a simple button outside the form with onclick.

    Incidentally, if you submit a form with js, how do you actually do it without onclick, if the user has to initiate the submission?

    ================
    notes for me:

    1. The gist code is an IIFE, see eg here:
    benalman.com/news/2010/11/immediately-invoked-function-expression/
    2. function test_submit( evt ) {..} would have to be called in the form with test_submit( event ) I think.
    3. I can’t yet find where the name ‘event’ is specified in the docs. I found it on another site.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘form submission ajax woes on Ipad/Android’ is closed to new replies.