Say, I have JSON data getting from API. I want to use a value of JSON key to call a user-defined jquery function.
The data I am getting from the server is :
{
"question":"What is your age?",
"graphType":"horizontalBar",
}
Now I am having a function in my script which is named as horizontalBar.
( function( $ ){
$.fn.horizontalBar = function(data){
//do some stuff
}
})( jQuery );
So, now I want something like this in order to call the function:
$().json.graphType(data);
Here is what I searched and tried to call it:
window[json.graphType](data);
What about:
$(<selector of target object>)[json.graphType](data);
This will apply the jquery-method named in json.graphType on the selected jQuery target object.
From your post I now guess, that you don't even have a selector. So, <selector of target object> is void:
$()[json.graphType](data);
Related
I'm sending a GET request with jQuery
$.get("/index.html", /*Adding '?update' to the request*/ "update",
function (data) {/* Enter code here */}, "html");
where data is my server's response. I'm sending back a simple script like alert() so the 'data' variable equals <script> alert("Hello world!") </script>.
I need a way to automatically execute the script. I could just .append(data) to an element but I'm having multiple appends so that isn't really practical.
What is the easiest and the most practical way of executing the script?
Either .append it, like you said, or use eval(data), but then you'd have to get rid of the <script></script>. You can supply eval() a piece of Javascript code and it will execute that.
Please be aware that using eval should be avoided at all costs.
I did some crazy stuff in a case like this but you may think it is extreme. In my case I had to store some functions in localStorage and execute them by history state ( when user goes back/forth ). I have created a json object similar to
{obj:'myObject', fn: 'myfn', args: myArgs}
then stored this data base64 encoded. then when I need it back, I simply decoded content and
window.[data.fn].[data.obj].apply(null,data.args)`
did the trick without exposing too much data and not using eval. Eval comes from Evil so I would stay away. =)
UPDATE
So in my case all main core functions are json objects at window namespace similar to ( not actual content but an sample)
Member = {
initialize: function (){
//some process
},
render:function(memberId, selector){
//Some process
},
//...etc }
So when I store each item it, I used something similar to
var data = {obj: 'Member', fn: 'render', args: [1,'#member-block']}
then encoded version will be
localStorage.setItem('data', btoa(JSON.stringify(data)));
dmFyIGRhdGEgPSB7b2JqOiAnTWVtYmVyJywgZm46ICdyZW5kZXInLCBhcmdzOiB7bWVtYmVySWQ6MSwgc2VsZWN0b3I6ICcjbWVtYmVyLWJsb2NrJ319
Then when I need to call back
var data = JSON.parse(atob(localStorage.getItem('data'));
would return my original data object. Since the main functions in my case are in window namespace.
if (typeof window[data.obj]!=='undefined') { // same as window.Member
if (typeof window[data.obj][data.fn]!=='undefined' && typeof window[data.obj][data.fn]!=='function' ) { // make sure fn is defined and is a function
window[data.obj][data.fn].apply(null, data.args);
// we pass same arguments to function call with apply.
// `apply` will give us option to add arguments dynamically without knowing its size.
// it can be null any number of arguments that needed for that function.
}
}
I've been at this for an hour and I need help. This is kind of baffling me. Consider this explicit setup of an object in my code:
WORKING CASE:
var terms={};
terms[0]={};
terms[1]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
terms[2]={"label":"crayon","cell_src":"images/crayon.jpg","clue_type":"audio","clue_src":"/audio/car.wav"};
terms[3]={"label":"pen","cell_src":"images/pen.jpg","clue_type":"audio","clue_src":"/audio/car.wav"};
terms[4]={"label":"pencil","cell_src":"images/pencil.jpg","clue_src":"/audio/boat.wav"};
terms[5]={"label":"pencil_case","cell_src":"images/pencil_case.jpg","clue_src":"/audio/train.wav"};
terms[6]={"label":"rubber","cell_src":"images/rubber.jpg","clue_src":"/audio/taxi.wav"};
terms[7]={"label":"ruler","cell_src":"images/ruler.jpg","clue_src":"/audio/plane.wav"};
terms[8]={"label":"sharpener","cell_src":"images/sharpener.jpg","clue_src":"/audio/taxi.wav"};
window.terms= terms;
window.terms= terms; // for using globaly
if I do a console.log(window.terms[1]); I get "bag". Thats what I want.
NOT WORKING CASE
If instead of explicitly defining the values of term{}, I read in the contents from a json file and assign them to each enumerated index like this:
var terms={};
terms[0]={};
$.getJSON('content.json', function(data){
$.each(data,function(i){
//terms[i]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
terms[i+1]={"label":data[i].headword,"cell_src":data[i].image,"clue_type":"audio","clue_src":data[i].audio};
});
window.terms=terms;
});
if I do a console.log(window.terms[1]); I get an error "Uncaught TypeError: Cannot read property '1' of undefined" Note that I have an alternate attempt commented out where I eliminate the possibility that theres something weird going on with the values I am trying to pull in and I explicitly assign the same static value to all the indexes. That produces the same error.
Any ideas how this could be??
$.getJSON does not block when performing an AJAX call. You have to keep the callback chain a live.
I think you want to define terms as an array of objects. Currently you have it defined as an object with properties 1, 2, 3, etc. Syntax like var terms = {} means terms is an object and when you assign terms[1] = {"label": "bag"} you're saying "the property named 1 of object terms is {"label": "bag"}. Just change your terms declaration to this:
var terms = [];
Also, if you want to see the label property of one of the objects the log statement would looks like this:
console.log(terms[2].label);
The $.getJSON() function is just a shorthand for a call to $.ajax() to load a JSON file. Since the AJAX call is asynchronous, the execution of $.getJSON() completes, and any code after it is executed, before the data has been loaded and stored in your variable.
If you want to work with terms do so inside the success callback function that you're passing to $.getJSON().
If your code looks like this:
var terms={};
terms[0]={};
$.getJSON('content.json', function(data){
$.each(data,function(i){
//terms[i]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
terms[i+1]={"label":data[i].headword,"cell_src":data[i].image,"clue_type":"audio","clue_src":data[i].audio};
});
window.terms=terms;
});
// use window.terms here
Then it won't work, because the // use window.terms here part executes before the AJAX call has finished. You'll need to move that to a separate function and call that from the success callback:
function workWithTerms() {
// use window.terms here
}
var terms={};
terms[0]={};
$.getJSON('content.json', function(data){
$.each(data,function(i){
//terms[i]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
terms[i+1]={"label":data[i].headword,"cell_src":data[i].image,"clue_type":"audio","clue_src":data[i].audio};
});
window.terms=terms;
workWithTerms();
});
I need a way to overwrite the jQuery $.post method, parameters url.
I need to append a string to every script I have without editing them one by one. The string value may change because it's created by the system.
I know there's a way to overwrite at 100% the value of the parameter but not just appending.
Thanks you.
Depending on the modifications you want to do, you may use one off .ajaxStart or .ajaxSend methods to override the url parameter.
In a general way, you can modify an existing JavaScript function using the "Duck Punching pattern". You can read this article by Paul Irish to know how it works http://paulirish.com/2010/duck-punching-with-jquery/
Here's is the final pattern he recommends for using with jQuery
(function($){
// store original reference to the method
var _old = $.fn.method;
$.fn.method = function(arg1,arg2){
if ( ... condition ... ) {
return ....
} else { // do the default
return _old.apply(this,arguments);
}
};
})(jQuery);
Consider using a custom function:
var updateUrl = function(url){
return url + someStuff
}
$.post(
updateUrl( yourUrl ),
data,
successCallback
);
So you wrap the overriding logic once in updateUrl, and that's it.
Let's say I have a <ul> list:
<ul class="products">
...
</ul>
I want to select it with jQuery, then add some functions to that object. For example, I'd like to add an addProduct(productData) function and a deleteProduct(productId) function. However, I'd like the functions to only be added to the object that's returned by the selector. So for example, something like this:
var productList = $.extend($('ul.products'), {
addProduct: function(productData) {
// add a new li item
},
deleteProduct: function(productId) {
// delete li with id
}
});
How would I do this using jQuery? The key point here is that I only want to add the functions to an instance returned by a jQuery selector. In other words, I don't want to modify jQuery's prototype or create a plugin, since those will make the functions available across everything, whereas I only want to add the functions to one specific instance.
If you only want the addProduct and deleteProduct methods to feature on that single jQuery object, then what you've got will work fine; but you'll have to keep a reference to that jQuery object/ only use it once, to preserve the existance of the addProduct and deleteProduct methods.
However, these addProduct and deleteProduct methods are unique to that particular jQuery object; the methods won't exist on any other jQuery objects you create;
var productList = $.extend($('ul.products'), {
addProduct: function(productData) {
// add a new li item
},
deleteProduct: function(productId) {
// delete li with id
}
});
// Using this particular jQuery object (productList) will work fine.
productList.addProduct();
productList.removeProduct();
// However, addProduct() does not exist on new jQuery objects, even if they use
// the same selector.
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct'
The best way do to this would be to go-back-to-basics and define separate addProduct and deleteProduct functions, which accept a jQuery object. If you wanted to restrict these functions to they only worked on the ul.products selector, you could do;
function addProduct(obj) {
obj = obj.filter('ul.products');
// do something with `obj` (its a jQuery object)
}
This approach would be recommended as it keeps the jQuery.fn API consistent; otherwise you'd be adding addProduct and removeProduct to some jQuery.fn instances but not others, or making their usage redundant in others. With this approach however addProduct and removeProduct are always there, but don't get in anyones way if they don't want to use them.
Historical Notes
This answer was originally written in November 2011, when jQuery 1.7 was released. Since then the API has changed considerably. The answer above is relevant to the current 2.0.0 version of jQuery.
Prior to 1.9, a little used method called jQuery.sub used to exist, which is related to what you're trying to do (but won't help you unless you change your approach). This creates a new jQuery constructor, so you could do;
var newjQuery = jQuery.sub();
newjQuery.fn.addProduct = function () {
// blah blah
};
newjQuery.fn.deleteProduct = function () {
// blah blah
};
var foo = newjQuery('ul.products');
foo.deleteProduct();
foo.addProduct();
var bar = jQuery('ul.products');
bar.deleteProduct(); // error
bar.addProduct(); // error
Be careful though, the $ method alias would reference the old jQuery object, rather than the newjQuery instance.
jQuery.sub was removed from jQuery in 1.9. It is now available as a plugin.
You can make your own jQuery methods as follows:
$.fn.addProduct = function(){
var myObject = $(this);
// do something
}
// Call it like:
$("ul.products").addProduct();
This is a bit tricky though because you are making methods that are very specific to lists. So, to be sure you should at least add some checking on the object's type and handle the code correctly if the current object is, let's say an input element.
An alternative is to make a normal Javascript method that receives the list as a parameter. That way you can make a more list specific method.
I think you want to add a function to that DOM Object.
$(function(){
// [0] gets the first object in array, which is your selected element, you can also use .get(0) in jQuery
$("#test")[0].addProduct = function(info){
alert("ID: " + this.id + " - Param: " + info);
};
$("#test")[0].addProduct("productid");
});
Above script wil alert "ID: test - Param: productid"
A live example: http://jsfiddle.net/jJ65A/1/
Or normal javascript
$(function(){
document.getElementById("test").addProduct = function(info){
alert(info);
};
});
I think may be just using delegate in jQuery:
$(".parentclass").delegate("childclass","eventname",function(){});
I am trying to check if an object with class sourceFocus has data in it. However when I check it, it does not have data when it should. What am I doing wrong here?
$('.source').click(function() {
$('.source').removeClass('sourceFocus');
$(this).addClass('sourceFocus');
$(this).data('source_selected', true);
console.log($.hasData(this));
console.log(this);
});
$('.target').click(function() {
$('.target').removeClass('targetFocus');
$(this).addClass('targetFocus');
$(this).data('target_used', true);
//$('.sourceFocus').data('source_used', true);
console.log($.hasData('.sourceFocus'));
if($.hasData('.sourceFocus')){
console.log("has data worked");
check_for_duplicates();
}
I don't think the .hasData() method accepts selectors in your case .sourceFocus, try selecting .sourcefocus as an element and then passing that to the .hasData() function.
try something like...
console.log($.hasData($('.sourceFocus:first')));
$.hasData() checks against a DOM Element
you have to get it out of the jQuery object, either using array notation or the .get() method (not to be confused with the $.get() ajax method)
console.log($.hasData($('.sourceFocus')[0]));
If you trying to read the HTML between the tags for which you are using .sourceFocus class then do this in your if statement:
$.hasData($('.sourceFocus').html())