Develop Reference

Jquery .change() event fires only once

So I'm fairly novice with jquery and js, so I apologise if this is a stupid error but after researching I can't figure it out.
So I have a list of data loaded initially in a template, one part of which is a dropdown box that lets you filter the data. My issue is that the filtering only works once? As in, the .change function inside $(document).ready() only fires the once.
There are two ways to reload the data, either click the logo and reload it all, or use the search bar. Doing either of these at any time also means the .change function never fires again. Not until you refresh the page.
var list_template, article_template, modal_template;
var current_article = list.heroes[0];
function showTemplate(template, data)
{
var html = template(data);
$("#content").html(html);
}
$(document).ready(function()
{
var source = $("#list-template").html();
list_template = Handlebars.compile(source);
source = $("#article-template").html();
article_template = Handlebars.compile(source);
source = $("#modal-template").html();
modal_template = Handlebars.compile(source);
showTemplate(list_template,list);
$(".articleButton").click(function()
{
var index = $(this).data("id");
current_article = list.heroes[index];
showTemplate(article_template,current_article);
$('.poseThumb').click(displayModal);
});
$("#classFilter").change(function()
{
console.log("WOW!");
var classToFilter = this.value;
var filteredData =
{
heroes: list.heroes.filter(function(d)
{
if (d.heroClass.search(classToFilter) > -1)
{
return true;
}
return false;
})
};
console.log(filteredData);
showTemplate(list_template,filteredData);
$(".articleButton").click(function()
{
var index = $(this).data("id");
current_article = filteredData.heroes[index];
showTemplate(article_template,current_article);
$('.poseThumb').click(displayModal);
});
});
$("#searchbox").keypress(function (e)
{
if(e.which == 13)
{
var rawSearchText = $('#searchbox').val();
var search_text = rawSearchText.toLowerCase();
var filteredData =
{
heroes: list.heroes.filter(function(d)
{
if (d.name.search(search_text) > -1)
{
return true;
}
return false;
})
};
console.log(filteredData);
showTemplate(list_template,filteredData);
$(".articleButton").click(function()
{
var index = $(this).data("id");
current_article = filteredData.heroes[index];
showTemplate(article_template,current_article);
$('.poseThumb').click(displayModal);
});
}
});
$("#logo").click(function()
{
showTemplate(list_template,list);
$(".articleButton").click(function()
{
var index = $(this).data("id");
current_article = list.heroes[index];
showTemplate(article_template,current_article);
$('.poseThumb').click(displayModal);
});
});
//$("#logo").click();
});
function displayModal(event)
{
var imageNumber = $(this).data("id");
console.log(imageNumber);
var html = modal_template(current_article.article[0].vicPose[imageNumber]);
$('#modal-container').html(html);
$("#imageModal").modal('show');
}
I should note two things: first, that the search bar works perfectly, and the anonymous function inside both of them is nearly identical, and like I said, the filtering works perfectly if you try it after the initial load. The second is that the same problem occurs replacing .change(anonymous function) with .on("change",anonymous function)
Any help or advice would be greatly appreciated. Thanks.

I agree with Fernando Urban's answer, but it doesn't actually explain what's going on.
You've created a handler attached to an HTML element (id="classFilter") which causes part of the HTML to be rewritten. I suspect that the handler overwrites the HTML which contains the element with the handler on it. So after this the user is clicking on a new HTML element, which looks like the old one but doesn't have a handler.
There are two ways round this. You could add code inside the handler which adds the handler to the new element which has just been created. In this case, that would mean making the handler a named function which refers to itself. Or (the easier way) you could do what Fernando did. If you do this, the event handler is attached to the body, but it only responds to clicks on the #classFilter element inside the body. In other words, when the user clicks anywhere on the body, jQuery checks whether the click happened on a body #classFilter element. This way, it doesn't matter whether the #classFilter existed when the handler was set. See "Direct and delegated events" in jQuery docs for .on method.

Try to use some reference like 'body' in the event listeners inside your DOM like:
$('body').on('click','.articleButton', function() {
//Do your stuff...
})
$('body').on('click','#classFilter', function() {
//Do your stuff...
})
$('body').on('keypress','#searchbox', function() {
//Do your stuff...
})
$('body').on('click','#logo', function() {
//Do your stuff...
})
This will work that you can fire it more than once.

Add or Delete jQuery sortable element and remember order

I'm implementing something similar to this in one of my Wordpress metabox. User should be able to add and remove jquery-ui sortable elements and remember the position(order) of the elements exists.
I already know how to remember the position(order) when the elements are resorted by dragging and dropping.
jQuery(document).ready(function () {
jQuery('ul').sortable({
stop: function (event, ui) {
var data = jQuery(this).sortable('toArray');
jQuery('#elements-order').val(data);
}
});
});
This will output an array which contains the order like 1,2,3,5,4 But, when new elements are added or elements are deleted, how to make this code run to remember the order of the new elements.
This is the code I use to Add elements
jQuery(document).ready(function () {;
var wrapperSize = jQuery("#element-area-top").width();
(function () {
jQuery(".add-element").on("click", ".add-item", function () {
var start = jQuery("#sortable"),
selectBoxVal = jQuery("#element-list").val();
var element = null;
element = ('<li></li>');
var newRow = jQuery(element);
jQuery(start).append(newRow);
jQuery("#elements-order").val(jQuery('#elements-order').val() + i+',');
});
})();
This is the code I use to delete elements
jQuery("#sortable").on("click", ".delete", function () {
jQuery(this).parents(/*someelement*/).remove();
});
So, could anyone know how to do this ?

You can get sort order with same logic in add/delete functions as well (just replace this with '#ul').
var data = jQuery('#ul').sortable('toArray');
jQuery("#elements-order").val(data);
Or even better, put above code in a common function and just call common function. Here is updated fiddle demonstrating same.

Result not match for text area (jQuery)

I have a question which concerns jquery.urlive plugin. This plugin is used to graph content from other website and generate to HTML element, so I use it to
develop my personal project. I have a problem which I don't know how to solve, should I customize the library or are there solutions?
I would like to duplicate text area more than 2 (let's say I have done with duplication), but they are the same functions, which means when there is url in the text area one and then the result will appear for result one and others are the same.
Obviously my problem when there was url on text are one, all the results for other text are also shown.
Here is my code: http://jsfiddle.net/samphors/4KftC/77/
Thanks for helping.

You need to call the urllive only for the changed element
$('.demo').on('input propertychange', function () {
var $this = $(this),
$ct = $this.next();
$this.urlive({
container: $ct,
callbacks: {
onStart: function () {
$ct.html('<span class="loading">Loading...</span>');
},
onSuccess: function (data) {},
noData: function () {
console.log('y')
$ct.html('');
}
}
});
}).trigger('input');
Demo: Fiddle

if(f.match(urlPattern) && d == true){
var o = f.match(urlPattern), link = o[0];
$(".frame").attr("src",link);
d = false;
}
try this
http://jsfiddle.net/4KftC/79/

How to determine if content in popup window is loaded

I need to set some contextData for a popup window from its parent. I try this:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.contextData = contextData
//w.context data is null in the popup after the page loads - seems to get overwritten/deleted
});
});
It doesn't work, so my next thought, wait until content is loaded
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.onload = function() {
//Never Fires
w.contextData = contextData;
}
});
});
See this fiddle. My onload method never fires.
This works:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
setTimeout(function(){
if(w.someVariableSetByThePageBeingLoaded) {
w.contextData = contextData;
}
else{
setTimeout(arguments.callee, 1);
}
}, 1);
});
});
But has obvious elegance problems (but is the current work around).
I know you can go the other way (have the popup call back to a method on the opener/parent, but this forces me to maintain some way of looking up context (and I have to pass the key to the context to the popup in the query string). The current method lets me capture the context in a closure, making my popup a much more reusable piece of code.
I am not trying to do this cross domain - both the parent and popup are in the same domain, although the parent is an iframe (hard to test with jsfiddle).
Suggestions?

If you are doing this with an iframe try it this way
HTML
<button id="clickme">Click Me</button>
<iframe id="framer"></iframe>
​
Javascript
$(function() {
$('#clickme').click(function() {
$("#framer").attr("src","http://jsfiddle.net");
$("#framer")[0].onload = function(){
alert('loaded');
};
});
});​
I updated your jsfiddle http://jsfiddle.net/HNvn3/2/
EDIT
Since the above is completely wrong this might point you in the right direction but it needs to be tried in the real environment to see if it works.
The global variable frames should be set and if you
window.open("http://jsfiddle.net","child_window");
frames["child_window"] might refer to the other window
I got javascript access errors when trying it in jsfiddle - so this might be the right track
EDIT2
Trying out on my local dev box I was able to make this work
var w = window.open("http://localhost");
w.window.onload = function(){
alert("here");
};
the alert() happened in the parent window

Change GallerificPlus effect

I'm searching how to combining galleriffic and lightbox jquery plugin until I found GallerifficPlus (I have downloaded it here).
Is it possible (once deleted the slideshows) to call the lightbox by clicking on the thumbs? I want the lightbox function work after clicking the thumbnail..
Here's the code for the thumbnail part
buildDataFromThumbs: function() {
this.data = [];
var gallery = this;
this.$thumbsContainer.find('li').each(function(i) {
var $a = $(this).find('a');
var $img = $a.find('img:first');
gallery.data.push({slide:$a.attr('href'),thumb:$img.attr('src'),original:$a.attr('original'),title:$a.attr('title'),description:$a.attr('description'),hash:gallery.offset+i});
});
return this;
},
for the original display message
buildImage: function(image) {
if (this.$imageContainer) {
this.$imageContainer.empty();
var gallery = this;
var thisImageIndex = this.currentIndex;
// Setup image
this.$imageContainer
//.append('<span class="image-wrapper"><a class="advance-link" rel="history" href="#'+this.data[this.getNextIndex(this.currentIndex)].hash+'" title="'+image.alt+'"></a></span>')
.append('<span class="image-wrapper"><a class="advance-link" rel="history" title="'+image.alt+'"></a></span>')
.find('a')
.append(image)
//.click(function() { clickHandler(gallery); })
.click(function() { buildLightBox(image,gallery,thisImageIndex); })
.end()
.fadeIn('fast');
if (this.onFadeIn) this.onFadeIn();
}
Also, are there any other jquery plugin you can suggest that has similar function?

not sure if this could help but did you try prettyPhoto plugin. i think it works the way you want.