Develop Reference

getElementById returns null? (with Vue)

So I tried to find the answer, but no success.
window.onload = function() {
console.log(document.getElementById('#sell'));
if(document.getElementById('#sell')){
alert('jo');
//Init for Vue
}
}
It works with jQuery but not with vanilla JS why?
console.log(document.getElementById('#sell'));
Result returns NULL.
jQuery example:
if ( $( "#sell" ).length ) {
const app = new Vue({
el: '#sell',
components: { sellPicture }
});
}
In my sell.blade.php it looks like that
...
<div id="sell">
<sell-picture></sell-picture>
</div>
....
My script is added before /body
Just a side question. I need jQuery for Bootstrap, is it bad to use it also in Vue if I don't change the DOM with it?

Remove # from the id param like below
window.onload = function() {
console.log(document.getElementById('sell'));
if(document.getElementById('sell')){
alert('jo');
//Init for Vue
}
}

document.getElementById('#sell') does not require a # to identify Ids. That is the syntax you would use in a jQuery selector, but a DOM selector will literally take the string and match it against the ID attribute value. The same goes for document.getElementByClassName(), where you would not need a . to identify the class.
The Mozilla MDN documentation gives an example of this here.
This should work:
window.onload = function() {
console.log(document.getElementById('sell'));
if(document.getElementById('sell')){
alert('jo');
//Init for Vue
}
}

Please try to use
$(document).ready(function(){ console.log($("#sell")); });

Module pattern, jquery callback issue;

Sorry for the pseudo code, but I can't post the original code here(company policy).
I have two "classes" in javascript, the class CLS2 I use to populate a DIV with HTML which come from the server (Actually it's a table). I am using the method LOAD in jquery for this.
The class CLS1 calls the CLS2 to load the HTML table and after trying to get some infos from the table with jquery method FIND.
I know what is happening. When I try to get these infos inside the table I am not able to do this, because the HTML table is not ready yet.
But if I am using the jquery method WHEN, I guessed, I should be able to do this. But it is not working so far.
If I use the callback on the jquery LOAD method everything works fine, but when I am using WHEN it is not waiting the HTML table to get ready.
Am I forgetting any thing?
I have a return from the jquery LOAD method. Is it possible to check in this return if the content is ready? console.log(retParam);
CLS2:
var cls2 = (function ($) {
return {
load: function() {
return this.populateDiv();
},
populateDiv: function() {
var ret = $('#content').load('url', function(){
// IF I USE THE JQUERY METHOD FIND HERE WORKS FINE
});
return ret;
}
};
}(jQuery));
CLS1:
var cls1 = (function ($) {
return {
init: function(){
this.config();
},
config: function() {
$.when(cls2.load()).then(this.doPagination());
},
doPagination: function(retParam) {
console.log(retParam);
var val = $('#datatable').find('.tdActive').val();
}
};
}(jQuery));
JQUERY Ready
$(document).ready(){
cls1.init();
}

load returns jQuery, not a promise. if you replace .load() with .get() instead, since .get() returns a promise (actually a jqXhr) that you can do .when on.
something like
var ret = $.get( "url", function( data ) {
$( '#content' ).html( data );
});
return ret;

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?