getSript adds handler several times at the same object - javascript

I have 2 divs, they have multiples elements and each element has options(events). In the first div, each element has a button that load, in the second div, the children elements. Those children have a edit button that opens a dialog where the user can edit.
Here is the script:
$("#Content").load("elements.php?id=5", function(){
$.ajaxSetup({cache: true});
$.getScript("../js/elements.js", function(){
$.ajaxSetup({cache: false});
});
})
The problem is: When I load #Content with its script, it`s works good only in the first time, it opens one dialog box, but if I load twice, it opens two dialog boxes, and three, etc.
How do I delete the last script I loaded?

Are there any bindings? any live, etc? I am not sure if its your current code that is causing this issue or the elements.js being that I dont know what is inside of it. I do recommend checking out Jquery stopImmediatePropagation(). I hope this can put you on the right path.

Related

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

Making jquery Dialog working between two pages

I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");

4 navlinks needs to close all content and open its own

I have an almost working script but I don't understand scripting too good to make it work on all links.
When you have a look at my fiddle, and you click on the first two links, all work fine.
When you click on the other two ones the other content fields don't close. I need to close all, open just one..
http://jsfiddle.net/fourroses666/8y7Sr/100/
This is a part of the script:
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
$('#box-bureau').animate({'bottom':'-600px'},800,function()
{
$('#overlay-bureau').fadeOut('fast');
});
});
i actually don't need the overlay
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/

A few jQuery questions

First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});

JQuery drag and drop stops working on certain objects?

I've successfully been able to make elements (like div's, panel's, whatever) draggable by using this bit of Jquery:
<script type="text/javascript">
$(function() {
$(".drag").draggable({ revert: true });
});
</script>
This works fine for anything that already exists on the page before page_load is done and before any postbacks occur. I have a series of buttons (with a class of '.catbuttons') that when clicked, will call out to my database and retrieve some image url's. Once I retrieve this set of url's, I do a for/next loop and create a whole bunch of image objects and place them into a panel. Each of the images has the cssclass of '.drag' to make it work with the JQuery above.
Problem is, they no longer drag! I've read another post on here about needing to rebind javascript stuff after a postback (even a partial postback?) and this would allow brand new controls to get the above Jquery code attached to them, and hence make them draggable. After some google searching, I ran into this and tested it out:
<script type="text/javascript">
$(".catbuttons").live("click", function(){
$(".drag").draggable({ revert: true });
});
</script>
I tried leaving this in the header section of my aspx page with the original script, and also having this here all by itself. No dice either way.
Thoughts?
The above function actually expect a click from user, to call draggable again. Instead you need to do it after postback. Rule here, should be, to register all images with draggable function, after placing the images on page.
Edit:
In your case clicking button just triggers the function to fetch the images. Those images should be placed on page, before you make them draggables. You can register the created object with draggables, immediately after the statements where you place & apply ".drag" cssclass to those object/images at runtime.

Categories