jquery modal box in jsp page with dynamic ajax content

Question

I want to create modal popup box using jquery depending on the clicked tr element of the page.

but I couldn't put together my mind to use jquery with this purpose.

the structure of tr is <tr><td><a><image></image></a></td></tr> each element sends my jsp page with the id. ( let's say <a href ="target.jsp?id=<dynamic_id_here>">

what should I do to show user the target.jsp's result on the same page with a modal popup ?

thanks in advance..

Answer 1

Here's how I'd approach it...

For the modal dialog, I really recommend using "JQuery UI", which comes with a nice-looking modal dialog.

http://jqueryui.com/demos/dialog/#modal

For the ajax call, most of what you need is here within jQuery already:

http://api.jquery.com/jQuery.ajax/

So, in brief, you'd create a div somewhere invisible on the page, ready to receive your text:

<div style='display:none'>
  <div id="dialog-modal" title="Basic modal dialog">
    <p>Loading</p>
    </div>
<div>

You'd need the anchor to look something like this.

For custom_id = 123:

<a href='#' id='anchor_123'>

Then, to launch the dialog, you'd need to have something like this inside a script tag.

$( "#anchor_123" )
.click(function() {
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
            $.ajax({
                    url: "target.jsp?id=123",
                    success: function(data){
                        $('#dialog-modal p').html(data);
                    }
            });

    });

I'll leave you to work out how to dynamically set the custom_id in jquery. This should set you on your way.

HTH