Develop Reference

How to properly use appendChild

$(document).ready(function() {
$("a:last").on("click", function(event) {
event.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
var newDiv = document.createElement("div");
$(newDiv).addClass("content");
$(newDiv).addClass(page);
$(newDiv).load(url);
document.getElementById("main").appendChild($(newDiv));
});
});
I want to create a new div and load some content into it, then append it to the "main" div, but I get a TypeError:
Argument 1 of Node.appendChild does not implement interface Node.
I already have a div with id="main", why can't I append my new div to it?

Basically appendChild() expects a node object as its parameter, but here you are passing a jquery object. You can fix it by passing a node object,
document.getElementById("main").appendChild(newDiv);
And since you are using jquery, you can use its own append() function,
$(document).ready(function() {
$("a:last").on("click", function(event) {
event.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
var newDiv = $("<div>");
newDiv.addClass("content");
newDiv.addClass(page);
newDiv.load(url);
$("#main").append(newDiv);
});
});

The issue is because you're mixing up jQuery and plain old JS. The error itself is because you're proving a jQuery object to appendChild() when it's expecting a DOMElement. As you're using jQuery anyway you may as well use that to create your elements. Try this:
$("a:last").on("click", function(e) {
e.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
$('<div />').addClass('content ' + page).appendTo('#main').load(url);
});

$(newDiv) is a jquery object, not the node. You need to pass the node in. This will work
$(document).ready(function() {
$("a:last").on("click", function(event) {
event.preventDefault();
var url = $("a:last").attr("href");
var page = url.slice(-2).trim();
var newDiv = document.createElement("div");
$(newDiv).addClass("content");
$(newDiv).addClass(page);
$(newDiv).load(url);
document.getElementById("main").appendChild(newDiv);
});
});

Jquery not firing inside handlebars template

I have Javascript directory search that uses jquery and jquery UI code that works on it's own page but as soon as I use the handlebars templates, the on submit function isn't registering or firing anything:
$(".navbar-form").submit(function () {
var a = $("#searchFullName").val();
var currentTab = '';
$('li.active').each(function(index) {
currentTab = $(this).find('a').html();
});
getFirstAndLastName(a);
if(currentTab == 'Student')
callStudentWebService();
if(currentTab == 'Faculty/Staff')
callStaffWebService();
$('#searchFullName').blur();
return false;
});
HTML and JS pasted here:
http://jsfiddle.net/5Cr9s/
Is it possible to reload the Javascript file(s) when a template changes in handlebars? I'm really stuck here.

Thanks so much charlietfl!
$( "body" ).delegate( "form", "submit", function() {
...
This worked like a charm!

This worked in my case where I use select with event delegation
$("body").delegate('select[name="carType"]', 'change',function () {
var selectedOption = $("option:selected", this);
var val = this.value;
});

jquery .live to .on in jquery upgrade

I'm upgrading the jQuery on my website to jQuery v1.10.1 from 1.4.2 .
I'm changing all the .live functions to .on.
Now i'm having trouble with changing one of them.
function tb_init(domChunk){
$(domChunk).live('click', function(){
var t = this.title || this.name || null;
var c = $(this).parent().parent().find('.quotation').html();
var a = this.href || this.alt;
var g = this.rel || false;
var o = $(this);
tb_show2(t,c,a,g,o);
this.blur();
return false;
});
}
I tried changing it to:
$(document).on("click", domChunk, function() {
and:
$(document).on("click", $(domChunk), function() {
But both don't seem to work. domChunk itself is a selector like this: "#myid li"
The error I get is: Uncaught TypeError: Object # has no method 'blur'
Thanks

this is a reference to the DOM object and not to the jQuery object.
Try this instead:
$(this).blur();
or:
$(this).trigger('blur');
or in your code use o instead of $(this)

I could be wrong, but have you tried using $(this).blur() instead of this.blur? Since it is a jQuery function...
edit: sorry I hadn't refreshed the page before answering

Unexpected jQuery syntax error by chaining a plug-in after .find()

I've baked a plug-in to handle runtime searches on input fields I'm using all over a big site.The plug-in works perfect in every situation but this http://jsfiddle.net/tonino/v8d2A/
$(document).ready(function () {
var callback_methods = { /* methods here */ };
var input_html = '<div class="search"><input name="search-field" value="Search..."></div>';
$(document).on('click', 'div.add', function (event) {
if (!$('li div.add + div').hasClass('search')) {
var input = $(this).after(input_html).parent().find('input');
input.focus();
input.hunter({url:'<?php echo $this->request->base; ?>/searches', callback:callback_methods, var_name:'data[Search][term]'});
// other code after
}
});
});​
If I comment the hunter plug-in everything works fine.
I'm sure is some concept on how it must be structured, here is the code: jquery.hunter.1.3.js
Why my plug-in make this error in this situation, where I'm wrong on writing it?

the problem is this part of your code:
var selector = this.selector;
var def_css = {backgroundPosition:'-16px center', paddingLeft:$(selector).css('padding-left')}
if (settings.loader) { setStyle(def_css); }
var selector = this.selector;
and later:
$(this.selector).blur(function () {
first of all your code wont work when the if-condition is fulfilled, because you are trying to redeclare the variable 'selector' inside the if block. just leave the var-statement out there:
if (settings.loader) { setStyle(def_css); }
selector = this.selector;
but YOUR MAIN-problem is that 'this.selector' contains '.parent() input' which i doubt is a valid jQuery selector.
why are you doing that? why dont you just use $(this) save it into a variable and use this???
eg:
// first line in your plugin
$this = $(this)
// later you could use the $this var
$this.blur(function () {

To get rid of the error change this line:
var input = $(this).after(input_html).parent().find('input');
To the following:
var input = $(input_html).insertAfter($(this));
The core problem though is that the jquery.hunter plugin is using the this.selector variable for some reason - you don't need this - the plugin should use $(this) instead of $(this.selector)

Question about cache in javascript/jquery

I wonder if selector "$cacheA" will be cached on page load in the example below?
// MY JQUERY FUNCTION/PLUGIN
(function( $ ){
$.fn.myFunction = function() {
var $cacheA = this,
$cacheB = $cacheA.children(),
$cacheC = $cacheB.eq(0);
$cacheD = $cacheA.parent();
$cacheD.click(function(){
$cacheA.toggle();
$cacheB.fadeIn();
$cacheC.slideUp();
});
};
})( jQuery );
// END JQUERY FUNCTION/PLUGIN
$(window).load(function(){
$('#mySelector').myFunction();
});
Would it be any reason to do this:
$(window).load(function(){
var $mySelector = $('#mySelector');
$mySelector.myFunction();
});

If, inside your "load" handler, you were to do many jQuery operations with "$mySelector", then saving that in a variable would be a good idea. However, in your example, you only use the value once, so it really makes no difference at all.

Firstable, $cacheA and others inside click function will be undefined.
$cacheD.click(function(){
$cacheA.toggle();
$cacheB.fadeIn();
$cacheC.slideUp();
});
Second,
$.fn.myFunction = function() {
var $cacheA = this,
$cacheB = $cacheA.children(),
$cacheC = $cacheB.eq(0);
$cacheD = $cacheA.parent();
}
So, after $('selector').myFunction() how can I use $cacheB, $cacheC and $cacheD? Where they are will store?