My knowledge of Jquery & Javascript is limited at best, but I'm under the impression JQuery is basically a simplified version of JavaScript.
If that is the case is there a way of converting this code to Javascript so I don't have to call the JQuery Library as it seems to be causing other JavaScript Functions to not work?
function toggleStatus(mynum) {
$('#product_'+mynum+'_submit_button').removeAttr('disabled');
}
This should work :)
var d = document.getElementById('product_'+mynum+'_submit_button');
d.removeAttribute('disabled');
jQuery is not a simplyfied version of javascript, but a javascript library that enables you to work rather effortlessly with the dom.
the code could be rewritten like that:
var e = document.getElementById('product_'+mynum+'_submit_button');
if( e ) e.removeAttribute('disabled');
The native version of that code would
set the disabled property on the element instead of messing with the attribute
use document.getElementById to select an element by id in lieu of jQuerys $("#id"):
var element = document.getElementById('product_' + mynum + '_submit_button');
element.disabled = false;
Also note that, for future reference, the native equivalent for jQuery's removeAttr is removeAttribute
Which other Javascript function's aren't working? jQuery is a Javascript framework to help you achieve Javascript tasks more easily, as well as create other functionality like animations.
If you're looking to simply convert what you have there into Javascript, you could do this:
function toggleStatus(mynum) {
document.getElementById('product_'+mynum+'_submit_button').removeAttribute('disabled');
}
I have a feeling like this could be the beginning of more Javascript and jQuery questions as you quest to learn more! Good luck! :)
Jquery is not simplified version of javascript. Think it as a library instead. The common functionalities which are needed for our development are simplified and organized in single library. For using that functionalities you have to read its API (Application Programming Interface) documentation. It will help you to write less code as compared to normal javascript code. I think, Jquery will not be the cause of problem in your code.
Any way for writing this code in pure javascript you can follow below code:
document.getElementById('buttonId').removeAttribute('disabled');
Related
I want to use the Javascript selector document.querySelector insted of $ or jQuery jQuery selector but I want to combine the Javascript selector with jQuery functions (like .getJSON(), .html(), .append() , etc.).
For example:
$.getJSON("list.json", function(data) {
document.querySelector("#content").html(data.name);
});
Here when I use the document.querySelector I get Uncaught TypeError: undefined is not a function and when I use $ I don't get any error.
jsFiddle Test
Is it possible to run jQuery and Javascript together?
Thanks!
Off couse yes! It is possible to run jQuery and JavaScript together in you application.
All you need to know is, which is a JavaScript Object when trying to run some methods of it. jQuery can be handy sometimes. But, yes! You can work with them together.
Secondly, remember that jQuery is a JavaScript's Library. It isn't anything other than JS. To be simple, jQuery needs JavaScript to run. JavaScript doesn't need jQuery to run.
From this MDN source, it is stated that you can use that method just the way it is.
document.querySelector(".someclass");
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
All you now need to make sure is of that, that class you're trying to access exists.
$.getJSON("list.json", function(data) {
$(document.querySelector("#content")).html(data.name);
});
PS:
But there isn't any sense to use it everywhere. Check the #afzaal-ahmad-zeeshan answer & read how to use native functional of DOM elements. jQuery isn't a panacea.
jslayer's answer gave me an idea, which seems to work.
Wrapping js code in $() seems to work (though I'm not sure why).
For example, to use slideToggle() (which is only available in jQuery, I think), doing
event.target.nextElementSibling.slideToggle()
does not work, but
$(event.target.nextElementSibling).slideToggle()
does.
I used this javascript compressor and checked "Base62 Encode". I noticed that the very first thing it does is enclose everything in an eval() function (which makes sense) but I really want to avoid using it. Is there any alternative?? Like an immediately invoked function expression?
Edit:
I want to compress my code because there's a ton of conditional ifs for feature detection. (The reason I'm not using Modernizr is because I
don't want to load a whole library for just what I'm doing), and the ifs are ugly. (Plus I'm new to javascript and I'd rather learn javascript
than learn Modernizr).
You can replace eval(...) with new Function(...)() like so:
new Function(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2(a.6){3.4("5")[0].1+=" 6"}2(b.7){3.4("5")[0].1+=" 7"}2(8.9){3.4("5")[0].1+=" 9"}2(8.c){3.4("5")[0].1+=" d"}',14,14,'|className|if|document|getElementsByTagName|html|opacity|touch|html5|webworkers|css3|has|audio|html5audio'.split('|'),0,{}))()
It's not really much of an improvement but it avoids using eval.
On first inspection, Closure Compile doesn't wrap your code in an eval() call. Here's a tutorial on using the GUI version.
I am currently working on an old project with ton of legacy code.
A syntax I have never met is used to access a specific id in the dom in javascript.
Instead of using document.getElementById("btnsubmit"), $('btnsubmit') is used.
I have never met this syntax. Moreover it seems that firebug doesn't like it either as it seems to break the debugger. I have issues where the code doesn't seem to be executed in a debugging environment although this code is used on a production site and seems to work.
Does any one have a reference on this syntax? Where does it comes from, is it deprecated?
It's from a javascript library, and in general it's more modern than getElementById. You need the script include though.
Your example looks like Prototype
$ is just a regular character in javascript and it is often used by javascript libraries and defined to be a function name so that $() is just a function call. In some cases, $ might be defined to be a synonym for document.getElementById() as shorthand to save typing and in other cases, it's a more robust CSS3 style selector engine (as in the jQuery library).
In either case, if its undefined in your code, then you are probably missing a library reference that your code relies on. You will need to find out what library your code was written to use and make sure that library is included in the code before this spot so that the $() function is defined properly.
I wish to use knockout.js, but unfortunately I cannot use jquery-tmpl due to the prequisite of jquery 1.4.2, which (I won't go into it here) we cannot upgrade to.
Has anyone got any tips on getting started using Mustache templates with knockout? I've been finding it tricky to find any information regarding it.
Update I've released initial version of template engine for knockout js that is using mustache as a template library. You can check it out at https://github.com/WTK/ko.mustache.js
Have you seen this part of documentation http://knockoutjs.com/documentation/template-binding.html ? Especially take a closer look at the Note 8 which points you to check the jqueryTmplTemplateEngine.js in the knockout source code (to spare you the effort of searching, its this one: https://github.com/SteveSanderson/knockout/blob/master/src/templating/jquery.tmpl/jqueryTmplTemplateEngine.js).
I just took a glance at source of that file, but everything seems to be quite simple. You have to define couple of callback functions that are (I assume) called by knockout js when needed.
Those functions include:
function renderTemplateSource(templateSource, bindingContext, options) {}
function createJavaScriptEvaluatorBlock(script) {}
function addTemplate(templateName, templateMarkup) {}
Check what those functions return when using jquery.tmpl and try to mimic their behavior whilst using moustache instead.
I'm looking for a javascript version of PHP's html_entity_decode. I found this:
function html_entity_decode(str){
var tarea=document.createElement('textarea');
tarea.innerHTML = str; return tarea.value;
tarea.parentNode.removeChild(tarea);
}
However, I can't use this because I need to write this code for an FBML/FBJS Facebook canvas app, and they have disabled innerHTML and anything similar (insanity, I know).
Is there any other way to do this that doesn't resort to sticking the string into an element and pulling it back out again? Please make sure to only use functions that would be allowed in FBJS
I guess you'll have to do it manually. A quick Google search brought up this library that does what you want.