I'm testing to create a each loop with an array object. I would like to every element show a modal window with a data and with a question. After response the question the modal hide and show with other array element.
I have read a lot of information and the each loop cann't wait response¿?
Modal:
This interface use to ask user to replace an image.
I'm working in this code:
$.each( arrayExist, function( i, value ) {
if (value == 1) { // Show modal with the old and new image when value is true
alert ('Exist');
$('#overwriteImages').modal('show');
$('#overwriteImages').on('show.bs.modal', function (event) {
$('input[type="submit"]').click(function(event){
$('#btnYes').on('click', function() {
$('#overwriteImages').modal('hide');
});
$('#btnNo').on('click', function() {
$('#overwriteImages').modal('hide');
arrayCod.splice( $.inArray(removeItem,i) ,1 );
alert(arrayCod.length);
});
});
});
}else{
alert ('Not Exist');
}
});
I'm not sure that is possible to do it or it would be a better option... ajax or whatever.
The problem is that the each loop is execute in each modal window. It doesn't wait to response Yes or No. Example:
Select two elements.
Element(1) -> Show Modal and two alerts because the each loop running at two times)
Element(2) -> Show Modal and two alerts because the each loop running at two times)
The correct behaviur would be:
Select two elements.
Element(1) -> Show Modal and an alert only with this element.
Element(2) -> Show Modal and an alert only with this element.
The summary is: I need that the each loop wait to response in modal window to be continue the loop.
Don't use a loop here. Of course, the each function won't wait to return from a "modal" window, because your window isn't modal actually (only alert, prompt and comfirm are authentic modals). Everything goes through events, so declare a variable that holds de index of the element you want to show now, and increment and decrement it as the user clicks "nueva" or "anterior" recovering the element from the array and operating with it.
Related
I have a few different modals on a page, and it all works as it should, but if a user makes some input on form fields in a modal and then accidentally clicks outside of the modal (which closes it), they loose their changes, since if the user clicks the same button they pressed to open the modal, the data they entered will be overwritten with data pulled from the database.
So I'd like to have a function for "reopen last closed modal" that simply shows the modal again in it's last used state - with whatever data was in it.
Essentially like a Ctrl-Z for accidentally closing a modal.
It's really simple if you know the ID of the modal. Such as:
$('#myModal1').modal('show'); });
But because I have several different modals available on a page, and I don't want to have a bunch of "restore" buttons, I need to be able to detect the ID of the last closed modal.
If there's not a simpler way, I could capture the ID each time a modal is closed, and then use that ID if the modal needs to be reopened without changing its data. Something like this:
$('#myModal1').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal1';
})
$('#myModal2').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal2';
})
function reOpen() {
$(LastModal).modal('show');
}
But I'm guessing there's a way that's simpler and doesn't require me to state all my modals ID's in JS/jQuery. Any ideas?
I've made a few tweaks, and this is working well for me now, with essentially no other hassle than a few short lines of code in my script file.
var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}
Just use the style class "modal" for your modals, and to call the "reOpen", just have something like:
<span onclick='reOpen();'>Reopen</span>
Thanks #marekful for your suggestion!
Also, if you want to access this (or any other function) by pressing Ctrl+Z, you can add this:
// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
if (evt.keyCode==90 && (evt.ctrlKey)){
evt.preventDefault();
reOpen();
}
});
I wish to append some content within form within a modal and so have created:
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>");
However, this does not appear to work -the HTML above deosnt not append, not do I see any errors in the console.
I can do other stuff on the page - append the text anywhere else, just not to part of the modal.
The site is using the Near Me platform, an example site of which is here: https://desksnear.me/
I am just trying to affect the modal that appears when you click Log In at the top right.
Would anyone know why this isn't working and what I could do to get back on track?
I think the modal gets created anew every time you click the Log In button. So the .simple_form changes get overwritten before they can be seen.
There isn't an ideal solution to this problem if you can't tap into an event that occurs when the modal is opened and all the content in it has been initialized. I would suggest using an interval to repeatedly check if the modal is visible (for some capped amount of time, in case something fails), and then insert your HTML code at that point.
$('.nav-link.header-second').click(function() {
var token = setInterval(function(modal) {
if (modal.hasClass('visible')) {
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>")
clearInterval(token)
}
}, 10, $('.modal-content'))
// set a limit on the interval in case of failure
setTimeout(clearInterval, 2000, token)
})
Wrap it in document ready, the element must be there when the code executes(assuming you already have the element with class .simple_form as hidden)
$(document).ready(function(){
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>");
});
I'm implementing an add wishlist function to my rails app. So far I can dialog the message and get it to fade after 5 seconds. The issue is, once faded out and the user clicks on another "add wishlist" no dialog. They have to refresh the page. Im still learning so I know what's going on. I need to close the dialog with js but how?
Coming from my last question:
HTML
<section data-id="notification"></section>
JavaScript
...
// Calling the notification();
// You need to reduce that data string!
notification("<div id='noti' class='alert alert-success'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><p>WishList Added!</p></div>");
...
function notification(data){
$( "[data-id=notification]" ).append( data ).delay(5000).fadeOut(400); // I've tried adding .dialog('close')
$('#noti').dialog('close'); // this gives an error.
}
...
To conclude, when user adds to wishlist, an dialog will show. User can manually close the dialog or it will close itself after x seconds. If dialog closes it self and user clicks another add wishlist, alert re-appears etc. Some how I need to remove it from the dom.
Maybe it wont make sense to display a message every time the user adds/removes a wishlist but this will be useful for other parts of my app.
This question is 4 years ago. Has anything changed since? I need both: user close and js close.
You should use alert('close') :
$( "[data-id=notification]" ).append( data ).delay(5000).fadeOut(400);
$('#noti').alert('close');
Or using setTimeout :
$( "[data-id=notification]" ).append( data );
setTimeout(function() { $('#noti').alert('close'); }, 5000);
Hope this helps.
I have jquery snippet that is working on a VF page in saleforce. I pass an array from a query result in SF to a method in a script that should show each array item as a unique dialog window. All the array elements should be looped through and only when the user closes the dialog, should it proceed to the next array element and create another dialog.
So far I got the jquery code running and it shows ONLY 1 dialog, the last one. After debugging I found that it is NOT stopping at each dialog so therefore all the messages are looped through non stop. If I use alert instead, it works fine showing each message in sequence. See code below, any help would be greatly appreciated:
//display the dialog window for each message
function showPopMessages(pPopMsgs){
var updatedMsgs = new Array();
console.log('updatedMsgs.legnth: '+pPopMsgs.length);
$j.each( pPopMsgs, function( index, value ){
console.log('updatedMsgs.value: '+value.Message__c);
$j("#dialog-confirm").html(value.Message__c);
$j( "#dialog-confirm" ).css("display","block");
$j( "#dialog-confirm" ).dialog(); //IIT IS NOT STOPPING HERE!!!
//alert(value.Message__c);
});
}
I don't know much about jQuery UI, but it seems as though you aren't passing any arguments to the dialog(). That sounds like a recipe to make nothing happen. What happens if you just add .dialog('wait'); ?
Of course, if you are getting errors in the console, we want to see those.
We have a modal dialog which activates when the user goes outside the browser body. This is using the .one() code below. Isn't .one supposed to show the modal once? Is it possible to do this only once per user (cookie?) so every time they go back to the page it's not repeated when they go outside the body?
jQuery("body").one('mouseleave', function() {
jQuery("#modal-background").toggleClass("active");
jQuery("#modal-content").toggleClass("active");
});
Any suggestions?
check the cookie's value inside the function, if the value is not 1, it means that the modal dialog hasn't shown yet and it goes inside the if and shows the modal dialog and set value to 1. Then next time the cookie is 1 and it never goes inside the if, so it never shows the modal dialog.
jQuery("body").one('mouseleave', function() {
if(jQuery.cookie("dialogDisplayed") !==1){
jQuery("#modal-background").toggleClass("active");
jQuery("#modal-content").toggleClass("active");
jQuery.cookie("dialogDisplayed", '1', { expires: 30 });
}
});