Want to use a jquery pop up, but get the data from server side.

Question

When somebody clicks on my google adwords link like this:

http://www.myshoppingsite.com/product/rubberball.aspx?promo=promo123

I want my aspx page to read the "promo" parameter, hit the database to pull back some data, then display to the user a nice jquery type popup window over top of the product page. The user can read all about the promotion, then close that pop up and be at the product page they wanted to go to.

I'm not sure how to do this...Do I read the parameter and get the data from the client side (via webservice or page method), or do I get the data and call the javascript from server side?

I have created jquery popups before, but the data has always been on the client side already. I want to display a popup but get the data from a database.

any ideas?

Answer 1

If you really think about it, there's no reason to do a trip back to the server in this kind of situation. You can simply check server-side if the promo GET parameter was passed, and if so display a hidden <div> with the promotion information:

<div style='display: none;' id='promo'>
....
</div>

Once you do that, you can simply have some jQuery code to check whether this hidden <div> exists, and if so display the modal:

$(function() {
    if($('#promo').length > 0) {
        showModal($('#promo').html());
    }
});

If you insist on querying the server through AJAX, this is fairly simple to do as well:

function gup( name ) {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

$(function() {
    var promo = $.trim(gup('promo'));
    if(promo != '') {
        $.get('my/url/whatever.php', {promo: promo}, function(data) {
            showModal(data);
        });
    }
});

Since you said you have experience with showing modal windows with jQuery I won't go into much detail as to what showModal should do; suffice it to say it should simply activate whatever your jQuery plugin uses to show the modal window.

Answer 2

So you want the popup on load? Render the page with the pop-up in place, with a means of closing the pop-up. Read the querystring at the server and render whatever content you want into it in a single operation. The only JS required is to hide the popup.

Answer 3

You can use facebox. Programatically invoke a pretty cross-browser popup like this:

$('#someLink').click(function(e) {
    e.preventDefault();
    $.facebox({ ajax: '/product/rubberball.aspx?promo=promo123' });
});