We Keep Coding

how to append a javascript function with 2 variables in html?

I'm trying to append into the html code a javascript function with 2 variables,
the comment variable is a string and i have problem passing it :
var url = '{{URL::to('calendar/comments')}}';
$.getJSON(url+"/"+data.id, function(data)
{
ul.append("
<li>
<a href='#'onclick='openmodal("+value.id+", "+value.comment+")'>
Modifier
</a>
</li>"
);
});
but when i display in the console i get the string variable shown as a varibale
for example test and not "test" as i want and i get this error "test is not defined".

var url = '{{URL::to('calendar/comments')}}';
$.getJSON(url+"/"+data.id, function(data)
{
ul.append("
<li>
<a href='#'onclick='openmodal("+value.id+", \""+value.comment+"\")'>
Modifier
</a>
</li>"
);
});
You need to surround the comment with "" so when you trigger the click,
the onclick function as something like openmodal(1,"test") and not openmodal(1,test) since it would just try to call it with the `test variable which is undefined

$(this).attr('id') gives blank values in jQuery

I have a link as follows:
<a href="#" id="<?php $res['id'];?>" class='bid_accept'>Accept</a>
I need to pass the value of id to another page using Framework7 as follows:
$$('.bid_accept').on('click', function (e) {
e.preventDefault();
var value = $(this).attr('id');
var jsonstring = JSON.stringify(value);
myApp.confirm('Are you sure?', 'Custom Title',
function (jsonstring) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
},
function () {
myApp.alert('You clicked Cancel button');
}
);
});
I receive alerts as:
Your name is "". You clicked Ok button
I also tried:
var value = this.id;
Why am I not getting the id value?

If you use JSON.stringfy(value) it means you are setting that ID out of a JSON value, i do not know if i am write but the ID attribute takes a 1 word name and JSON.stringfy() produces multiple words separated by spaces. Let alone i think IDs have a specific number of characters so you might be intializing a very long name.
Not really sure what you want to achieve but HTML allows you to add attributes of your own and read them in JQuery like:
<a href="#" myAttr="<?php $res['id'];?>" class='bid_accept'>Accept</a>
such that when you click your code will be like:
$$('.bid_accept').on('click', function (e) {
var value = $(this).attr('myAttr');
....
}

This line has error
<a href="#" id="<?php $res['id'];?>" class='bid_accept'>Accept</a>
change it to
<a href="#" id="<?php echo $res['id'];?>" class='bid_accept'>Accept</a>
And in jquery part instead of $ you have to use $$.
var value = $$(this).attr('id'); // check $$ sign

Javascript onclick change variable value

I am new to JavaScript and I need some help. I am making a website and I have several images of team members that if clicked (so I'm guessing the onclick event) will change the variable values corresponding to that team member. For instance, if I click on a picture of Bill Gates, in a separate div, I need to have a variable (let's say Name) change value to Bill Gates. Then, if I click on an image of Steve Jobs, the variables containing Bill Gates' data will get overwritten with the data of Steve Jobs. How do I do this?

Assuming mark-up like the following:
<div id="gallery">
<img class="people" data-subject="Steve Jobs" src="path/to/imageOfSteve.png" />
<img class="people" data-subject="Bill Gates" src="path/to/imageOfBill.png" />
</div>
<span id="caption"></span>
Then a relatively simple, and plain JavaScript, approach:
function identifySubject(image, targetEl) {
if (!image) {
return false;
}
else {
var targetNode = document.getElementById(targetEl) || document.getElementById('caption'),
person = image.getAttribute('data-subject');
text = document.createTextNode(person);
if (targetNode.firstChild.nodeType == 3) {
targetNode.firstChild.nodeValue = person;
}
else {
targetNode.appendChild(text);
}
}
}
var images = document.getElementsByClassName('people');
for (var i=0, len=images.length; i<len; i++) {
images[i].onclick = function(e){
identifySubject(this, 'caption');
};
}
JS Fiddle demo.

Onclick attribute is right. You need to add the name of a javascript function to the image's onclick attribute (eg <img src="" onclick="changeVariable()"...).
If you want text on the page to change depending on who you click on, you'll need to look at selecting divs in Javascript using getElementById() or similar and look at the InnerHTML property.
See: http://woork.blogspot.co.uk/2007/10/how-to-change-text-using-javascript.html

Hope this helps
<img src="path/to/image1" onclick="getValue('bill gates')" />
<img src="path/to/image2" onclick="getValue('steve jobs')"/>
<div id="show_value"></div>
<script>
function getValue(val){
document.getElementById('show_value').innerHTML = val
}
</script>

HTML:
<div class="member"><img src="billgates.jpg" /><span>Bill Gates bla bla</span></div>
<div class="member"><img src="stevejobs.jpg" /><span>Steve Jobs bla bla</span></div>
<div id="variables"></div>
JS:
$(function(){
$('.member img').click(function(){
$('#variables').html($(this).closest('span').html());
});
});

Javascript to get the id of the hyperlink clicked

I would like to know how i can set the current hyperlink id to a hidden field on clicking the corresponding links. The html control code is as follows:
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox" id="ExpressionsLink"
title="Create expression column" onclick="keepID()">Add Expressions Model</a>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox" id="AggregateMethodLink"
title="Create aggregate column">Add Aggregate Methods</a><input id="HiddenIdHolder"
type="hidden" />
I need the id of the link clicked on the hidden field 'HiddenIdHolder'.
Javascript
function keepID() {
var hiddenInput = document.getElementById("HiddenIdHolder");
hiddeninput.value= ? // What can i do here to get the id?
}

this refers to the element itself. Example on jsFiddle
onclick="keepID(this)"
Then
function keepID(element)
{
var hiddenInput = document.getElementById("HiddenIdHolder");
hiddeninput.value = element.getAttribute("id");
}

Use jQuery:
$('a').click(function() {
$('#HiddenIdHolder').val($(this).attr('id'))
})

You should modify your HTML to provide argument for KeepID function:
ooxx
note that you should provide a this argument when invoke KeepID function, then in KeepID function, you can access this element from argument:
function KeepID(src) {
document.getElementById("HiddenIdHolder").value = src.id;
}

How can I get the data-id attribute?

I'm using the jQuery Quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice.
How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items.
$("#list li").on('click', function() {
// ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
alert($(this).attr("#data-id"));
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<ul id="list" class="grid">
<li data-id="id-40" class="win">
<a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
<img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
</a>
</li>
</ul>

To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use
$(this).attr("data-id") // will return the string "123"
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("id") // will return the number 123
and the part after data- must be lowercase, e.g. data-idNum will not work, but data-idnum will.

If we want to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:
Through JavaScript
<div id='strawberry-plant' data-fruit='12'></div>
<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>
Through jQuery
// Fetching data
var fruitCount = $(this).data('fruit');
OR
// If you updated the value, you will need to use below code to fetch new value
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');
// Assigning data
$(this).attr('data-fruit','7');
Read this documentation

Important note. Keep in mind, that if you adjust the data- attribute dynamically via JavaScript it will not be reflected in the data() jQuery function. You have to adjust it via data() function as well.
<a data-id="123">link</a>
JavaScript:
$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

If you are not concerned about old Internet Explorer browsers, you can also use HTML5 dataset API.
HTML
<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>
JavaScript
var myDiv = document.querySelector('#my-div');
myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"
Demo: http://html5demos.com/dataset
Full browser support list: http://caniuse.com/#feat=dataset

You can also use:
<select id="selectVehicle">
<option value="1" data-year="2011">Mazda</option>
<option value="2" data-year="2015">Honda</option>
<option value="3" data-year="2008">Mercedes</option>
<option value="4" data-year="2005">Toyota</option>
</select>
$("#selectVehicle").change(function () {
alert($(this).find(':selected').data("year"));
});
Here is the working example: https://jsfiddle.net/ed5axgvk/1/

This piece of code will return the value of the data attributes. For example: data-id, data-time, data-name, etc.
I have shown it for the id:
Click
JavaScript: Get the value of the data-id -> a1
$(this).data("id");
JQuery: This will change the data-id -> a2
$(this).data("id", "a2");
JQuery: Get the value of the data-id -> a2
$(this).data("id");

HTML
<span id="spanTest" data-value="50">test</span>
JavaScript
$(this).data().value;
or
$("span#spanTest").data().value;
ANS: 50

Accessing the data attribute with its own id is a bit easy for me.
$("#Id").data("attribute");
function myFunction(){
alert($("#button1").data("sample-id"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>

var id = $(this).dataset.id
works for me!

I use $.data:
//Set value 7 to data-id
$.data(this, 'id', 7);
//Get value from data-id
alert( $(this).data("id") ); // => outputs 7

Using jQuery:
$(".myClass").load(function() {
var myId = $(this).data("id");
$('.myClass').attr('id', myId);
});

Try
this.dataset.id
$("#list li").on('click', function() {
alert( this.dataset.id );
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<ul id="list" class="grid">
<li data-id="id-40" class="win">
<a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
<img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id >>CLICK ME<<" />
</a>
</li>
</ul>

for pure js
let btn = document.querySelector('.your-btn-class');
btn.addEventListener('click',function(){
console.log(this.getAttribute('data-id'));
})

The issue is you are not specifying the option or selected option of dropdown or list, Here is an example for dropdown, i am assuming a data attribute data-record.
$('#select').on('change', function(){
let element = $("#visiabletoID");
element.val($(this).find(':selected').data('record'));
});

For those looking to dynamically remove and re-enable the tooltip, you can use the dispose and enable methods. See .tooltip('dispose').

HTML 5 introduced dataset: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset, the browser compa
But for older browser you can use getAttribute method to get the data-* attributes.
const getDataAttr = (id) => {
if(currentNode.dataset) return currentNode.dataset[id];
return currentNode.getAttribute("data-"+id);
}
The reason to use dataset is constant lookup time, get attribute would not be a constant time lookup, it'll go through all the attributes of the html element and then return the data once it'll find the exact attribute match.
The reason to provide this answer is that nobody mentioned about the browser compatibility and lookup time with the given solution, although both of these solutions are already given by people.

I have a span. I want to take the value of attribute data-txt-lang, which is used defined.
$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});