I'm using JQuery UI autocomplete to do a search in a database to search for a song. I have a global variable (artist) that I want to pass as a parameter to the autocomplete event.
var artist = 0;
// do some stuff to change the variable artist
$(function() {
$("#track1").autocomplete({
source: "tracks.php?id="+artist+"",
});
});
The problem is: the function is always called with the initial value (0) even when that value is changed. Is there an easy way to pass the changed global variable to the autocomplete function?
Thanks Carsten, the problem was indeed solved by moving $("#track1").autocomplete({into a function and calling it when the artist was updated.
Related
I have created a table and populated it using jQuery. Now I would like to add a text such as when we click on it a function executes. I have used onclick and it worked fine, but I also need to send a few arguments to my function, how can I send arguments to the targeted function from onclick:
var dataHtml = '';
$.each(data, function (index, user) {
dataHtml+="<code onclick=show_popup(1,user['donner'][0])> Donner details</code>";
});
$("#t-data").html(dataHtml);
function show_popup(show=0, donner){
$(document).ready(function(){
var showModel=show;
if(showModel==`1`){
$(`#modal-default-admin`).modal(`show`);
}
});
But it shows a "user is not defined" error. User is defined and I also can access it.
The user is in fact not defined. The problem you are facing is that you are using HTML as a string, so you are providing onclick=show_popup(1,user['donner'][0]) as string. When jQuery "makes HTML" out of this string and you click on it, it calls show_popup with 1 and user['donner'][0] and the user here is undefined. It was only available inside the $.each loop, not outside of it.
The simplest fix is to pass the value directly and not trying to do it as a pointer.
onclick=show_popup(1,\""+ user['donner'][0] +"\")>
Like this, it will use the value of user['donner'][0] when creating the HTML.
Bonus point: You should wrap the onclick attribute with quotes:
dataHtml += "<code onclick='show_popup(1,\""+ user['donner'][0] +"\")'> Donner details</code>";
Just to make sure that for example a space in the value of user['donner'][0] doesn't break it again.
I am able to call function in my code.. however I want to make my calling function name as variable so that it can call any function based on my variable value ..
reportPage.accounts()['catType']()
so here I want to make catType as variable, so that I can pass any value.. How to declare/call here..
You replace the string literal with the variable, exactly as you would anywhere else.
var thing = 'catType';
reportPage.accounts()[thing]()
I have following javascript code. I am trying to achieve a hide/display generic function on change in select form field. Lets take an example. Suppose I have a select field where values are "none", "auth", "other" and if user selects "auth" then display another form field. I may have such situation many places in the form for different select fields. Hence I have written this function below profile_field_toggler
function escapeJquerySelectorStr(str) {
if (str) {
return str.replace(/([ #;?&,.+*~\':"!^$[\]()=>|\/#])/g,'\\$1');
}
return str;
}
function profile_field_toggler (cotroller_id, reciever_id, block_code) {
parsed_controller_id = "#"+escapeJquerySelectorStr(cotroller_id);
parsed_reciever_id = "#"+escapeJquerySelectorStr(reciever_id);
selected = jQuery(parsed_controller_id + " option:selected").val();
if(block_code()) {
jQuery(parsed_reciever_id).removeClass("hide");
} else {
jQuery(parsed_reciever_id).addClass("hide");
}
}
Here I make call to the generic function i.e profile_field_toggler. Last argument of the generic function accepts conditional code, so I am passing it in the call below selected == "auth" . BUT selected has no scope in this call hence it will not work (as I want to refer the selected variable in the generic function). So how can I solve this problem? Please note, I must want to keep the condition such as selected == "auth" or selected != "xyz" or selected == "undefined" in the caller only, because they may vary.
jQuery(document).ready(function() {
profile_field_toggler("base[remove_option]", "general_passwordassword_block", function() {selected == "auth"});
});
Any idea how to solve this problem?
A closure can only access variables in its own scope, but definitely will not (and can not) have any knowledge of the scope of the function that eventually calls it.
In this particular example - perhaps "block_code" should take selected as an argument.
It looks weird, but I found the solution. It seems you can pass selected in the call from caller only and even if it is defined in the generic function, it will work. Check this out. I just added return so that condition can be evaluated. and it worked. I tested with all different conditions and it is working ..sweet, but weird.
jQuery(document).ready(function() {
profile_field_toggler("base[remove_option]", "general_passwordassword_block", function() {return(selected == "auth")});
});
Probably misunderstanding something simple, but i can't seem to get this to work.
I want to: go trough each img element in "wrapper", and strip all html from the title attribute (with stripTags() from mootools more). I get the error:
"this.get is not a function"
here is the code:
$('wrapper').getElements('img').each(function() {
var oldAlt = this.get('title').stripTags();
this.setProperty('alt', oldAlt);
});
Thanks in advance
$('wrapper').getElements('img').each(function(el) {
var oldAlt = el.get('title').stripTags();
el.setProperty('alt', oldAlt);
});
this does not refer to the looping element -- the first argument to the .each callback function is element passed, the second is index (opposite to jquery where index is first).
The other option is to bind the this variable
$('wrapper').getElements('img').each(function() {
var oldAlt = this.get('title').stripTags();
this.setProperty('alt', oldAlt);
}).bind(this);
The extra .bind(this) basically means, in the scope inside the each function, the variable this is bound to whatever value is refers to outside. (like passing the variable into the scope). If you have need to access the normal this pointer as well, as the outside reference, you should go with an option such as #Chetan's answer
I am trying to change the value of the onblur attribute of a text input after the page has finished loading.
When I do the following, it simply fires the function:
ip.onblur = stopCalcUpInt(this,10);
When I do the following, I have success:
ip.onblur = function onblur(event){stopCalcUpInt(this,10);}
Unfortunately, the whole point of this is to be able to dynamically set the second parameter for stopCalcUpInt(). If I hard code a value for it... it works fine... but any attempts to pass varibles to this fails... instead of putting the value of the variable as the second param it just puts the plain text of the variable name itself. Here is ideally what I am TRYING to do:
ip.onblur = function onblur(event){stopCalcUpInt(this,this.value);}
In this example, when I alert the ip.onblur I get:
It depends what this is intended to refer to. In an event handler this refers to the element on which the event is being handled. If that's what you want then your code looks good as written; this will point to ip.
If you intend this to refer to the this from outside the event handler and not ip then try this:
var self = this;
ip.onblur = function(event) { stopCalcUpInt(self, self.value); };
The answer to getting this to work was super easy, yet not overly obvious. Instead of:
ip.onblur = function onblur(event){stopCalcUpInt(this,this.value);}
I did this:
ip.setAttribute('onblur','stopCalcUpInt(this,\'' + ip.value + '\');');
Works perfectly... no more banging my head against the wall! Yay!
ip.onblur = function() {stopCalcUpInt(this,this.value);}
ip.onblur is an event handler... i.e. it's a function
Now, when you alert a function, FF will show you the source code for that function (if it's user defined).
That is why you're seeing the plain text of the variable name.
For an event handler, this is the element that is currently handling the event. So, if you're setting the onblur handler of an input box, you will have access to the contents of that input box.
The code sample that you provided:
ip.onblur = function onblur(event){stopCalcUpInt(this,this.value);}
should work correctly. Try
ip.onblur = function onblur(event){alert(this.value); stopCalcUpInt(this,this.value);}
if you want to be sure
Is stopCalcUpInt expecting a number in the second parameter? The value attribute will return a String, while in your hardcoded example you're passing a number type. Try this:
ip.onblur = function onblur(event){stopCalcUpInt(this,this.value * 1);}
As explained in QuirksMode:
Since multiplying assumes numbers,
JavaScript makes the string a number,
if possible.