Click here to Skip to main content
12,898,392 members (56,159 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: Javascript HTML Ajax jQuery dialog , +
Hello,

I'm currently working on a small project that makes use of JQuery and JQuery UI. I want to make a dialog that edits certain data in a table. The user double click on a row and the dialog popsup. This all works perfectly but when i click on a <a> tagged link and go back to the page the dialog behaves strange. The $.val("") wont work anymore and neither can i append html tags or set text by innerHTML.

The <a> tag executes $.load() which will load the page on click.

I tried loads of things to fix the issue but nothing works so far...
I'm making use of JQuery 1.7.2 and JQuery UI 1.8.22.

Below are a few examples of my code in the last block it goes wrong at the button test, after the page is reloaded by the <a> tag.

So far i tried to:
* Empty the page container.
* Reload scripts on click.
* Destroy the dialog and recreate it.

Code to load a page:
function LoadPage(pageName) {
    $("#Lym_AdminBodyPage").empty();
    $("#Lym_AdminBodyPage").load(pageName);
}


Code to show the dialog and change text:
 
$("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: [
        {
            text: "test",
            click: function() {
                var td = $("#edit_mod_uid");
                td.empty();
                var textDiv = document.createElement("div");
                textDiv.setAttribute("id", "edit_mod_uid_div");
                textDiv.innerHTML = CurrentSelectedID;
                td.append(textDiv);
            }
        },
                   {
                       text: "Wijzigigen",
                       click: function () {
                           $(this).dialog("close");
                       }
                   },
                   {
                       text: "Verwijderen",
                       click: function () {
                           $(this).dialog("close");
                       }
 
                   },
                   {
                       text: "Annuleren",
                       click: function () {
                           $(this).dialog("close");
                       }
                   },
 
            ],
        open: function () {
        },
        close: function () {
 
        },
    });
Posted 6-Aug-12 21:34pm
Updated 6-Aug-12 21:51pm
v3

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

This issue may be marked as fixed.

Currently i found out that the dialogs gets added continuesly at the end of the document between the <body></body> and . By executing the command $("#dialog").remove() the issue is fixed.

This is mainly happening in combination with ajax it seems.

A ticket about the issue: http://bugs.jqueryui.com/ticket/5887

Also it seems that $("#dialog").dialogs("destroy"); has no effect on the dialog.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.170424.1 | Last Updated 7 Aug 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100