Click here to Skip to main content
Rate this: bad
good
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
Edited 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
0 Sergey Alexandrovich Kryukov 547
1 ChauhanAjay 180
2 CHill60 135
3 Maciej Los 125
4 Richard Deeming 125
0 Sergey Alexandrovich Kryukov 9,735
1 OriginalGriff 6,987
2 CPallini 5,835
3 George Jonsson 4,017
4 Gihan Liyanage 3,266


Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 7 Aug 2012
Copyright © CodeProject, 1999-2014
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