Passing variable into a modal from a script
Question
If you want to update a modal with a variable (eg, @myVar) that's updated inside of a script based on a user action, how do you go about doing that? Because I'm not sure how something inside of a script can update something outside of it without knowing the id since the variable inside the script isn't the same outside of it.
Do we need id tags in the modal that would allow for some type of update from the script? And if so, what options, other than
, could we use that would allow us to attach an id -- if that's the way to go about it?
<!DOCTYPE html> <html> <head> ... </head> <body>
@{var myVar = "______";}
@{var myVar2 = "______";}
...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModal-label">A list of your choices</h4>
</div>
<div class="modal-body">
<p>My first choice would be @myVar and my second choice would be @myVar2.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
<script id="myScript" data-myvar="@myVar">
$('[name="optradio1"]').on('change', function () {
$('#accordion-second').slideToggle();
$('#accordion-first').slideToggle();
var value = $(this).val();
switch (value) {
case "1":
$('#myScript').data('myVar', "Option 1");
alert($('#myScript').data('myVar'));
break;
case "2":
$('#myScript').data('myVar', "Option 2");
alert($('#myScript').data('myVar'));
break;
default:
alert("neither options were chosen");
}
});
</script>
<script id="myScript2" data-myvar="@myVar2">
$('[name="optradio2"]').on('change', function () {
$('#accordion-second').slideToggle();
$('#accordion-third').slideToggle();
var value = $(this).val();
switch (value) {
case "3":
$('#myScript2').data('myVar2', "Option 1");
alert($('#myScript2').data('myVar2'));
break;
case "4":
$('#myScript2').data('myVar2', "Option 2");
alert($('#myScript2').data('myVar2'));
break;
default:
alert("neither options were chosen");
}
$('#myModal').modal('toggle');
});
</script>
...
`
</body> </html>
1 answers
solution1
1 ACCPTED 2014-12-29 21:57:46
Yes, You are thinking in a right direction. You need to address element in your modal in some way. You can use IDs, classes, some special attributes, etc. Let's use IDs for example. I see you already have ID on modal itself - "myModal" Let's say, on some user action you want to assign value of your variable to textbox on your modal. You would write something like this
<div id="myModal">
...
<input type="text" id="txtUserName"></input>
...
</div>
<script>
...
$('#txtUserName',$('#myModal')).val('Jim Smith');
...
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.