We Keep Coding

How to pass tag parameter to onclick function?

I hava a js function like this...
function myfunction(data){
console.log(data);
}
and I need to pass parameter from data in a tag. I tried to do:
<a id="aTag1" data="some data" onclick="trees(this);" > click me </a>
I expect to print in console "some data" but instead the console print all the html a tag
Also I tried with console.log(data['data']) and console.log(data.data) but its undefined
How can I receive the data parameter from the a tag?

You pass the reference of the element, so you need to look at the attributes. Ideally you should use a data attribute.
function myfunction(elem){
console.log(elem.dataset.test);
}
<a id="aTag1" data-test="some data" onclick="myfunction(this);" > click me </a>

You need to reference the datset value. You are console logging the entire tag rather than the attributes value. You can also use el.getAttribute() as well.
Important notes: In your example you are passing data into your function. data is a reserved word used in both HTML and in JS, I would recommend passing a different parameter into your function. Also your data- attribute needs a property to go along with the data attribute to make it work as intended. Example: data-info, data being the prefix and info is the propert, together data-info, it is read using dataset.info. MDN: Using attributes and MDN: More on Data Attributes
function trees(data){
console.log(data.dataset.some);
console.log(data.getAttribute('data-some'))
}
<a id="aTag1" data-some="some data" onclick="trees(this);" > click me </a>

Basically when you pass this, you're passing the whole element object. The thing you want can be achieved by the following snipped:
function myfunction(data){
console.log(data.attributes.data);
}

Add text to twitter share API via jquery/javascript

I can't manage to make jQuery add the content of #quote (which is a paragraph with a string generated via foresmatic API).The full code is here: https://codepen.io/raffaele2692/pen/GvrvxM .... Can you help me? :)
<a type="button" class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-size="small"
data-text="">
Tweet</a>
<script>
var textQuote = document.getElementByID("#quote");
$("a").attr("data-text", textQuote);
</script>

You have some issues in the js code. You do not need to add "#" to the id for getElementByID call , also to get the text of a HTML element you can use text method.
<script>
var textQuote = $("#quote").text();
$("a").attr("data-text", textQuote);
</script>

I think textQuote is a HtmlElement object, not the value you want to assign.
you should get the value in quote first.
btw, jquery has a method called data to assign value to data attributes.

jQuery chained functions and "this": Where is my syntax incorrect in this example?

Here's the situation:
I have 3 buttons
<button type="button" class="job-update-button wp-core-ui button-primary" id="delete-btn">Remove</button>
<button type="button" class="job-update-button wp-core-ui button-primary" id="update-btn">Update</button>
<button type="button" class="job-update-button wp-core-ui button-primary" id="add-btn">Add</button>
and an input
<input type="hidden" name="jobAction" value="" />
whose value is supposed to relate to the id of whichever button has been clicked. It might look silly, but this is my way of consolidating the logic on the page so that a single script on the server can handle a bundle of related AJAX requests.
delete-btn clicked --> jobAction gets value of delete
update-btn clicked --> jobAction gets value of update
add-btn clicked --> jobAction gets value of add
The function I'm using for the click events starts with
jQuery('.job-update-button').click(function(){
// change the value of the memberAction hidden input based on which member-update-button was clicked
jQuery('input[name="jobAction]"').val(jQuery(this).attr('id').substring(0, this.IndexOf('-')));
and I'm trying to figure out why I'm getting
this.IndexOf is not a function.
My thinking is that by the time I call this.IndexOf('-') the this refers to the object invoking substring, which is the string returned by jQuery(this).attr('id').
Is that wrong? If so, can you help me understand why? And is there a more efficient and compact way of going about this whole procedure?

Your Jquery function is messed up all you need is:
$('.job-update-button').click(function(){
// change the value of the memberAction hidden input based on which member-update-button was clicked
var id = $(this).attr('id');
var value = id.replace("-", " ");
$('input[name="jobAction"]').val(value);
})
For starters you dont need to call jQuery the shorthand way is simply $
It looks like you have a " outta place in your code. Change this:
'input[name="jobAction]"'
To:
'input[name="jobAction"]'
Working codepen example
Please note instead of:
jQuery('.job-update-button').click(function(){}
I used:
$('.job-update-button').click(function(){}
You could call jQuery every time but $ is easier.
If its not what you're looking for just let me know and I will edit or delete.

Let's break your code down a bit to make it clearer:
jQuery('.job-update-button').click( function(){
var value = jQuery(this).attr('id').substring(0, this.IndexOf('-'));
jQuery('input[name="jobAction"]').val( value );
});
Inside the click event handler, this refers to the HTML element that triggered it. That is just the way jQuery works internally (you can explicitly set this or 'scope' when calling or applying a function).
That means you are trying to call indexOf (note the correct spelling) on an HTML element, which does not have an indexOf method.
Also, note that most people use the $ shorthand for the jQuery method.
To fix your code, this would probably suffice:
$('.job-update-button').click( function(){
$('input[name="jobAction"]').val( $(this).attr('id').replace(/-btn$/, '') );
});
Here, I'm using the replace method with a Regular Expression in order to strip out the appended '-btn' part of the id.

Escape quotes in Javascript function

I'm trying to use a href onclick event in kendo grid template. When I click on the link I need the alert to diplay path text but it gives "PDF undefined error". I think it could be an issue with escape quotes.
${PDF} returns a string value.
template: "<a id='${PDF}' class='clsPDF' onclick='setpdf(\${PDF});' href='\\#'>View</a>"
<script>
function setpdf(path)
{
alert(path);
}
</script>

I would suggest slightly different approach. Instead of using inline function you can use a delegate function attached to your Grid element which will take care of all buttons like the one you defined in the template.
e.g.
$("#gridName").on("click", ".clsPDF" , function(){
var model = $("#gridName").data("kendoGrid").dataItem($(this).closest("tr"));
alert('you clicked on item with id' + model.TheIdProperty);
})
I hope this gives you the idea. I think it is cleaner this way.

When the browser looks at the link make sure it sees it like this:
<a id='someId' class='clsPDF' onclick='setpdf("pdf.pdf");' href='#'>View</a>
If it sees it like this:
<a id='someId' class='clsPDF' onclick='setpdf(pdf.pdf);' href='\\#'>View</a>
It will think pdf is a javascript object/variable and try and use it.
So you are right it is most likely a problem with quotes. You could try wrapping your \${PDF} with escaped double quotes:
\"\${PDF}\"

jQuery load issue. Don't know how to approach this AJAX call

$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?

Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});

this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));

post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});