WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] jQuery forms & updating info (3 posts)

  1. elfin
    Moderator
    Posted 3 years ago #

    I'm attempting add some ajax to an existing script, all goes well for the first submit, but subsequent ones are not working as expected.

    add_action('wp_head', 'my_special_action_javascript');
    add_action('wp_ajax_my_special_action', 'my_special_action_callback');
    add_action('wp_ajax_nopriv_my_special_action', 'my_special_action_callback');
    add_action('wp_ajax_my_cart', 'my_cart_callback');
    add_action('wp_ajax_nopriv_my_cart', 'my_cart_callback');

    and prior to those I also have a wp_enqueue_script('jquery');

    function my_special_action_javascript() {
    ?>
    <script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready(function() {
    	jQuery(".addtocart").submit(function()	{
    		var data = {action: 'my_special_action',post:jQuery(this).serialize() };
    		jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
    		function(response){
    			jQuery(".eshopajax").replaceWith(response);
    		});
    		function upCart(){
    			var tdata = {action: 'my_cart'};
    			jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", tdata,
    			function(response){
    				jQuery(".ajaxcart").replaceWith(response);
    			});
    		}
    		setTimeout (upCart,500);
    		return false;
    	});
    });
    //]]>
    </script>
    <?php
    }

    Notes:
    .addtocart is the class of the form (and there are going to be occasions when there are multiple forms on a page.)
    .eshopax is a section within the form where I am displaying the response (though really I should add this via the script as well).
    .ajaxcart is the cart in the widgets which I am trying to auto update.
    setTimeout - added to slow things down for updating the cart, to allow the first process to finish.

    Now as explained the above works, once. But when I submit the form again, even with different values it no longer updates the cart, or the message in the form - yet the relevant callback function has been called as when I visit the standard cart page the info has been updated!

    So how do I reset things for it to recognise possible new form details? Additionally I don't think the jQuery.post in the upCart function is correct either (but it does work...).

    any help appreciated.

  2. elfin
    Moderator
    Posted 3 years ago #

    ahh nvm, evntually sorted it:

    jQuery(document).ready(function($){
        $('.addtocart').submit(function(){
        	var data = {action: 'my_special_action',post:$('.addtocart').serialize() };
    		$.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
    		function(response){
    			$(".eshopajax").insertAfter(this).fadeIn(100).html(response).fadeOut(3000);
    			setTimeout (clearCart,200);
    			setTimeout (doRequest,500);
    			setTimeout (clearRequest,3000);
    		});
    		function doRequest(){
    			var tdata = {action: 'my_cart'};
    			$.post("<?php echo admin_url('admin-ajax.php'); ?>", tdata,
    			function(response){
    				$(".ajaxcart").insertAfter(this).fadeIn(100).html(response);
    			});
    		}
    		function clearRequest(){
    			$(".eshopajax").empty();
    		}
    		function clearCart(){
    			$(".ajaxcart").insert();
    		}
    		return false;
    	});
    
    });
  3. elfin
    Moderator
    Posted 3 years ago #

    and even got it to work with multiple forms on a single page.

    But I guess I'm talking to myself...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags