Dynamic DOM and jQuery

Question

I open ajax modal window with jQuery. How can I update the DOM and make new elements available for jQuery?

Answer 1

Give the window an id and just reference it in jQuery, for example $('#modalWindow').

To access the items inside a modal window using the same notation: $('#modalWindow .whatever').

You can put any valid CSS selector in $(). See the jQuery()documentation for more details .

Answer 2

Once you manipulate the DOM, you can reference its elements:

// add a new div to the body
$('<div id="just_added">').appendTo('body');

// make the new div you just added explode
$('#just_added').explode();

Answer 3

jsFiddle , jQueryUI ( , , - , , , ).

/ JavaScript:

var theDialog = $("<div id='msg'>");
theDialog.append("<div><label for='txtVal'>Enter a Value:</label><input type='text' id='txtVal'/></div>");

Then I use the jQuery UI dialog dialog to create an instance of the modal display and display it. I also collect information about this and pass it back (parent).

Hope this is what you want to do. Please let me know if there are other questions and I will update my answer accordingly.

Hope this helps!

---

CODE
By the way, this is not optimized - this is purely for demonstration purposes. Do not use in production!

HTML:

<div id="content">
  <span>Click here for the modal:<button id="openModal">Open</button></span>
  <br/>
  <span>Results:<input id="theResults" type="text" />
</div>​

JavaScript:

    $(document).ready(function() {
        $("#openModal").click(function(e) {
            e.preventDefault();
            openDialog();
        });
    });

    function openDialog() {
        var theDialog = $("<div id='msg'>");
        theDialog.append("<div><label for='txtVal'>Enter a Value:</label><input type='text' id='txtVal'/></div>");
        $(theDialog).dialog({
            title: "Sample Dialog",
            modal: true,
            buttons: { "Cancel": function() { 
                                $(this).dialog("destroy"); 
                                $("#msg").remove(); 
                            },
                       "Save": function() { 
                               $("#theResults").empty();
                               $("#theResults").val($("#txtVal").val());
                               $(this).dialog("destroy"); 
                               $("#msg").remove();
                           }
                     }
        });
    }
​