Creating multiple instances of a dialog box
I'm new to jQuery and java and I'm really trying to get my head around creating multiple instances of a dialog box. I use this in my head:
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
If I just have 1 button and a dialog box, it works. But when I add another, it stops working. I'm sure it will be pretty easy to fix, I'm just struggling.
<h2>subjects</h2>
<button id="opener">maths</button>
<div id="dialog" title="Dialog Title">maths is an important subject.</div> <br>
<button id="opener">english</button>
<div id="dialog" title="Dialog Title">this is also very important</div> <br>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
+1
source to share
2 answers
- The identifier must be unique and therefore use the class to work with several other elements of the same time.
- To associate a button and a dialog, for example, use the data id for the button and the id for the dialog with the same value
HTML:
<h2>subjects</h2>
<button class="opener" data-id="#dialog1">maths</button>
<div class="dialog" id="dialog1" title="Dialog Title">maths is an important subject.</div>
<br>
<button class="opener" data-id="#dialog2">english</button>
<div class="dialog" id="dialog2" title="Dialog Title">this is also very important</div>
<br>
JQ:
//create all the dialogue
$(".dialog").dialog({
autoOpen: false
});
//opens the appropriate dialog
$(".opener").click(function () {
//takes the ID of appropriate dialogue
var id = $(this).data('id');
//open dialogue
$(id).dialog("open");
});
+1
source to share
Identifiers are used to indicate which object you are working with. You need to give them separate names so they know what to work with.
<h2>subjects</h2>
<button id="openerMath">maths</button>
<div id="dialogMath" title="Dialog Title">maths is an important subject.</div> <br>
<button id="openerEnglish">english</button>
<div id="dialogEnglish" title="Dialog Title">this is also very important</div> <br>
<script>
$( "#dialogMath" ).dialog({ autoOpen: false });
$( "#openerMath" ).click(function() {
$( "#dialogMath" ).dialog( "open" );
});
$( "#dialogEnglish" ).dialog({ autoOpen: false });
$( "#openerEnglish" ).click(function() {
$( "#dialogEnglish" ).dialog( "open" );
});
</script>
This should be what you are looking for.
0
source to share