Onclick get element id result undefined jquery - javascript

I know this will mark as duplicate.. but i already try looking other post even i ask Mr. Google but i totally confuse.. i try use every sample on post but seems not all work..
What i'm trying to archive is.. when i click button jquery will show button id on alert popup. But i always got result undefined.
Here my sample code
PHP
<button class="myButton" name="testResultByName" data-value="testResultByDataValue" id="testResultByID">Click</button>
JQUERY and i put this code right before closing body </body> tag and already try on top right before closing head </head> tag
<script type="text/javascript">
$('.myButton').click(function(event){
var myButtonVar = $(this).prop('data-value');
alert(myButtonVar);
event.preventDefault();
});
</script>
I already try to use
$(this).prop('id');
$(this).prop('name');
$('.myButton').attr('data-value');
$('.myButton').attr('id');
$('.myButton').attr('name');
nothing work.. but if i use class like below it's work...
$('.myButton').prop('class');
then alert show class name "myButton" seems work.. i already use external jquery file too.. but nothing work.. already use ready() too but result still same..
did i miss something? oh and i use jquery-1.11.3.js

You $.data instead of .prop, like so
$('.myButton').click(function(event){
var myButtonVar = $(this).data('value');
var buttonId = $(this).attr('id');
console.log(myButtonVar);
console.log(buttonId);
});
Example

You get the value from the attr().
Please see the example code for the same
$(document).ready(function(){
$('.myButton').click(function(event){
var myButtonVar = $(this).attr('data-value');
alert("data-value = "+myButtonVar);
myButtonVar = $(this).attr('id');
alert("id = "+myButtonVar);
myButtonVar = $(this).attr('name');
alert("name = "+myButtonVar);
myButtonVar = $(this).attr('class');
alert("class = "+myButtonVar);
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="myButton" name="testResultByName" data-value="testResultByDataValue" id="testResultByID">Deposit</button>

Try this:
$('.myButton').on('click', function(){
var btnValue = $(this).attr('data-value');
alert(btnValue);
return false;
});

Related

How to add a div tag at the same place after it is removed

I want to remove the headers befor i expor the data into excel, hide doesnt work because the data is still there, so i was using remove. but once removed, after the exporting to excel is completed i wanted to undo the removed headers for display.
<script type="text/javascript">
$("#btnExport").click(function(e) {
alert("");
$head=$('tr.header');
$div=$('#dvData')
$div.remove('tr.header');
alert();
window.open('data:application/vnd.ms-excel,' +encodeURIComponent($div.html()));
e.preventDefault();
});
</script>
i was trying to save the div object in a variable process on that variable div and send it, bt the div sent shows no changes!!
Just make a clone, remove whatever you want, and get the HTML
$("#btnExport").click(function(e) {
e.preventDefault();
var div = $('#dvData'),
clone = div.clone();
clone.find('tr.header').remove();
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( clone.html() ));
});
append saved variable to parent of the deleted div.
Add it before the target element...remove it post that...
$(function() {
$('#add').click(function(){
var div = $('div.toRemove');
var newDiv = $('<div/>').addClass('added').html('hello world');
//newDiv.prependTo(div);
div.before(newDiv);
this.disabled = true;
div.remove();
});
$('#reset').click(function(){
$('div').remove();
$(document.body).append($('<div/>').addClass('toRemove').html('toremove'));
$('#add').removeAttr('disabled');
});
});
Fiddle: http://jsfiddle.net/deostroll/wnu9pv9y/
First of all, You must use var for each variable such as $head and $div
You can use clone to achieve the desired result.
$("#btnExport").click(function(e) {
var $clonedDiv = $('#dvData').clone(true);
$clonedDiv.find("tr.header");
window.open('data:application/vnd.ms-excel,' +encodeURIComponent($clonedDiv.html()));
e.preventDefault();
});
</script>
use clone(true) to retain the events
As per understanding you first want to remove the header before export and then want to add to the table as it is. if i am properly understanding your requirement try the following
$("#btnExport").click(function (e) {
alert("");
$div = $('#dvData')
$divToRemain = $div.find('#TableId thead')
$div.find('#TableId thead').remove();
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($div.html()));
$divToRemain.appendTo('#tblHoliday');
e.preventDefault();
});
Here i save the removed header in the variable and after export i appended it to the table.
Hope this will help.

this reference in JavaScript

Today i was writing some basic stuff of java script mean while i encountered the problem. Although i was able to sort out the problem but could not find the reason of why this were not working. Here is my code
$('document').ready(function() {
$(this).click(function() {
var node1 = $(this);
a = node1.text();
console.log(a);
});
});
In this in the console i see empty string. But if i change the $(this).click(function{...}) to $('.some_class_name').click(function{.....}); than my code works fine and display the text value of the button i clicked.
I want to know what is wrong in the above code.
You must be looking for this, Use the e.target to get the text inside of the clicked element which is present inside the document.
$('document').ready(function () {
$(this).click(function (e) {
var node1 = $(e.target);
var a = node1.text();
console.log(a);
});
});
Try this code
Just change the this keyword to body
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
$('document').ready(function(){
$('body').click(function(){
var node1 = $(this);
a = node1.text();
console.log(a);
});
});
</script>
<body>
Test
</body>

Why is jQuery .click() is skipped over?

I have a small script of javascript which iterates over a set of checkboxes which grabs the name attribute and value and then convert it to json. Then I use that value to set the href of an element and then try to trigger a click.
For some reason everything seems to function properly except for the click. I successfully change the href, I console.log() a value before the .click() and after. Everything hits except for the click. The url in the href is value as I clicked it manually.
I have my script included just before the closing body tag and have it wrapped in $(document).ready(). and I do not have duplicate ID's (I viewed the rendered source to check)
Can anyone offer some insight on this?
Here is the javascript
$(document).ready(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var i = 0;
var list = new Array();
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var id = $(this).val();
list[i] = new Array(name, id);
i++;
});
var serList = JSON.stringify(list);
console.log(serList);
var webRoot = $("#webRoot").text();
$("#exportLink").attr('href', webRoot+"/admin/admin_export_multiExport.php?emailList="+serList); //hits
console.log('1'); //hits
$("#exportLink").click(); //this line never executes
console.log('2'); //hits
});
});
$(selector).click() won't actually follow the link the way clicking on it with your mouse will. If that's what you want, you should unwrap the jquery object from the element.
$(selector)[0].click();
Otherwise, all you're doing is triggering event handlers that may or may not exist.
I may guess you need
$(document).on('click', '#multiExport', function(e){
(you can replace document by a nearest element, if you got one).
if you need dynamic click event binding.
EDIT
I would try something like that :
$(document).ready(function() {
$("#exportLink").click(function() {
window.location = $(this).attr('href');
});
$("#multiExport" ).on('click', function(e){
//whatever you want
$('#exportLink').attr('href', 'something').trigger('click');
});
});
$("#exportLink").click(); // this would launch the event.
I must admit I am very surprised that the .click() does not work.
If the idea is to load the page, then the alternative is
$(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var list = [];
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var val = $(this).val();
list.push([name, val]);
});
var serList = JSON.stringify(list);
var webRoot = $("#webRoot").text();
location=webRoot+"/admin/admin_export_multiExport.php?emailList="+serList;
});
});

Why doesn't this click handler work in JQuery?

I've got the following code in my page:
var offer_link = $('<a>').addClass('fc-offer-link');
offer_link.click(function() {
alert('Hello');
});
offer_link.attr('href', "#" + this.id);
offer_link.append(this.subject);
this.list_item = $('<li>');
this.list_item.append(offer_link);
But even though the link appears on the page, the handler never gets called. What's going on?
The problem turned out to be where the item got inserted into the DOM. It was being inserted using:
$('#my_list').html(my_new_list.html())
It should have been using:
$('#my_list').replaceWith(my_new_list)
I think you just need to append the link to an element, like this:
<script type="text/javascript">
$(function(){
var link = $("<a>Click Me!</a>").addClass("fc-offer-link").appendTo($("#div1"));
if (link){
link.click(function(){
alert("Hey there!");
});
}
});
</script>
<div id="div1"></div>
EDIT: Not sure why I was downvoted, but here's a jsFiddle

Get last ID of dynamic div

Couldn't find an answer, but Im trying to get the last ID of the last div that was created on the page. The code I'm using doesn't seem to work using .last(). My syntax is probably wrong but I can't get it to show the ID.
jQuery(document).ready(function()
{jQuery("a.more_posts").live('click', function(event){
jQuery("div[id^='statuscontainer_']").last();
var id = parseInt(this.id.replace("statuscontainer_", ""));
alert(id);
});
});
I figured out to do it this way and this worked.
jQuery(document).ready(function(){
jQuery("a.more_posts").live('click', function(event){
jQuery("div[id^='statuscontainer_']:last").each(function(){
var id = parseInt(this.id.replace("statuscontainer_", ""));
alert(id);
});
});
});
The this.id is going to give you the id of the link that was clicked. I think you want the id of the last container.
jQuery(document).ready(function() {
jQuery("a.more_posts").live('click', function(event){
var lastContainer = jQuery("div[id^='statuscontainer_']").last();
var id = parseInt(lastContainer.attr('id').replace("statuscontainer_", ""));
alert(id);
});
});

Categories