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);
});
});
Related
I am getting trouble to make a click function for multiple divs which have same rel value.
JavaScript:
$("[rel=begenici]").click(function () {
var postu = $(this).attr(id);
alert(postu);
});
HTML:
<div rel='begenici' id='2654'></div>
Where am I doing a mistake?
You need to wrap the attribute name in quotes
var postu = $(this).attr('id');
Complete Code:
$("[rel='begenici']").click(function () {
var postu = $(this).attr('id');
alert(postu);
});
You missed the single quotes
$("[rel='begenici']").click(function () {
var postu = $(this).attr('id');
alert(postu);
});
And not just one the first line (Thanks Tushar :))
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;
});
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.
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;
});
});
I want get the id of the element that is clicked and within a specified class, and want to print the ID.
Here is my JS , I am really new JS , Please help
$('.wrapinner').click(function(e) {
$('.wrapinner').css("margin-top","0");
$('.wrapinner').css("opacity","0.4");
$(this).css("margin-top","25px");
$(this).css("opacity","1");
var r= document.getElementById(this).attributes.toString();
document.write(r);
});
There are two ways to do this:
1) Done without jQuery object (it is faster)
$(".wrapinner").click(function(){
//Your Code
var id = this.id;
document.write(id);
});
OR
2) Done with jQuery object:
$(".wrapinner").click(function(){
//Your Code
var id = $(this).attr('id');
document.write(id);
});
NOTE after jfriend00's comment.
Use document.write() if really needed and is not harmful to your page OR use console.log(). Read Why is document.write considered a "bad practice"?
You can call the native javascript object directly; this.id.
$('.wrapinner').click(function(e) {
$('.wrapinner').css("margin-top","0").css("opacity","0.4"); // chained these two
$(this).css("margin-top","25px").css("opacity","1"); // chained these two
var r = this.id; // this should already reference the correct element.
document.write(r);
});
Try this way :
$('.wrapinner').click(function(e) {
console.log(this.id);
});
You are not passing id to getElementById, rather you are passing the object it self. You can get id of source object of event using this.id not by this.
Change
var r= document.getElementById(this).attributes.toString();
To
var r= document.getElementById(this.id).attributes.toString();
Just write
document.write(this.id)
$(".wrapinner").click(function(){
var id = this.id
});
Try this example:
<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>
<script>
$('.rows').each(function () {
var ar = this.id;
console.log(ar);
});
</script>
You can check this code..
$('.wrapinner').click(function(e) {
var getID = $(this).attr('id');
alert(getID);
});
Try this:
$('.wrapinner').click(function(e) {
$('.wrapinner').css("margin-top","0");
$('.wrapinner').css("opacity","0.4");
$(this).css("margin-top","25px");
$(this).css("opacity","1");
var id = $(this).attr('id');
});
I am capturing click event on class and then finding its id and class name using parent().
demodemo
$(document).ready(function(){
$('.class-first ul li, .class-second ul li, .class-third ul li').on('click',function(){
console.log("child :"+$(this).attr('id') + " Parent:"+$(this).parents().eq(1).attr('class'));
});
})