CODEWITHSUNDEEP
javascriptjqueryhtml
DVA
DVA

Reputation: 151

IDs not being recognized when placed in modals

I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.

However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).

Here is my script:

$('#addCollege').click(function(e){
    modal.open({content: $('#addCollegeForm').html()});
    e.preventDefault();`
});

This is the DIV

<div id="addCollegeForm" style="display:none">
    <label>College:</label><br>
    <input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
    <input type="button" value="Save" id= "addCollege">
</div>

Thanks and I appreciate your help.

Upvotes: 1

Views: 171

Answers (2)

Teddy
Teddy

Reputation: 797

I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.

Here is solution:

$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom

Detach element and append it to container.

Don't forget to revert the element to old container.
Hope it helps.

Regards

Upvotes: 1

Ethan Pelton
Ethan Pelton

Reputation: 1796

Try moving the button that opens your dialog out of the dialog:

EDIT - something like this should work...

HTML...

<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">

jquery...

$("#addCollegeForm").dialog({
    autoOpen: false
});


$('#addCollege').click(function () {
    $("#addCollegeForm").dialog("open");
});

http://jsfiddle.net/DTq6m/

http://api.jqueryui.com/dialog/#option-autoOpen

Upvotes: 0

Related Questions