CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-ui-dialog
yossi
yossi

Reputation: 13315

Change html that contain a jQuery dialog

I have an html with a jquery UI dialog. I then change the div containing the dialog.
But the content of the dialog does not change. I want to be able to change the dialog and its containing div together.
If i change only the dialog div it works as expected but that is not what i need.

Example code: http://jsfiddle.net/JpLzh/13/

The text inside the dialog should change from 'original' to 'new' but it does not.
The text outside the dialog does change from 'main' to 'altered main'.

What am i doing wrong, and how can i overcome this problem ?

EDIT
I need the dialog to work even before the change take place. the change can happen long time after the html is created.

the html

<div id="main">
main
<br>
<button id="opener">Open Dialog</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

the onload javascript

$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div id="dialog">new</div></div>');
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

Upvotes: 0

Views: 7828

Answers (5)

yossi
yossi

Reputation: 13315

I found a solution. Looks like i cant change the dialog with its containing div because it is already a dialog by the .dialog() method and when i change the containing html it does not affect the already created dialog.

the solution i found was to destroy the old dialog using the .destroy() method and then create a new one from the new altered html.

my solution: http://jsfiddle.net/JpLzh/12/

<div id="main">
main
<br>
<button id="opener">Open Dialog</button>
<button id="changer">Change div</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>


function change_div()
{
$( "#dialog" ).dialog( "destroy" );
$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div    id="dialog">new</div></div>');

$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
}


$( "#changer" ).click(function() {
  change_div();
});

Upvotes: 1

JJJ
JJJ

Reputation: 33163

When you create a dialog from element #dialog, the element is moved out of its original parent (#main). If you change the parent's content while the dialog is being displayed, you're not changing the dialog (which is a good thing, otherwise the dialog would be removed).

What you need to do is to change the dialog contents separately:

$( '#main' ).html( 'The new content except #dialog' );
$( '#dialog' ).html( 'New dialog contents' );

(By the way, you shouldn't do this: $( '#main' ).html( '<div id="main">...' ) You're changing the inner HTML contents, so you shouldn't repeat the container. Otherwise the result is <div id="main"><div id="main">...)

Upvotes: 1

SWa
SWa

Reputation: 4363

It's because you're creating 2 dialogs. To change the content of the dialog, all you need to do is change the dialog div:

    <div id="main">
        main
        <br>
        <button id="opener">Open Dialog</button>
            <button id="changer">change Dialog</button>
        <div id="dialog">
            original
        </div>
    </div>
<script>
    $( "#dialog" ).dialog({
                    autoOpen: false,
                    height: 200,
                    width: 200,
                    modal: true,
                    resizable:false,
                    draggable:true,
    });

        $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
        });


        $( "#changer" ).click(function() {
          $( "#dialog" ).html("new");
        });
</script>

Upvotes: 1

Gaurav Agrawal
Gaurav Agrawal

Reputation: 4431

Use this code it will work it.....

$('#main').html('<div id="main">altered main<br><button id="opener" onclick="OpenDialog();">Open Dialog</button><div id="dialog">new</div></div>');
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

function OpenDialog() {
    $( "#dialog" ).dialog( "open" );
}

after processing it will generate this html code 

<div id="main">
main
<br>
<button id="opener" onclick="OpenDialog()">Open Dialog</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

function OpenDialog() {
    $( "#dialog" ).dialog( "open" );
}
</script>

Upvotes: -1

F&#225;bio Duque Silva
F&#225;bio Duque Silva

Reputation: 2146

You're duplicating your script code, but the code running is the one on the HTML part (between tags) and it is missing the line #1 from the javascript part.

You should put your Javascript part inside this:

$(document).ready(function () {
   //JS Code here...
});

and delete the part inside your HTML.

Check: http://jsfiddle.net/fabio_silva/6Ypck/

Upvotes: 0

Related Questions