I have a jQuery dialog box that I use as a form, when I click the button it performs what it needs to, but does not close. How would I go about making it close on button click.
My current code looks like this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#HeatNameDiv').dialog({
autoOpen: false
});
});
$(document).ready(function () {
$('#Change_Heat_Name').click(function (e) {
e.preventDefault();
$('#HeatNameDiv').dialog('open');
});
});
</script>
Button that opens the dialog:
Heat Name<input type="text" name="heat_name" value="#Html.ValueFor(x => x.heatname)" class="search-query" placeholder="Search" style ="width:100px"/>
<button class="btn btn-success" id="Change_Heat_Name" value="Change_Heat_Name" name="action:Change_Heat_Name" type="button"> Change Heat Name</button>
Form inside the dialog box:
<div id="HeatNameDiv" title="Change Heat Name">
#using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, new AjaxOptions(){UpdateTargetId = "chemDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "$(document).ready(function () { $('#ChangeHeatName').click(function () { $('#HeatNameDiv').dialog('close');});});" }))
{
<section>
Heat Name:<input type="text" name="heatName" value="#Html.ValueFor(x => x.heatname)" style ="width:100px"/>
Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
<input type="submit" name="ChangeHeatName" value="Change" />
</section>
}
The close allows you to do exactly what it name suggests: close the dialog:
$('#HeatNameDiv').dialog('close');
Also you seem to be calling this function inside the click event of some #ChangeHeatName. Make sure that you have canceled the default action if this is an anchor or a submit button to avoid the browser redirecting away from the page:
$('#ChangeHeatName').click(function () {
$('#HeatNameDiv').dialog('close');
return false;
});
Put all your code in one $(document).ready() and try this
$(document).ready(function () {
$('#HeatNameDiv').dialog({
autoOpen: false
});
$('#Change_Heat_Name').click(function (e) {
e.preventDefault();
// This will open the dialog
$('#HeatNameDiv').dialog('open');
});
$('#ChangeHeatName').click(function (e) {
e.preventDefault();
// This will close the dialog
$('#HeatNameDiv').dialog('close');
});
});
DEMO HERE
Since the button in inside the dialog box, use the code below:
$('#ChangeHeatName').click(function (e) {
e.preventDefault();
$('.ui-icon-closethick').click();
});
DEMO HERE
Below is the code for button in dialog and close the dialog on click
jQuery(document).ready(function ($) {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").click(function () {
$("#dialog").dialog("open");
});
$("#Closer").click(function () {
$("#dialog").dialog("close");
});
});
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<button id="Closer">Close Dialog</button>
</div>
Open Dialog
Related
I'm new with bootstrap, and I've code for message confirmation.
How can I put my onclick() using this code below?
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
Html of bootbox:
HTML (image)
onclick() input:
<input type='submit' name='actualiza_noticia' class='button' onClick="" value='Atualizar notícia'>
You can use either use the jQuery function $(elem).modal('show') function, or the Bootstrap html data attributes:
Using data attributes:
<input type='submit' data-toggle="modal" data-target="#myModal" name='actualiza_noticia' class='button' value='Atualizar notícia' >
Using Jquery function:
<input onclick="$('#myModal').modal('show')" type='submit' name='actualiza_noticia' class='button' value='Atualizar notícia' >
These shuold both trigger your events, although the 'show' event is 'shown.bs.modal' to be in compliance with Bootstrap 3:
$("#myModal").on('shown.bs.modal', function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
Read more about bootstrap modal here.
According to the image that reports your html my proposal is:
change $("#myModal").on("show", function() { to `$("#myModal").on("shown.bs.modal", function() {
change $("#myModal a.btn").on("click", function(e) { to $("#myModal button.button.btn.btn-primary").on("click", function(e) {
change $("#myModal").on("hide", function() { to $("#myModal").on("hide.bs.modal", function() {
change $("#myModal a.btn").off("click"); to $("#myModal button.btn.btn-primary").off("click");
For details see bootstrap modals
$(function () {
$("#myModal").on("shown.bs.modal", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal button.btn.btn-primary").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide.bs.modal", function() { // remove the event listeners when the dialog is dismissed
$("#myModal button.btn.btn-primary").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog box -->
<div class="modal-body">
<button type="btn btn-default" class="close" data-dismiss="modal">×</button>
Hello world!
</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button type="btn btn-default" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>
This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});
I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.
If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick
I've tried the following on JSFiddle
HTML:
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
Link
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"a",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
});
I cannot close the dialog when I hit the close button. Why is it?
You're reopening the dialog when the close click bubbles up to the document level. The dialog close [x] is an <a> too.
Add this line to that "click" handler, at the very beginning:
if ($(this).hasClass('ui-dialog-titlebar-close')) return;
Alternatively, you could make your "open dialog" link more specific, by giving it a class or something:
<a href=# class=open-dialog>Link</a>
Then:
$('body').on('click', '.open-dialog', function(event) {
event.preventDefault();
$('#dialog').dialog('open');
});
By making the link to open the dialog distinct from the close button, you get around the ambiguity.
You must define CLOSE function:
HTML
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
<a id="open" href="www.google.com">Link</a>
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"#open",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
$(document.body).on('click',".ui_icon_closethick",function(event){
event.preventDefault();
$("#dialog").dialog('close');
});
});
Working solution: http://jsfiddle.net/QTqUr/1/
I am using the following code to open a dialog box:
<li>
<input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>
<div id="dialog">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 525,
resizable: false,
width: 600,
dialogClass: 'timer'
});
});
//]]>
</script>
</div>
In my .js file:
function showPreview(action, id) {
$.get("/Manage/Account/" + action + "/" + id, function (data) {
$("#dialog").html(data);
$('#dialog').dialog('open');
$('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
$("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
});
I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?
This is in the dialogbox-view:
<div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div>
I don't see any dialog closing anywhere, you can close your dialog with this function:
$('#dialog').dialog('close');
More about it: jQueryUI dialog
Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.
Your dialog element IDs need to be unique, or jQuery won't find the right one.
I have the following script:
<script type="text/javascript">
$( "#addLocation" ).dialog({
autoOpen: false,
modal: true,
height: 700,
width: 550,
buttons: {
"Add Location": function() {
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
</script>
<script type="text/javascript">
function showLocationDialog() {
$("#addLocation").dialog("open");
}
</script>
<div id="addLocation" style="display:none;">
<form action="" method="post" name="mapform">
<input type="text" name="name" />
<input type="submit" />
</form>
</div>
<button onclick="javascript:showLocationDialog();">Add an address</button>
The button does not open the dialog and I cannot understand why.. can anyone assist?
Thanks,
Wait for the DOM to be ready.
Stick your .dialog() code in a $(document).ready() or $() block
1 - Put the .dialog() initialization into a $(document).ready() { ... });.
2 - Remove the extra comma from after the buttons value:
buttons: {
"Add Location": function() {
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}, <-- remove this, causes IE to spontaneously combust
another thing to try...
remove the display:none css from the addLocation div..the dialog will take care of hiding everything once its initialized on document.ready