I am trying to understand this line of code. it's from the blueimp jquery file upload. I've extracted the part I need down this line (it populates my page with images I already have). I am unclear as to why it needs to be called this way. I understand the call() method, just not clear on this - it seems extra convoluted:
$('#fileupload').fileupload('option', 'done').call($('#fileupload'), null, {result: data.images});
data.images is a JSON set of images. The code works, just unclear why I need to call things as they are.
Here's the original code - made for multiple fields it looks like)
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js#L53
$('#fileupload').fileupload('option', 'done') reads the value of the done option, which appears to be a callback function. As the function is not being invoked as a property of the $('#fileupload') element, the code has to call it so as to give it the expected value for this.
Related
Maybe I'm not using the right terms/names for my searches but I have not been able to find anything on this topic. I would have thought this would be an easy thing to find. What I'm doing is passing a component name to a function and then trying to use the component's name by attaching a method to it. I have confirmed (via Dev Tools) that the name is correctly being passed but when I use the variable and attach the method the specific request does not work. If I 'hard-code' the exact component name to the method it works perfectly. This makes me think the (various) ways I've been trying to attach the method to the variable name is incorrect (see various attempts below). Can you offer some direction here? Thank you.
Passing to Function ...
const grid_name = "grid_GroupA";
console.log(grid_name); // Shows grid_GroupA
msg_max(newItem, grid_name);
Function (only listing relevant parts)
function msg_max(newItem, grid_target) {
console.log(grid_target); // Shows grid_GroupA
// grid_GroupA.data.add(newItem); // This works ...
// grid_target.data.add(newItem); // This does not work
// (grid_target).data.add(newItem); // This does not work
// [grid_target].data.add(newItem); // This does not work
// grid_target + '.data.add(newItem)'; // This does not work
Thank you ...
Edit ...
In my attempt to provide detail I hope I haven't confused the issue.
In essence, my question is if I can type this exact string
grid_GroupA.data.add(newItem);
and it works for my function, how can I place a variable with the exact string "grid_GroupA" in front of ".data.add(newItem);" and have it seen the same as the line of code that works? Maybe my lack of knowledge here is getting in the way but isn't the line of code that works just a string that is then used to 'find' the object? So, if that assumption is correct, how do I create that same string with the variable? If my assumption is wrong I am a willing learner so I will be all ears. Thank you.
I do not see how grid_target is an object. You are passing grid_name(which is a string) to the function, so grid_target will have no data property, because string doesn't have such a member.
P.S. snake_case is bad option for JavaScript, consider using cameCase instead
html base
<html>
<head>
</head>
<body>
<input type="text" class="abc"/>
</body>
</html>
So I have my prototype object
function AnArray(){
this.anArray=[];
}
AnArray.prototype.getAnArray=function(val){
return this.anArray[val];
}
AnArray.prototype.setData=function(index,val){
this.anArray[index].data=val;
}
var objAnArray=new AnArray();
the object ends up looking like this
id: 1, pid: "questions-worth-asking", num: 1, data: null
and I'm trying to change an attribute in it like so
objAnArray.setData(0,$(".abc").eq(0).val());
When I've rune console.log messages using getAnArray() before and after the above line, it returns the same value as it has not been changed.
My question is how do you change attributes of a prototype object?
edit: This link led me down the right path http://www.gpickin.com/index.cfm/blog/websql-when-is-a-javascript-object-not-a-javascript-object
You're missing a lot of information from your post that makes it difficult to debug.
From my understanding the problem is that:
You want your jQuery object's value property to be stored in an array that you wrapped in an object.
You want to store this property with the setData function you wrote.
You want to retrieve that object by using the getAnArray function you wrote.
I don't think this is an issue with prototypes, but with the lack of information given to us, it could be any number of things. I wouldn't be surprised if you came back and said "Oh, it was something else completely."
I've made a fiddle that successfully sets and gets data from the anArray objects that you can use as an example.
Here are some problems you want to look at that will help you debug:
You don't set the anArray[index] object in this snippet. So if we are to take this at face value, the setData function should throw a ReferenceError.
You haven't told us if you're calling the setData function inside an event or right when the page loads. If it's the latter, then according to the html you posted at the top, you won't have any data in the input field yet. You need to call the setData function only when there's data in the field.
You might be calling the jQuery object outside of the $(document).ready(function(){ ... }) call so the value you're obtaining with $(".abc") call is undefined.
Give those a try and hopefully those work.
To make your questions easier to debug going forward:
Write all your experimental code in an isolated environment so that all the confidential content content doesn't have to be removed before posting.
Run your code and make sure it runs as expected.
Show us all of that code so that we know where all the data comes from and how each element interacts with the other elements. For example, we currently don't know how the anArray array is populated so I've had to make assumptions. We also don't know how id, pid, or "questions-worth-asking" comes from so there might be side effects from how those are loaded in.
Write your code using some sort of style guide to make it easier to read. This will also help improve debug time for you and will help prevent errors from silly mistakes that you might make.
Edit:
I know you're calling console.log before and after the setData method. Consider putting console.log inside the setData method as well.
AnArray.prototype.setData = function (index, val) {
console.log("Entering setData with: ", index, val, this.anArray[index]);
this.anArray[index].data = val;
console.log("Exiting setData with: ", this.anArray[index]);
};
It seems to me that the problem isn't in your javascript. You're saying that you ran a console.log before and after your setData call on objAnArray. Perhaps it has something to do with your HTML input element not being updated, or the data not coming through in time.
Like Keane said, we need more info about your set up and logic flow.
I'm trying to figure out what the best way to handle a JSON object that I need to post/get when the document is ready so I can then run over another function that builds out the DOM based on said JSON object. This object is also something that updates every 30 seconds to a minute.
My initial thought was to build it out as a closure. i.e.:
var myJSONobject = $.post(uri, function(data){return data;});
however the function I run when the for document ready, and functions I base on click events don't recognize the object as being valid. It returns a JSON object, and I've used jsonlint.com to confirm that the object format is valid. So I am thinking its in how I am handling the string of events. Where the object though it may be legit is being rendered after the document ready thus breaking the functionality in a sense. Cause if I take the same object it spits out and hard code it in as a variable. the code I've been working on works fine. So now I am trying to figure out whats my best approach to handling this so one, my script doesn't break prematurely. and two find out if trying to adapt this as a closure the way I am is the right way? Whats a good practice logic in this type of scenario? Should I load the JSON object into a hidden div somewhere or text area and pass it through that or what?
$.post function does not actually return the return value of the success function, so you cannot just assign myJSONobject to it.
What you really want to do is
var myJSONobject;
$.post(uri, function(data){
myJSONobject = data;
// OR work with data here
});
// You cannot use myJSONobject right away
But be careful, you can't access myJSONobject right after calling $.post, you need to wait until the ajax call succeded.
If you need the Object right away before document.ready, use the jsonp technology, and load that script inside documents <head>. Or better load it at the end of the <body>, and the scripts that need it right after it.
I have written a piece of code to generate a chart by values generated by an ajax call.
The problem is, the select (years) is not changing its value after the call is done loading. The weird thing is, i can see its value changing (if i alert its current value) but it simply won't change.
The code:
http://pastebin.com/RNfLmdWy
The $.load_x function is a custom loader but it behaves the same as a regular $.getJson call.
Found it! This part is responsible:
var option = $(this).attr('id').split('option_');
$('#'+option[1]).val(String($cur_val));
setTimeout(function(){$('#'+option[1]).val(String($cur_val))}, 1000);
I don't know what were you trying to do here, but basically, the option variable becomes a array ["", "years"], and in the next step you are setting $("#"+option[1]) value to $cur_val variable which is anything found in the #option_years input.
Soooo to wrap it up. To get rid of the "my select is not changing its value" issue in this case just get rid of those lines or at least let me know what you wanted to do there :)
EDIT: Here's the example that works for me: http://pastebin.com/sFRT3GJa (tested on FF and Chrome). As you can see it the source I use jQuery 1.6.1, jQuery UI 1.8.16 and jqPlot 1.0.0b2_r792. Other than that I've moved the callback function of $.load_x and named it handleJSON. Then I passed the JSON data you've pasted in your question to mock the successfull response of the $.load_x function.
Before you make get_port_graph call, give some time for select box to change the dropdown since its heavy call. It will work.
function year_chart(year)
{
settTimeout(function(){
var d = new Date();
get_port_graph("Uitporteringen "+year,d.getMonth(), year,'outport', 'chart1', 'bar');
}, 100);
}
Two things I'm trying to adjust in my usage of JQuery autocomplete in PHP.
1. I would like that when I chose an option it will auto-submit the form (currently it requires two enters)
2. When I continue to write and no new options exist is still shows me the old options. I would rather it not suggest un-relevant options even if none exist.
Thanks
UPDATE:
I've resolved num. 2, for future readers the problem was I sent null instead of an empty json from the source url.
Regarding num. 1, I've done as suggested and now my JQuery js code looks like this:
$( "#searchid" ).autocomplete({
source: "/autocomplete_url.php?more=1",
});
$("#searchid").result(function (event, data, formatted)
{
alert("o"); // just to check if got here
$('#formid').submit();
});
However, The result function is never invoked (I've added a simple alert to verify that). Any idea why?
For 1.) you can simply submit the form through jquery from within the result(handler). Look at this - http://docs.jquery.com/Plugins/autocomplete if you look at the last code sample on the page, instead of redirecting, you can simply submit the form instead within the result call.
Regarding the 2.) point, well jquery autocompletes works just like that, perhaps you're doing something wrong or expecting something wrong, please give more information regarding the same.