We Keep Coding

jQuery gallery not triggering after Ajax

I am using a jQuery pop-up script Magnific Popup. It works well in a WooCommerce store but when I filter products using an Ajax Filter Plugin (YITH) it stops triggering. I understand this is because Ajax has changed the page and so the event is no longer bound to the link class in the page but not sure how to solve it.
From what I have read I can use on but I am unsure how this applies to the way I am triggering the Magnific Popup script which is below.
jQuery('.product').magnificPopup({
type:'inline',
midClick: true,
gallery:{
enabled:false
},
delegate: 'a.wpb_wl_preview',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: false,
});

Thank you all. I have found there is a jQuery function to detect when Ajax has been executed which is below. Not sure if this is the best method, so interested to see other answers but this works.
jQuery(document).ajaxSuccess(function() {
//code to trigger here
});

Javascript function requiring two clicks

javascript is completely new to me. I am a relatively inexperienced rails developer. I have implemented something in a rails 3 app called joyride, which is a jquery plugin and pops messages up for users giving them a "tour of the page". This is the script that runs the tour nicely when the page is loaded
:javascript
$(window).load(function() {
$('#joyRideTipContent').joyride({
modal:true,
expose: true
});
});
That works perfectly. My problem is that I need it to run when a button is clicked rather than on loading of the page.
So I started with a simple button on the HAML page
%button#myBtn
Lauch tour
That gives me my button. Then I wrote a function (forgive me its my first) to fire the code when the button is pushed.
:javascript
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function(event) {
$("#joyRideTipContent").joyride({
modal:true,
expose: true
});
});
This is where it gets strange. The code works - on the SECOND click. Clearly something is being passed in the first time, and then executed the second time, but I am way out of my depth, can anyone help!
thanks
EDIT:
changed the code to this on advice, but same problem exists...
$(function() {
$("#myBtn").click( function()
{
$("#joyRideTipContent").joyride({
modal:true,
expose: true
});
}
);
});
EDIT: added a jsfiddle for anyone with time to have a look at http://jsfiddle.net/garethburrows/beonc06z/

Try
$('#myBtn').on('click', function(event) {
$("#joyRideTipContent").joyride({
modal:true,
expose: true,
autoStart: true
});
});
you're mixing jquery and classic js - not good.

Is there a way to prevent TinyMCE from auto focusing on page load?

I've got a number of input fields on my form one of which is using TinyMCE (version 3.5.2). Once TinyMCE loads it sets focus to itself. How can I prevent this from happening? I would like to keep the first input selected by default.
This is what my code looks like right now
var tinymce = $('#Content');
tinymce.tinymce({
theme: "advanced",
plugins: "...",
theme_advanced_buttons1: "...",
theme_advanced_buttons2: "...",
theme_advanced_buttons3: "...",
theme_advanced_buttons4: "...",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
content_css: [...],
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
Update:
After some more testing it looks like this issue is only in IE9. Chrome, FireFox, Opera & Safari do not set focus to the editor on page load. IE9 in IE7 and IE8 mode does not set focus on page load either but IE9 itself will set focus to the editor even when you try to set focus to another input.
This all changes once you load the page with a value in the textarea though. When you do that IE9 works like the other browsers. For now I'm loading the page with a single space in the textarea and that's making IE9 work correctly.

Would help to have the remaining of your inputs and form structure to know the better approach, but something along this lines should help:
jQUERY
function myCustomOnInit() {
$('form *:input[type!=hidden]:first').focus();
}
tinyMCE.init({
...
oninit : myCustomOnInit
});
From the Documentation:
This option enables you to specify a function to be executed when all editor instances have finished their initialization. This is much like the onload event of an HTML page.
Note: You can also pass the function name as a string. But in this case, the function has to be declared in the global scope of the page.
The trick here is to set the focus for the first visible input:
$('form *:input[type!=hidden]:first').focus();
See this working example!
EDITED
Took me quite some time to test this and get it working for IE9, but here it is:
See this Working Solution!
jQuery
setup : function(ed) {
ed.onLoadContent.add(function(ed, o) {
var controlLoad = setTimeout(function() {
if ($('.mceIframeContainer').size()==1) {
$('form *:input[type!=hidden]:first').focus();
clearTimeout(controlLoad);
}
}, 100);
});
}
What this is doing is to run a timeout until the class .mceIframeContainer is found, meaning that the loading is done. After finding it, sets the focus for the first input element and the timeout is cleared.

setup: function(ed){
ed.on('postRender', function (editor, cm) { editor.preventDefault(); });
}
if you execute a single command inside the function it ignores the preventDefault and keeps focusing and scrolling!!!! :D

jQuery event not firing until second click?

I have the following jQuery code. The first time I click a link, nothing happens; however, upon clicking the link the second time, the expected action occurs.
$("a[rel]").bind("click", function(){
$(".close_button_change_password").attr('id','change_password_'+$(this).attr('id'));
$(this).overlay({
// disable this for modal dialog-type of overlays
closeOnClick: true,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.8
}
});
});
Here's my HTML:
change password
Does anyone know how I might go about fixing this problem? Thanks in advance for any assistance.

Try
$("a[rel]").live("click", function(){ ....
or you could try.., but I dont think this would solve it.
$("a[rel]").live("change", function(){ ....
And make sure its in DOM ready.
You could try and prevent the default action, maybe this is interfering with your first click.
$("a[rel]").bind("click", function(event){
event.preventDefault(); // <---------^^
$(".close_button_change_password").attr('id','change_password_'+$(this).attr('id'));
$(this).overlay({
// disable this for modal dialog-type of overlays
closeOnClick: true,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.8
}
});
});

First of all, embed your code with $(document).ready({}) statement. It makes sure you'r dom will be affected with code only after all html syntax is parsed by browser.

Try
$("a[rel]").click(function(){alert($(this).attr("id"));});
to see if there is something wrong with your HTML code. then you can add other statement in order to debug your js code

From : http://flowplayer.org/tools/overlay/index.html
// select one or more elements to be overlay triggers
Setting the overlay to the click attribute of HTML might be redundant. Based on the above, I would assume that the overlay is already activated on click.

Jquery Fancybox not working after postback

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee

The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info

Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?

It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee

This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );

I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>