How to pass argument from onclick function? - javascript

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.

Related

jQuery.fn.on() method - need to pass 'this' as function parameter

I am trying to attach a click event to a button in wordpress, which needs to be dynamically scripted because different posts have different numbers of images in their gallery. I tried the following code without success, I think the this parameter handed to the function might refer to the '#primary' element rather than to the #nextPicButton (whose name atribute contains an index value) being clicked:
jquery('#primary').on("click", '#nextPicButton', function(){ nextPic(this,picMax); });
Does anyone know how I can make the 'this' argument refer to the '#nextPicButton' rather than anything else?

Function parameter evaluates to undefined

When dynamically creating an element of type select, there are two problems when setting the onclick method:
It is impossible to simply set the onclick with element.onclick="updateInput(this.articleIndex)";
This results in a final HTML tag where no onclick is shown at all.
When set by e.setAttribute("onclick","updateInput(this.articleIndex)");, it does appear in the final HTML. And the updateInput method does get called.
However the functionality seems to be broken, as the argument always evaluates to undefined
Here a simple example of my problems:
var selectElem = document.createElement("select");
selElem.id="articleSelector_"+this.articleIndex;
console.log("the index of the article is " + this.articleIndex);
selElem.setAttribute("onclick","updateInput(this.articleIndex);");
//selElem.onclick="updateInput(this.articleIndex)"; //this does not work
The log shows the correct number. Inside the updateInput method, the argument is of value undefined instead of the number previously shown in the log.
Try attaching handlers with pure Javascript, and not with HTML, without onclick = "... (which is as bad as eval).
The this in your script refers to the calling context of the function - what is it?
You might want:
element.addEventListener('click', () => {
updateInput(this.articleIndex);
});
(arrow functions retain the this of their surrounding scope)
it is impossible to simply set the onclick with element.onclick="updateInput(this.articleIndex)";
What that code does is it assigns the string "updateInput(this.articleIndex)" to the onclick which makes no sense and certainly not what you want.
Even if you remove the quotes:
element.onclick = updateInput(this.articleIndex);
It is still incorrect because it assigns the result of the updateInput() function to the onclick which is again not what you want.
You need to assign a function name to the onclick like this:
element.onclick = updateInput;
However, this doesn't allow you to pass a parameter as you wish. To do so, you need to use an anonymous function:
element.onclick = function() {
updateInput(this.articleIndex)
};
When set by e.setAttribute("onclick","updateInput(this.articleIndex)");, it does appear in the final HTML. And the updateInput method does get called.
This works because it sets the attribute onclick and it is a string type, so everything is correct. It is equivalent to using the anonymous function above. The only difference is this, which in this case refers to the element itself, while in the above code it depends on the context that the code appears in. That's why in this case the argument always evaluates to undefined because the select element doesn't have an articleIndex property.
The problem is the value of the context this when that element is clicked, the context this is not available anymore at that moment.
You have two ways to solve this problem:
You can use the function addEventListener to bind the event click, and bind the function/handler with the desired context this:
The function bind binds a specific context to a function.
selElem.addEventListener('click', updateInput.bind(this));
function updateInput() {
console.log(this.articleIndex);
}
As you need a specific value, you can use data attributes. That way, you don't need to worry about the context this.
selElem.dataset.articleIndex = this.articleIndex;
selElem.addEventListener('click', function() {
updateInput(this.dataset.articleIndex); // Here you can get that value.
});

How can I get the value of a control whose ID was passed to javascript function from code behind

I'm not sure how to handle the issue to get a value of the control if its ID was passed to a function from code behind.
I have a function called StateSelect that is added to a control in code behind. It has parameters. The last parameter is txtCity.ClientID.ToString()
In my html, I have this function defined as
function StateSelectedp(city, state, ddlZipName, txtCityID)
{
alert($.trim($('#txtCityID').value)); //not sure how to do it
}
I need to get a value of the txtCityID control. How can I reference it with jQuery?
Thank you
To get the value of an element with a variable ID, you can do something along the lines of the following...
function StateSelectedp(city, state, ddlZipName, txtCityID)
{
alert($('#' + txtCityID).val());
}
txtCityID is a string representing the whole ID of a given element. For jQuery to search by id, the id must be prepended by the '#' character. After the element has been selected, the val() function will return the value of the first (I think it's only first, anyways) element in the selected set of elements. There should only be one anyways, as only one element should have a given id.
Keep in mind, though, that this is all happening on the client side. Your reference to code-behind (a Web Forms term) implies that you might be intending to do something with this on the server-side, so this may or may not be the path you're really looking for.

cannot pass string to function

I'm using javascript and I try to pass a string to a function , like so
//example string
var f="a";
//add button that sends the value of f to the function
document.getElementById("mydiv").innerHTML="<input type='button' id='myButton' value='Click here' onclick='gothere("+f+");'> ";
function gothere(a){
alert(a);
}
I never see the alert and in console I see a is not defined (refers to the f I guess?)
If i set the f var to be a number then I see the alert.
What am I missing?
Thanks in advance
EDIT
I was thinking maybe something like
var buttonnode= document.createElement('input');
document.getElementById("mydiv").appendChild(buttonnode);
buttonnode.onclick=gothere(f);
Wont work for the same reason?
When your HTML get's rendered, you get onclick='gothere(a);', but the actual a variable doesn't exist in this context, you want to pass the value of f, as a string, so you'll need to use onclick='gothere(\""+f+"\");'. Note the extra quotes inside the parens. This will render to onclick='gothere("a");' thus passing the string.
When using a number, it works, because calling onclick='gothere(5);' is valid, since a variable can't be named 5, and it passes the number.
Actually, you don't have an a in your code. You are using variable f to denote a. So using this would help you:
var f="a";
// write the remains of the code as they are..
function gothere(f) {
alert(f);
}
Now when you'll call the function, there will be an alert of a in the browser.
Also, try wrapping the content in "" double qoutes to let the code understand that this is a string not a character.
For onclick use
onclick='gothere(" + f + ")'
And now, its onto you to write the value. Maybe the issue is because you're not writing the value for the f.
Try inpecting the error. I am sure there won't be anything.
Or try using the attribute field and change it using jQuery.
How about fixing your code ? You are missing the quotes around the value denoted by variable F.
Hence, when variable F is parsed, the function becomes gothere(a) . while a is not a defined variable (but its a value) and hence the error.
Try this !
document.getElementById("mydiv").innerHTML="<input type='button' id='myButton' value='Click here' onclick='gothere(\""+f+"\");'> ";
The modified part is onclick='gothere(\""+f+"\");'> "
This should work for you !
function parameter string value image dynamically from JSON. Since item.product_image2 is a URL string, you need to put it in quotes when you call changeImage inside parameter.
My Function Onclick inside pass parameter.
items+='<img src='+item.product_image1+' id="saleDetailDivGetImg">';
items+="<img src="+item.product_image2+" onclick='changeImage(\""+item.product_image2+"\");'>";
My Function
<script type="text/javascript">
function changeImage(img)
{
document.getElementById("saleDetailDivGetImg").src=img;
alert(img);
}
</script>
You need to use single quotation marks for value arguments (see #Nis or #CDspace answer).
Better way to handling dynamic clicks or other events is event binding. See jQuery event binding for example.

How to programmatically change an inputs onblur?

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.

Categories