We Keep Coding

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

Opening one modal from another using the meteor way

How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},

Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});

Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.

Creating a popup box that pops ip after 3 seconds

I want to make a popup box, that when a user accesses this site: http://www.isicar.net/ it pops up after 2 seconds. So, no clicking of any buttons invoiced to make the popup box appear
The popup box would act as a n advertisement, for users to sign up via this website: http://isicar.mine.nu/ so it would have to contain a button that redirects them to that URL and one that closes the popup box so they can return to the original page.
Thanks in advance.

Use this in ready or DOMContentLoaded or load callback:
Use setTimeout:
Calls a function or executes a code snippet after a specified delay.
setTimeout(function () {
// Open the popup
}, 2000); // 2 seconds

Calling javascript function from code behind to remove div, but divs appear when postback

I have 2 divs with asp control in them. When I want to perform a certain action I want the divs to appear, for the rest, I need them to hide.
In my Page_load, I have this code to call the javascript function:
if (Request.QueryString["isMovingTask"] != null)
{
isMovingTask = Convert.ToBoolean(Request.QueryString["isMovingTask"].ToString());
}
if (!isMovingTask)
{
Page.ClientScript.RegisterStartupScript(GetType(),"Remove","removeDiv();",true);
}
the isMovingTask is a bool value that gets sent from my action file("viewTask.aspx"). If it is true, it means I am asking to move a task so I need the divs displayed, otherwise hide them. So in the if statement I check to see if it is not true, then I want to hide the divs. So I call a JS function called "removeDiv()" which looks like:
<script type="text/javascript">
function removeDiv() {
$('#checkboxes').remove();
$('#exhibitWarning').remove();
}
</script>
"viewTask.aspx" is my page that calls a "moveTemplate.aspx" file inside a fancybox, all this code is in the "moveTemplate.aspx" page. so the first time I launch it, everything works, the divs are hidden etc. But when I click on a radio button which causes a postback, it for some reason puts the divs back in.
any ideas as to why it does that?

you can use Panel controls instead. And can set their visible property to true or false.

One can use panel controls. Its easy to set their visible property to true or false and then your task shall be done.