Question

this is my action script

action.js

function showDistrict() { //alert("hello");
    $.ajax({
        url: 'dialog_applet.jsp#dialog-modal-district',
        success: function(msg) {
            document.getElementById("dialog-content-district").innerHTML = msg;
        }
    });
    $(function() {
        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialog-content-district").dialog({
            height: 300,
            width: 350,
            modal: true
        });
    });
    // alert("hello1");
}

function showCity() { //alert("hello");
    $.ajax({
        url: 'dialog_applet.jsp#dialog-modal-city',
        success: function(msg) {
            document.getElementById("dialog-content-city").innerHTML = msg;
        }
    });
    $(function() {
        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialog-content-city").dialog({
            height: 300,
            width: 350,
            modal: true
        });
    });
    // alert("hello1");
}​

this is my content script which is inside of dialog_applet.jsp

<div id="dialog-modal-district">

dialog-modal-district is here
</div>
<div id="dialog-modal-city">
dialog-modal-city is here
/applet>

on call of any one function showDistrict() or showCity(). it is showing contents of both <div> . But, i want to retrieve the particular <div> contents, which has been called. I mean on call of showDistrict, it will only show the dialog-modal-district is here, but it is showing dialog-modal-district is here dialog-modal-city is here

Any help appreciated !!
Thanks in advance. !!

Answer 1

I see now what is the problem.

Unfortunately, using an url dialog_applet.jsp#dialog-modal-district will load completely the content of the jsp page, not only the fragment you specify.

You have two options to achieve what you want.

1. Extract yourself the actual content you want to insert into the dialogs. The ajax request will load the full jsp page, using the .find() method you can select the part that interests you and only append it to your dialog:

   success: function(msg) {
       // "msg" is the full jsp page
       $(msg)
           // select the part you want
           .find('#dialog-modal-district')
           // append it to your dialog
           .appendTo($("#dialog-content-district"));
   }
   

2. Use the .load() method from jQuery. Its role is to load content from the specified url and it allows to load document fragments automatically by using a url syntax a little like the one you tried to use:

   $("#dialog-content-district")
       .load('dialog_applet.jsp #dialog-modal-district');
   

   Note the white-space between the jsp page and the ID selector, this is important to keep it, otherwise it won’t work.