CODEWITHSUNDEEP
javascriptjqueryhtmlmodal-dialog
user918477
user918477

Reputation:

modal dialog not showing correct information

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. !!

Upvotes: 1

Views: 272

Answers (2)

Didier Ghys
Didier Ghys

Reputation: 30666

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.

Upvotes: 0

Rahul
Rahul

Reputation: 2279

If I got your question correctly, I believe on call of function showCity(), you will be getting ajax repsonse as the inner content of both divs, namely, dialog-modal-district and dialog-modal-city. This is because you are just loading the url dialog_applet.jsp#dialog-modal-city, which will return entire content of dialog_applet.jsp page and not just #dialog-modal-city div content.

You can pass the div name as parameter along with URL, depending upon the URL passed you can generate the ajax response.

Upvotes: 1

Related Questions