I have the following HTML Code. Clicking on the Buy now for 200 will show the below pop up with Buy now, ok and close
<button class="btn-standard buyButton currency-coins">Buy Now for 200</button>
<div class="dialog-body">
<button class>
span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
<button class>
<span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
</div>
I want to automatize the process, and I did something like this in javascript but it didn't work for the last step, click on OK.
So below is my code.
$("button:contains('Buy Now')").on('click', function(){
$("span:contains('Ok')").click();}); //alert("hello") is working, but click on OK button didn't
----------------------------
$("button:contains('Buy Now')").click(); // is doing nothing for Ok button click.
You want to trigger the click event of the span on the click of the 'Buy Now' button, if I understood correctly.
The code you have should work. All you need to do is create a function to do something about the click event of the span.
$("button:contains('Buy Now')").on('click', function() {
$("span:contains('Ok')").trigger('click');
return false;
});
$("span:contains('Ok')").on('click', function() {
//do something here
alert("This works");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class>
Buy Now
</button>
<div class="dialog-body">
<button class>
<span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
<button class>
<span class="btn-text">Cancel</span>
<span class="btn-subtext"></span>
</button>
</div>
I am using Magnific Pop up on a project, currently I have it on a ASP MVC project as a Modal:
Modal
div id="js_DeleteNewSongsPopup" class="theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup">
<div class="panel">
<div class="panel-heading">
<span class="panel-title">
<i class="fa fa-ban "></i>Reject Selected Song
</span>
</div>
#* Information Body *#
<div class="panel-body p25">
<div class="section row">
<div class="col-md-12 text-center">
<h3>
Are you sure you want to <b class="text-danger">reject</b> the selected Songs?
</h3>
<p>
Please note, these will be <b class="text-danger">deleted</b> and no longer accessable
</p>
</div>
</div>
</div>
#* Form Body *#
<div class="panel-footer">
<div class="text-center">
<fieldset>
<input type="button" class="btn btn-primary js_CancelForm" value="Cancel" data-bind="click: function(){ $.magnificPopup.close(); }">
<input type="button" class="btn btn-danger js_DeleteNewSongsButton" value="Delete" data-bind="click: $root.submitDeleteNewSongs">
</fieldset>
</div>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
JavaScript
/* Delete New Songs Popup*/
$(document).on("click",
".js_DeleteNewSongs",
function (e) {
e.preventDefault();
var popup = $("#js_DeleteNewSongsPopup");
$.magnificPopup.open({
removalDelay: 500, //delay removal by X to allow out-animation,
items: {
src: $(popup)
},
callbacks: {
beforeOpen: function (e) {
this.st.mainClass = 'mfp-slideUp';
},
close: function () {
}
},
midClick: true
// allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
return false;
});
Any ideas as there is no console errors being reported. I am also unsure why it is working on another page, when the mark-up is identical
Try:
$('body').removeClass('panel-body p25');
Or
$('body').removeClass('theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup');
Basically you need to remove the "modal" class.
Ended up using:
$('.js_CancelForm').on("click", function () {
$.magnificPopup.close();
});
Now the Popup closes as expected.
I'm trying to write a function in JavaScript that opens an model when a player enters a certain box. The model does pop up, but it no longer closes.
This is used to open the model :
The JavaScript:
superFight(){
function ModalLink(){
$('#myModal').modal('show');
}
ModalLink();
}
The HTML Model:
<div id="myModal" class="" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modaldd Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I already tried to use $('#myModal').modal('hide'); and $('#myModal').modal({ show: false});
This did not work. When I put it in the console, it gave :
> $('#myModal').modal({ show: false});
< false = $1
I also tried an onClick function in the close button to activate a function to close the modal, but this not work either.
Basically what I'm trying to do, is to open and close an modal programmatically. Whenever an superFight(); is started, it should pop up with some info. And the user should be able to close it when done.
I'm writing the code in an ionic app.
Figured it out.
I changed the code in superFight() to:
function superFight(){
$('#myModal').show();
$('#myModal').modal('show');
$( ".simplemodal-overlay" ).show();
}
Added an onClick the HTML:
<button type="button" class="close" data-dismiss="modal" onclick="CloseModalSpel()">×</button>
And then in the page, I added this function at the bottom:
function CloseModalSpel(){
$('#myModal').hide();
$( ".simplemodal-overlay" ).hide();
}
It now opens, and closes the modal.
I currently have a form. As per below.
<form action="/process" id="formTest" name="formTest" enctype="multipart/form-data" method="POST">
<input type="text">
</form>
I added a modal to confirm on the submit.
<div class="modal fade" id="bondModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>Test;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="accept" class="btn btn-primary">Accept</button>
</div>
</div><!-- /.modal-content -->
Now if the user submit, the modal of confirmation will be showed, and if the user subsequently choose accept, it will proceed the submit.
The problem is , the subsequent submit never works.
$('#formTest').submit(function(e) {
e.preventDefault();
$('#bondModal').modal('show');
$("#accept").click(function(e) {
$("#formTest").submit();
e.preventDefault();
$('#bondModal').modal('hide');
}
);
} });
The thing is if I change the code to reset instead of submit..it works for reset ..
$('#formTest').trigger('reset');
You've got yourself stuck in a loop.
When you fire the action:
$("#formTest").submit();
You are not submitting the form because you are calling your own function which prevents the default action:
$('#formTest').submit(function(e) {
e.preventDefault();
//do stuff
});
If you want to use the code you have currently you can do 1 of 2 things:
use one() on the submit function so it only fires once. This would require you to rebind on a reset or cancel
$('#formTest').one('submit', function(e) {
e.preventDefault();
//do stuff
});
Or unbind the submit function just before your forced submission.
$('#formTest').on('submit', function(e) {
e.preventDefault();
$("#accept").click(function(e) {
$('#formTest').unbind('submit');
$('#formTest').submit();
});
});
However, I would go a different way, and take the submit button out of the visible markup on the page. Just put an a tag in the form that you fire the open-modal function from upon click. Then you don't need to do any submission in your code, you just have the standard submit and reset buttons in the modal and they carry out their default behavior:
The markup:
<form>
<input type="text">
<a class="open-modal">Submit</a>
<div class="modal">
<h4 class="modal-title">Confirm?</h4>
<p>Test</p>
<input type="reset" class="btn btn-default">Cancel</button>
<input type="submit" class="btn btn-primary">Accept</button>
</div>
</form>
And the code:
$('a.open-modal').on('click', function(e) {
e.preventDefault();
$('.modal').fadeIn();
});
Much simpler. Hope this helps.
The issue is this line:
document.getElementbyname("formTest").submit();
There is no function called "getElementbyname()". It seems you are looking for document.getElementsByName() which returns a NodeList. In that case:
document.getElementsByName("formTest")[0].submit();
However, you can also use the document.forms array:
document.forms["formTest"].submit();
Finally, since your form has an ID, you could also use that:
document.getElementById("formTest").submit();
I'm using twitter bootstrap's modal popup.
<div id="myModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>
I can load content using ajax with this a-element:
<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>
Now I have to open the same modal but using a different url. I'm using this modal to edit an entity from my database. So when I click edit on an entity I need to load the modal with an ID.
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>
If I click on link number 1, it works fine. But if I then click on link number 2 the modal content is already loaded and therefor it will show the content from link number 1.
How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup?
I guess the way of doing this will be to remove the data-toggle attribute and have a custom handler for the links.
Something in the lines of:
$("a[data-target=#myModal]").click(function(ev) {
ev.preventDefault();
var target = $(this).attr("href");
// load the url and show modal on success
$("#myModal .modal-body").load(target, function() {
$("#myModal").modal("show");
});
});
To unload the data when the modal is closed you can use this with Bootstrap 2.x:
$('#myModal').on('hidden', function() {
$(this).removeData('modal');
});
And in Bootstrap 3 (https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516):
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
$(e.target).removeData('bs.modal');
});
You can force Modal to refresh the popup by adding this line at the end of the hide method of the Modal plugin (If you are using bootstrap-transition.js v2.1.1, it should be at line 836)
this.$element.removeData()
Or with an event listener
$('#modal').on('hidden', function() {
$(this).data('modal').$element.removeData();
})
With Bootstrap 3 you can use 'hidden.bs.modal' event handler to delete any modal-related data, forcing the popup to reload next time:
$('#modal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
Based on other answers (thanks everyone).
I needed to adjust the code to work, as simply calling .html wiped the whole content out and the modal would not load with any content after i did it. So i simply looked for the content area of the modal and applied the resetting of the HTML there.
$(document).on('hidden.bs.modal', function (e) {
var target = $(e.target);
target.removeData('bs.modal')
.find(".modal-content").html('');
});
Still may go with the accepted answer as i am getting some ugly jump just before the modal loads as the control is with Bootstrap.
A little more compressed than the above accepted example. Grabs the target from the data-target of the current clicked anything with data-toggle=modal on. This makes it so you don't have to know what the id of the target modal is, just reuse the same one! less code = win! You could also modify this to load title, labels and buttons for your modal should you want to.
$("[data-toggle=modal]").click(function(ev) {
ev.preventDefault();
// load the url and show modal on success
$( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() {
$($(this).attr('data-target')).modal("show");
});
});
Example Links:
<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>
I made a small change to Softlion answer, so all my modals won't refresh on hide.
The modals with data-refresh='true' attribute are only refreshed, others work as usual.
Here is the modified version.
$(document).on('hidden.bs.modal', function (e) {
if ($(e.target).attr('data-refresh') == 'true') {
// Remove modal data
$(e.target).removeData('bs.modal');
// Empty the HTML of modal
$(e.target).html('');
}
});
Now use the attribute as shown below,
<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>
This will make sure only the modals with data-refresh='true' are refreshed. And i'm also resetting the modal html because the old values are shown until new ones get loaded, making html empty fixes that one.
Here is a coffeescript version that worked for me.
$(document).on 'hidden.bs.modal', (e) ->
target = $(e.target)
target.removeData('bs.modal').find(".modal-content").html('')
It will works for all version of twitterbootstrap
Javascript code :
<script type="text/javascript">
/* <![CDATA[ */
(function(){
var bsModal = null;
$("[data-toggle=modal]").click(function(e) {
e.preventDefault();
var trgId = $(this).attr('data-target');
if ( bsModal == null )
bsModal = $(trgId).modal;
$.fn.bsModal = bsModal;
$(trgId + " .modal-body").load($(this).attr("href"));
$(trgId).bsModal('show');
});
})();
/* <![CDATA[ */
</script>
links to modal are
<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>
pop up modal
<div id="myModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
I was also stuck on this problem then I saw that the ids of the modal are the same. You need different ids of modals if you want multiple modals. I used dynamic id. Here is my code in haml:
.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
you can do this
<div id="<%= some.id %>" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save" />
</div>
</div>
and your links to modal will be
<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
I hope this will work for you.
You can try this:
$('#modal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
I wanted the AJAX loaded content removed when the modal closed, so I adjusted the line suggested by others (coffeescript syntax):
$('#my-modal').on 'hidden.bs.modal', (event) ->
$(this).removeData('bs.modal').children().remove()
var $table = $('#myTable2');
$table.bootstrapTable('destroy');
Worked for me
step 1 : Create a wrapper for the modal called clone-modal-wrapper.
step 2 : Create a blank div called modal-wrapper.
Step 3 : Copy the modal element from clone-modal-wrapper to modal-wrapper.
step 4 : Toggle the modal of modal-wrapper.
<a data-toggle="modal" class='my-modal'>Open modal</a>
<div class="clone-modal-wrapper">
<div class='my-modal' class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>
</div>
</div>
</div>
<div class="modal-wrapper"></div>
$("a[data-target=#myModal]").click(function (e) {
e.preventDefault();
$(".modal-wrapper").html($(".clone-modal-wrapper").html());
$('.modal-wrapper').find('.my-modal').modal('toggle');
});