Show multiple dialogs in loop one at a time => Error - javascript

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.

Related

Jquery - For each wait show modal

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.

Jquery can't seem to target contents of modal

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>");
});

Detecting when user hits back button

I'm trying to detect when the user hits the "back" button in their browser.
When clicking on the link and then getting back, nothing happens:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$( window ).on( "navigate", function( event, data ) {
console.log( data.state );
});
</script>
Link
I was expecting a message in the log.
When the user checks some checkboxes, then go to another page and then returns back, I want to reset the form, so that all checkboxes are empty.
This isn't working because your javascript is not running on google.com. If you are on the page with your javascript and click the back button, you may see the console.log message for a split second, but it is a race between the browser loading previous page and the console loading your message that will determine if you see the message or not.
I had the same problem. The best solution I found was to use a checksum in the initial post. You can then compare the checksum and see if it had been used before, if it was then you can reset everything.

Why is my jQuery click function not firing?

I am building a search page that posts back to itself. I finally got a sample page working here. I also built a fiddle here. But I don't understand why it works. When the user initially hits the page, it should only show the search form. When a search is submitted, it should hide the form, show results, and a button for a new search. I'm using jQuery. Here's my code:
//Code Block 1
// Show search form if there is no querystring
//Hide search form, show results if querystring
$(document).ready(function() {
if(document.location.search.length) {
$("#newsearch").show(1000);
$("#results").show(1000);
$("#search").hide(300);
} else {
$("#search").show();
}
});
//code block 2
//if new search clicked, show form, hide results
$("#newsearch").click(function() {
$("#newsearch").hide(1000);
$("#results").hide(1000);
$("#search").show(300);
});
When code block 1 and 2 are loaded in the head, block 2 never fires. When I pull 2 out and put it at the end of the page, it works.
I am trying to learn, so I have 2 questions. (1) Why didn't it work when it was one block, and (2) Any suggestions for doing it better?
Thank you.
D
$("#newsearch").click(function() { is being run before the #newsearch element exists.
Therefore the click event is attached to nothing.
It works in the first block because it's in a $(document).ready, which runs code inside only after everything has finished loading.

getElementById works only after refreshing the page

I'm Trying to access results div in the results page of google.co.uk.
Using firebug one can see that the id of the div is "res" but for some reason getElementById('res') fails. to make things even weirder - if i refresh the page (F5 or ctrl+F5), the function succeeds.
Also, if i look in the source code of the results page i dont see anything that looks like the DOM described in firebug.
Why is this happening and how can i ensure getElementById('res') will succeed with any refresh by the user.
Thanks.
EDIT: im adding a a short code to simplify the problem. after placing a query in google.co.uk the page redirects and the alert 'working' pops but the second alert doesnt.
after refreshing, both alerts pop although the second one says 0 which is not right
because the div has children according to the firebug DOM.
p.s: i also failed to mention that im using greasmonkey
(function() {
alert('working');
var results = document.getElementById('res');
alert(results.childNodes.length);
})();
window.addEventListener("DOMContentLoaded", function () {
var results = document.getElementById('res');
alert(results.childNodes.length);
}, false);

Categories