Question

I’ve seen examples of how to do this, but everything I’ve come across is for .net or PHP pages. I’m trying to do this with a classic ASP page and I’m new to JQuery so I’m trying to figure out how to go about it.

I have a link that will open a JQuery modal dialog. The “open” function for the modal dialog brings in it’s content from a separate .asp page. That content I’d like to be loaded by querystring elements.

I’ve tested it out and got it working by entering a static querystring. But I’m not sure how to pass a dynamic value to the string, or how to pass multiple values (meaning a querystring with “&” in it).

Here’s the code I’m working with:

<script type="text/javascript">

$(function () {
$("#example2").dialog({
            autoOpen: false,
            width: 650,
            modal: true,

            open: function() {
            //here's where I need to dynamically pass multiple elements
            $("#example2").load("test.asp?id=28&value=30");}
        });

        $("#showdialog2")
            .click(function () {
                $("#example2").dialog("open");
                return false;

        });
});

The link that triggers it and the dialog div:

<a href="" id="showdialog2">Show the Dialog</a>

<div id="example2" title="My First Ajax Dialog2"></div>

Since this is a classic ASP page, is there a way I can pass the querystring elements from the “Show Dialog” link to the dialog open call?

Thanks for any help!

Answer 1

I think you want to do this:

<a href="/some/link/for/progressive/enhancement.asp?id=<%= id %>" id="showdialog2" data-id="<%= id %>">Show the Dialog</a>

<div id="example2" title="My First Ajax Dialog2"></div>

To add more variables, use more custom attributes and modify the below to include the extra ones.

$(function () {
    $("#example2").dialog({
        autoOpen: false,
        width: 650,
        modal: true,

        open: function() {

    });

    $("#showdialog2")
        .click(function () {
            $("#example2").dialog("open");
            $("#example2").load("test.asp?id=" + $(this).attr('data-id') + "&value=30");}
            return false;

    });
});

The alternative is to use $(this).href() and manually parse the value to extract the querystring (you could probably regex it), but using custom attributes is an easier way forward.

You can probably chain the open and load calls and it would be a good idea to set a default content for the dialog if you’re not going to destroy it on close. Let me know if you want examples of those.

---

Chaining (note also the preventDefault instead of return false):

$("#showdialog2").click(function (event) {
    $("#example2").html('<div style="text-align: center"><img src="/assets/images/ajax-loader.gif" /></div>')
        .dialog("open")
        .load("test.asp?id=" + $(this).attr('data-id') + "&value=30");
    event.preventDefault();
});

That will reset the dialog on click to have just an ajax spinner in there (get yours here), so you can re-use without a reload.