I have a simple bootstrap modal:
<div class="modal" id="myModal">
...
<span data-action>Click me!</span>
...
</div>
And the following code:
$("#someButtonThatOpensModal").click(function() {
$("#myModal").modal("show");
});
$("[data-action]").click(function() {
window.open("http://some resource");
$("#myModal").modal("hide");
});
The problem is that after clicking button inside modal, that modal dodesn't appear again until tab opened from code via window.open is closed. That happens only in Chrome. Moreover, I am not able to refresh page until child-tab is closed.
What can I do? I want to "fire and forget" new tab - why it has influence of JS code?
EDIT:
It seems that printing breaks original tab. Newly opened tab calls window.print() on load, and original tab is broken until you close or cancel printing. On ther borwser, you cannot switch tab until you cancel or confirm printing. How can I can solve it in chrome?
Related
I'm using addthis share button in my website, but the click of the button is in a modal that is loaded dynamically, so when the modal html is loaded, I call the script of addthis this way:
var addthisScript = document.createElement('script');
addthisScript.id = 'addthisscript';
addthisScript.setAttribute('src',
'//s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript);
So, when I open the modal at first time, it works!
But, if I close the modal and open again and click the button to share again, it just reload the page.
After reloaded the page, starts to work again, but just once.
I already try remove the script from DOM and create again, but still doesn't work!!
When the modal is closed, I remove the entire HTML, this way:
$(`#${id_modal}`).on("hidden.bs.modal",() => {
$(`#${id_modal}`).remove();
}
And every time that I open the modal, I call the function addthis() that create the script above.
Any help?
<INPUT onclick="return verifyCheckedForEdit('UserAdminForm', 'itemDelUserId','hiddenUserId', 'Disable')" id=disableButton class=buttonBlue type=submit value=Disable name=Disable>
The above is my tag.I tried various options:
disable=$driver.find_element(:xpath,"html/body/div[4]/div[1]/div[2]/form/table/tbody/tr[2]/td/input[2]")
disable.submit
$driver.find_element(:name,"Disable").send_keys :enter
$driver.action.move_to(disable).double_click(disable).perform
$driver.action.move_to(disable).click(disable).perform
Nonone of the above work to click this button.
I am taking a screenshot after the click however I notice that the screenshot does not have the modal window using phantom js:
I tried to maximize the screen:
$driver.manage.window.maximize
And then I tried to click confirm on the window. But nothing happens.So I am stuck with not knowing if phantomjs actually rendered the modal window and also is it actually clicking on the modal popup.
I found a solution for this if anybody needs it:
$driver.execute_script('window.alert = function(){};')
$driver.execute_script('window.confirm = function(confirmationText) {return true; };')
delete=$driver.find_element(:name,"Delete").click
Before you click on the disable/delete button please create a modal window and then click on it.
I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.
My submit button in said modal has the following jQuery attatched:
$('#editTrackModal').modal('hide');
When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.
Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.
Is this possible?
Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.
You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:
$("#editTrackModal .modal-body").empty();
Hi you can do like this
// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
$(this).data('modal', null); //this will destroy you data and model means it will reset.
});
and it may be duplicate of how to destroy bootstrap modal window completely?
you can refer to that link also.
A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:
$('#editTrackModal').on('hidden.bs.modal', function () {
$('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});
And when you want to show the modal again, you can do something like this:
$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');
Your html may look like this:
<div id="editTrackModal" class="modal fade">
<div class='modal-contents'>
......Build your modal contents here......
</div>
</div>
I'm using Bootstrap 2.3.2, and I'm using modal dialogs like this:
<div id="notice1" class="modal hide fade">
<div class="modal-body">
<h4>This is a dialog for user...</h4>
</div>
...
</div>
and
var notice1 = $("#notice1");
notice1.modal({
keyboard: false,
backdrop: "static",
show: false
});
// Show the dialog
notice1.modal("show");
// Close the dialog
notice1.modal("hide");
Most of the the time, the above works fine and the modal dialog are opened and closed programmatically. However, in some rare cases, calling .modal("hide") does not close the dialog at all though the dark backdrop is removed.
This is a huge potential issue because the dialog may get stuck on the screen and block part of the content.
Is there a reliable way to ensure the dialog is always closed after calling .modal("hide")? Or better yet, how do we ensure a consistent hide behavior from Bootstrap? I don't want to remove the dialog completely from the DOM, because the same dialog may be re-used on the page.
You can hide the modal by using the following code.
$("#notice1").hide();
$(".modal-backdrop").hide();
According to documentation: http://getbootstrap.com/2.3.2/javascript.html#modals
You can catch the hidden event and force the display:none property.
notice1.on('hidden', function () {
$(this).css("display", "none")
})
I am using 1.9.x, below code working..
$("#yourModalWindow").modal('hide');
I am trying to use the jQuery tabbed widget as a menu for my application and have managed to set up the tabbed interface so that when you click a tab it shows the first page of that section. According to the docs, if you click on a link on this page and want it to load in the same tab then you need to use the code below. This partially works because now when I click on an image-hyperlink on that page it renders the new page in the tabbed window.
However, when I click on a button which has javascript the button no longer works. This is the case for all of the javascript. How can I get the javascript working again under the new tabbed interface?
$('#example').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
EDIT: So if you add the following line to LeftyX's code in the page 1 file, then the button causes page4.html to open but does not do it in the tab
<button onclick="location.href='Page4.html'">Test button </button>
It must work.
If you show us your HTML we might try to help.
You can check my sample and download the code.
Try and check if there are any errors in your script using some Dev Tools (ex: Google Chrome Developer Tools)
UPDATE:
if you're using a button you can use some HTML5 attribute:
<button data-pagelink="Page4.html">Test button</button>
and trap the click event:
$(ui.panel).delegate('button', 'click', function(event, o) {
$(ui.panel).load(this.dataset.pagelink);
event.preventDefault();
});
or use an hyperlink and transform it in a button:
<a id="thisIsAButton" href="Page4.html">go to page 4</a>
with this:
$("#thisIsAButton").button();