Javascript inside a modal duplicated everytime I open the modal - javascript

I have a bootstrap modal with a form and javascript inside.
My modal content (called by ajax) :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="action">Submit</button>
<script>
$('.action').on('click', function(){
alert('ok');
});
</script>
Everytime I click on my button, I have a lot of alert displayed (not only one), the javascript inside the modal is not reset/killed when I open and close the modal again and again.

It seems you set the <script> tag inside the modal using an AJAX request. So everytime you call the AJAX request a new <script> tag gets executed and a new event is bound to the button. That's why you have multiple alerts showing.
To solve that, just isolate the JS from the modal or just set it once and not set it from the AJAX call. Just make it a static <script> tag.
Otherwise destroy the existing event handlers before you bind a new click event. Because events are still bound to the element even if you delete the <script> tag.

I have solved my problem, I listen the click event not directly on the submit button (button inside the ajax return), but on the modal wrapper and I place my JS outside the modal :
$('#modal-wrapper').on('click', '#my-submit-btn', function () { ...
Now, the JS work and is not duplicated.

Related

calling js function works only for the first time on jquery mobile

on jquery mobile web app I'm calling js function on close button. That js function close it's callers div parent.
That works fine, but problem is that I have multiple close buttons and this function works perfectly first time,
after that onclick doesnt work. It doesnt enter into js function.
I tried to put js function at very bottom of my _Layout.cshtml page but it doesnt change anything.
update
<script type="text/javascript">
$('#closeTable').click(function () {
$(this).parent().hide();
});
</script>
<div id="closeTable"></div>
Your problem is originating from the fact that you're using an ID to add event listeners to. In your JS, you have this line:
$('#closeTable').click(function () { ...
This line attaches a click event handler to the div with ID closeTable. Since there can only be one element with this ID, once it's hidden the user can't click it again and so the function won't be executed again.
If you have multiple close buttons as you say, you should instead use a class selector to attach handlers:
$(".closeTable").click(function() { ...
This will instead attach a listener to every element with class closeTable. This means that when any of them are clicked the function will execute, so it will work multiple times.
Hope this helps.

close fancybox from jquery

I have a function that gets executed when clicking on certain things within the content of my fancybox. The functions work fine, but I cannot, for the life of me, figure out how to close fancybox programmatically. I have tried:
$.fancybox.close() and parent.$.fancybox.close();
I have even tried triggering a click to the close button but that has not worked either.
When I try $.fancybox.close() I get
Uncaught TypeError: Cannot call method 'close' of undefined
Here is what my fancybox call looks like:
Open
Here is what my function looks like (attached to the parent page's head)
$(document).on('click', ".group_box", function(e){
var nodeName = e.target.nodeName
//validation to ensure an input button was not pressed
if (nodeName != "INPUT"){
$.fancybox.close();
}
Any help greatly appreciated
I think you have two options :
1). Create a close button (with an <a> tag) and pass the $.fancybox.close() method directly into its href attribute like "
<a class="closeFancybox1" href="javascript:jQuery.fancybox.close()">close option 1</a>
This link can be added by your ajax call inside the #display div or you can append it to the fancybox content after show.
2). Create a close button using a unique selector and bind a click event to it to trigger the $.fancybox.close() method only until is visible inside fancybox
so having this html inside your fancybox content
<a class="closeFancybox2" href="javascript:;">close option 2</a>
bind a click event to it to trigger the $.fancybox.close() method using the afterShow callback like
afterShow: function () {
$(".fancybox-inner").on("click", ".closeFancybox2", function () {
$.fancybox.close();
});
}
Notice we still used .on() in its delegated form.
see JSFIDDLE using both options.

Trigger Modal from ajaxContent

I've got a live search on a webpage (CodeIgniter, jQuery and Bootstrap are being used).
Basically it works as this:
On input it triggers an AJAX-request
It makes a request to a file which returns a JSON-object
On successful request it parses the object
All content is parsed into table rows
One of the table cells contains a button.
The button should open a Modal window, by javascript.
Why by JS? Because it should first do another AJAX-request to fill the Modal content.
However, it doesn't work. It works on a button that is already on the page in the beginning. But I can't get the JS to be triggered on AJAX-content.
Ideally, I would like to see it trigger a .click() event, when the button is clicked.
Any suggestions?
The click event binds the event to dom elements which are already available.
If you dynamically add an element to your page, those will not have the events you had bind.
Instead you need to attach event handler to your button. You can do it via .on() function of jQuery.
$(document).on('click', '#newButtonID', function() {
// Your second ajax call goes here
});

JQuery - .click triggering when clicked anywhere should: upon clicking on a link

https://dl.dropboxusercontent.com/u/63617776/Capture.PNG
So as on the image, when you click on the map, a div is changed. Now when I click on a link in the div, I want the google maps div to change to another map.
But, the code I wrote either doesn't trigger at all or it triggers when I click anywhere on the page.
$('#nowydwor').ready(function(){
$(this).click(function(){
alert('foo');
});
});
Ofcourse the link looks like this:
{a id="nowydwor"} text {/a} (for some reason i couldn't enter < so I replaced it with {)
This triggers when user clicks anywhere on the page, for some reason. Also this is only a testcode for now, it is meant to display the alert. :) Any ideas?
EDIT: The link is contained in .html(), in a switch() statement.
case '#mazowieckie':
$('#info').html("CONTENT </h5><hr><strong><a id='nowydwor'>Skład Nowy Dwór Mazowiecki</a></strong> CONTENT");
break;
Calling ready only makes sense if you call it on the document/window to get notified as soon as the DOM is ready.
Try to bind the click handler on your DOM element directly:
$('#nowydwor').on('click', function(){
alert('foo');
});
I think what you were trying to do, is assign the click handler after the content of #info has changed. Unfortunately .ready() is only an event handler for the document ready event. It only fires once. Also changing the html of '#info' isn't triggering any events (IMHO).
You can work around this, using the .on-method on a parent element. Consider this html structure:
<div id="info">
<!-- This content is dynamically loaded -->
<a id="nowydwor">Click this to change map</a>
<!-- End of dynamic content -->
</div>
This makes it possible to call:
$('#info').on('click', '#nowydwor', function(){ /* Change map here... */ })
This assigns the event handler to #info, which is only called if the clicked element matches '#nowydwor'. Since '#info' is never removed, only the content changes, you don't have to apply it again.
The only point is, you have to determine what the id of the map/place is, because the event handler will be the same for all links.

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

Categories

Resources