Javascript not working on more loaded content - javascript

I have this script where it adds some effects on my items listed.
$(document).ready(function(){
$('.ui.card.work .image').dimmer({
on: 'hover'
});
$('.carouselCollaborators')
.popup({
boundary: '.ui.card.work',
});
})
However, when I click
= link_to_next_page #works, 'Load more...', params: params, :remote => true, id:'view_more', class: 'fluid ui basic button'
load more button coded above, javascript i mentioned above is not working on loaded items...
How could I fix this...?
Thank you for you time!

The problem is that you're calling the "effects" script only on document.ready you need to call it when you add an item as well.
These are the steps you should take:
First make a "wrapper" function that does the "effects"
function card_effects(){
$('.ui.card.work .image').dimmer({
on: 'hover'
});
$('.carouselCollaborators').popup({
boundary: '.ui.card.work',
});
}
Then call it where you want the "effects" to happen.
$(function(){ // jQuery document.ready shorthand
card_effects();
});
function that_adds_new_items(){
/***functions-code***/
card_effects();
}

Related

Reloading Select2 jQuery After AJAX Submission

I have a form that uses a Select2 multiple-selection field that is initialised like this:
jQuery(document).ready(function() {
jQuery('#cred_form_1283_1_1_select-children').select2({
dropdownParent: '#addChildModal',
multiple: 'true',
placeholder: 'Select Child(ren)'
});
});
This works perfectly:
After an ajax submission or validation the Select2 doesn't load back into the form:
After reading numerous posts about this, I still cannot get it to work. Example post:
https://stackoverflow.com/a/21664216
I know you're supposed to reload it with an on() event handler, which I have tried in numerous ways, like this:
jQuery(document).ready(function(){
jQuery('#cred_form_1283_1_1').on('change','#cred_form_1283_1_1_select-children', function(){
//alert('OK!');
jQuery(this).select2({
dropdownParent: '#addChildModal',
multiple: 'true',
placeholder: 'Select Child(ren)'
});
});
});
With the #cred_form_1283_1_1 being the form ID, I have also tried this with document and neither work.
The on() is working as the commented alert box will trigger when the Select2 is updated, but the Select2 itself will not reload at all.
Can someone please point out the error here.
Turns out the issue WAS related to the Toolset plugins. I found a hook called cred_form_ready in their code that isn't documented, but if you use that then whenever the form is ready it works.
jQuery(document).on( 'cred_form_ready', function($) {
jQuery('#cred_form_1283_1_1_select-children').select2({
dropdownParent: '#addChildModal',
multiple: 'true',
placeholder: 'Select Child(ren)'
});
});
This reloads the jQuery whenever any AJAX call is made and runs every time perfectly.

Calling ajax:beforeSend and ajax:complete on any link_to where remote is true ruby on rails

I'm working on a webapp using Ruby on Rails as framework. For all the partial renders, we used link_to with remote true as explained in this answer. However, I would like to bind the all those links to something equivalent to ajax:beforeSend and ajax:complete in order to implement a loader anytime a page is called in jQuery. So far I tried the following but it is not working :
$('a').on('ajax:beforeSend', function() {
alert("BEFORE");
});
$('a').bind('ajax:complete', function() {
alert("AFTER");
});
So if you have any other ideas it would be really appreciated if you could let me know. Thanks in advance.
EDIT: Here's an example of how I have been using link_to :
<%= link_to({action: "show_card", controller: "pages", id: activ.id, method: :get, :remote => true}, class: "nav-link p-0") %>
What is not working ajax or loader if your ajax is working then for loader it should be like this
<div id="mySpinner" style="displany:none;">
<img src="loader.gif">
</div>
$(function () {
$(document).ajaxStart(function() {
//$("#mySpinner").show();
alert("BEFORE");
}).ajaxStop(function() {
//$("#mySpinner").hide();
alert("AFTER");
});
});
How about to show loader on element onclick event and hide it on ajax:success?
$('a').on('click', function() {
alert("BEFORE");
});
$('a').ob('ajax:success', function() {
alert("AFTER");
});
Make sure to also cover ajax:error
You might also try to subscribe to ajax:send instead of ajax:beforeSend. Because ajax:beforeSend is a local event and can be subscribed to only within the Ajax request object as docs say
I found out what it was, when I render new staff partially, I need to rebind it to the event, and apparently even using
$( window ).load(function() {
$('a').on('ajax:beforeSend', function() {
alert("BEFORE");
});
$('a').bind('ajax:complete', function() {
alert("AFTER");
});
});
In the application.js file did not work, so basically to bind it initially I had to put a script tag at the bottom of my page which binds everything once it already rendered everything. Furthermore, anytime I do any remote partial rendering, I also need to rebind everything in the .js.erb file, that way it actually works. I'm there has to be a better way because this seems an awful solution; it is however, a solution for now.

fancybox undefined in afterShow click event

I have the following code that I call on page load:
$('#postcodes-link').fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
Now this works fine to open the fancybox (fiddle example), but when I click on the row, it doesn't close the fancybox and just throws the following error:
Uncaught TypeError: Cannot read property 'close' of undefined
yet if I make the above into a jQuery function:
(function ($) {
$.fn.setUp = function () {
return $(this).each(function () {
$(this).fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
});
};
})(jQuery);
and call the following in the same place as I called the top code
$('#postcodes-link').setUp();
The fancybox will now close (fiddle example). My question is why does the first one not work whereas the second one does, and how can I make the first one work? I figure it is something to do with the scope of fancybox but then I would have expected the second one not to work as it is wrapped inside a further function
Please note I have tried various version of trying to close the fancybox:
$.fn.fancybox.close()
jQuery.fancybox.close()
parent.$.fn.fancybox.close()
$('.fancybox-close').trigger('click') //tried this one as a dirty hack but didn't work either
Ok, so I found out what the problem was when trying to get the fiddle to replicate the error:
On the table page, I was using the jQuery data-table plugin so I included all the scripts need to load that. As I was ajax loading the page into the modal, it meant jQuery was being loaded for a second time on the current page. This caused the error I was seeing.
Removing the jquery script made the fancybox work as I wanted or another workaround (if you want the target page to still work if it is not opened in a modal - eg if you have other links to that page) then you will have to use a fancybox iframe instead of the fancybox ajax modal

ColorBox Onclose function not working

I am trying to open a new colorbox window when one is closed.
I'm using this code:
$(".inline").colorbox({
inline: true,
width: "50%",
escKey: false,
onClose: function() {
$('#newWindow').show();
}
If there anything wrong with this code?
Description
Assuming your using jack moore's colorbox jQuery plugin you have to change onClose to onClosed and use open:true.
And you always have to close the function.
Check out the jsFiddle Demonstration.
Sample
Html
<div class="firstColorBox">first</div>
<div class="secondColorBox">second</div>
jQuery
$(".firstColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
onClosed:function(){
// open the other colorBox
$(".secondColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
open:true
});
}
});
More Information
jsFiddle Demonstration
jack moore's colorbox jQuery plugin
Update
'onClose' should be 'onClosed'
See the reference here: http://jacklmoore.com/colorbox/
I recommend use the event handlers that come with colorbox:
$(document).one('cbox_closed', function () {
$(".secondColorBox").colorbox({...});
}
This will allow the javascript on the page to run. I was having issues running tags on the second popup and this solved the issue.
The function one will only trigger the event once so you can close the second popup.

jquery fancybox - prevent close on click outside of fancybox

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?
jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.
If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.
There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();
none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)
The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.
Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});
Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api
I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);
Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;

Categories

Resources