How to trigger ajax call based on url

Question

I am building coupon website. I need to trigger ajax action based on url of page. Let me explain.

For example, if user goes to page website_url/?coupon_id=99 - he gets page website_url and popup with ajax action inside it (ajax gets data for coupon post type with id=99 and show it's values).

If user goes to page website_url/page1/?coupon_id=99 - he gets page website_url/page1/ and the same popup.

You can see this logic in action on some coupon websites, for example, coupondunia.in

I created ajax action, it's working

function coupon_get_code(){
    $couponid = $_GET['couponid'];  
    $code = get_post( $couponid );
    if( !empty( $code ) ){
        $offer_coupon = get_post_meta( $code->ID, 'coupon', true );
        $response .= '<div class="coupon_modal_coupon">'.$offer_coupon.'</div>';
    }
    else{
        $response = __( 'Offer does not exists', 'textdomain' );
    }
    echo  $response ;
    die;
}
add_action('wp_ajax_ajax_code', 'coupon_get_code');
add_action('wp_ajax_nopriv_ajax_code', 'coupon_get_code');

Currently I made triggering ajax action based on click, like this

    // Coupon Modal
  $( '.offer_coupon.masked_coupon:not(.expired_coupon)' ).live("click", function(e){
    var $this = $(this);
    var couponid = $this.data('couponid'); 

    $.pgwModal({
        url: translation.ajax_url + "?action=ajax_code&couponid=" + couponid,
        titleBar: false,
        ajaxOptions : {
            success : function(response) {
                if (response) {
                    $.pgwModal({ pushContent: response });
                } else {
                    $.pgwModal({ pushContent: 'An error has occured' });
                }                
            }
        }
    });

  });

But how to trigger this ajax request based on url?

Have the function in dom ready so it runs soon as page loads. $(document).ready(function(){}) — Edward
– Edward, Commented Dec 26, 2014 at 19:54
This function is inside jQuery(document).ready(function($) {}); — Igor Sunz
– Igor Sunz, Commented Dec 26, 2014 at 19:56
Yes but you also have it inside click handler move it out of it and into its own function say popupload() If you need to call it on click too call the function instead. — Edward
– Edward, Commented Dec 26, 2014 at 20:01

Tim · Accepted Answer · 2014-12-26 20:45:09Z

1

You could get the last number characters from the URL on page load (equal to the coupon id), instead of getting it on click from the data attribute.

$(window).on('load', function() {

  // Get the last numbers from the current page URL using Regex
  var couponid = window.location.href.match(/\d+$/);

  $.pgwModal({
    url: translation.ajax_url + "?action=ajax_code&couponid=" + couponid,
    titleBar: false,
    ajaxOptions : {
        success : function(response) {
            if (response) {
                $.pgwModal({ pushContent: response });
            } else {
                $.pgwModal({ pushContent: 'An error has occured' });
            }                
        }
    }
 });

});

Put the jQuery in a file named ajax-coupon.js and conditionally enqueue the script.

// Conditionally enqueue your script only if the template coupons.php is used to display the page.
function my_scripts_method() {

  // Register your script location, dependencies and version
  wp_register_script('ajax-coupon', get_template_directory_uri() . '/js/ajax-coupon.js', array('jquery'), '1.0' );

  // Check if the current page is using coupons.php, if so, load the script.
  if ( is_page_template( 'coupons.php' ) ) {
    wp_enqueue_script('ajax-coupon');
  }

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

edited Dec 26, 2014 at 20:45

answered Dec 26, 2014 at 20:18

Tim

1,7002 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Igor Sunz Over a year ago

I think about this, but such function will work on all pages of site. And what if user goes to simple page, without /?coupon_id=99 . As I understand, such function will get an error in this case

Tim Over a year ago

Just enqueue the script on necessary pages only. Since your using Wordpress, I assume you're using a custom post type for your coupons?

Igor Sunz Over a year ago

Yes, but coupon shows also from posts (with shortcode) and also can be displayed in sidebar by shortcodes.

Tim Over a year ago

Alright, but if a coupon is in a sidebar or post, then it will be triggered on click right? Your question is about triggering your popup based on the page URL. I've updated my answer to show how you can conditionally load the script to pages.

Igor Sunz Over a year ago

Example: user is on page website/post. He click on button and go to website/post?coupon_id=99 - but this is not a coupon page, he still on page with post, so script is not working in this case

Igor Sunz · Accepted Answer · 2014-12-26 20:59:12Z

I think I found function which can help me. Testing now.

  function GetURLParameter(sParam){
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) 
      {
        return sParameterName[1];
      }
    }
  }

So my ajax trigger can be like this

  var coupontrigger = GetURLParameter("couponid");
  if(coupontrigger){
    $.pgwModal({
        url: translation.ajax_url + "?action=ajax_code&couponid=" + coupontrigger,
        titleBar: false,
        ajaxOptions : {
            success : function(response) {
                if (response) {
                    $.pgwModal({ pushContent: response });
                } else {
                    $.pgwModal({ pushContent: 'An error has occured' });
                }
            }
        }
    });
  };

Collectives™ on Stack Overflow

How to trigger ajax call based on url

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related