Reputation: 624
I have a submit button in a form ex:
<div>
<form method = 'POST' action="#">
<input type="submit" class="btn btn-success myDialog" value="buy now"/>
</form>
</div>
I need to show pop-up dialog box when submit
event is raised. I tried somthing like this
in html
<div class="dialog">hello dialog box</div>
in .js
file
$( ".myDialog" ).click(function() {
alert();// alert is working
$( ".dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
},
hide: {
effect: "explode",
}
});
});
for me the above code is not working even I tried dialog("open")
but no use, can anyone help me on this.
Upvotes: 0
Views: 994
Reputation: 4397
Try this..
$(".myDialog").click(function() {
$(".dialog").dialog({
show: {
effect: "blind"
},
hide: {
effect: "explode"
}
});
});
$(".myDialog").click(function() {
$(".dialog").dialog({
show: {
effect: "blind"
},
hide: {
effect: "explode"
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="myDialog">open the dialog</button>
<div class="dialog" title="Dialog Title" style="display: none">hello dialog box</div>
Upvotes: 1
Reputation: 282160
This piece of code works.Change the input type from submit to button.
$(function() {
$( ".dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
},
hide: {
effect: "explode",
}
});
$( ".myDialog" ).click(function(e) {
$(".dialog").dialog('open');
});
})
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<div>
<form method = 'POST' action="#">
<input type="button" class="btn btn-success myDialog" value="buy now"/>
</form>
</div>
<div class="dialog" hidden="hidden">hello dialog box</div>
Upvotes: 0
Reputation: 2165
Use this.
$( ".myDialog" ).click(function() {
$( ".dialog" ).dialog({
show: {
effect: "blind",
},
hide: {
effect: "explode",
}
});
});
and change type="submit"
to type="button"
<input type="buttom" class="btn btn-success myDialog" value="buy now"/>
Upvotes: 0
Reputation: 47127
You will need to set autoOpen
to true:
$(".dialog").dialog({
autoOpen: true, // <-- set to true, which is default
show: {
...
...
});
You should also change from a click event on the button to a submit event on the form:
$(".myDialog").closest("form").on("submit", function() {
$(".dialog").dialog({
show: {
effect: "blind",
},
hide: {
effect: "explode",
}
});
});
Alternative you can open it later with:
$(".dialog").dialog("open");
Upvotes: 1
Reputation: 11
<input type="button" class="btn btn-success myDialog" value="buy now"/>
Change the type of an input box. Use "button" instead of "submit" and try.
Upvotes: 0