We Keep Coding

Obtain element id without clicking

I am wondering if there is a way to get element id without clicking. I have data inside the divs that needs updating and printing. I can do exactly what I want by clicking the div. The data gets updated, printed, and disappears until the next div shows up. This is jQuery I am using.
$(document).ready(function(){
$('.store').click(function(){
the_id =$(this).attr('id');
$(this).fadeOut('slow');
$.ajax({
type: 'POST',
url: "update.php",
data:{id:the_id},
success:function(){
print_div();
}
});
});
});
So is there a way to tweak that .click function so that the data automatically gets updated, printed, and disappear without the actual clicking?

You can loop through the divs on document ready. I don't know if this is exactly what you are asking, but this way, you will know the ID of the elements without user interaction.
$(document).ready(function() {
$('.store').each(function() {
var the_id = $(this).attr('id');
$(this).fadeOut('slow');
$.ajax({
type: 'POST',
url: "update.php",
data: {
id: the_id
},
success: function() {
print_div();
}
});
});
});

In short, no.
JavaScript relies on events - whether timed or created by an interaction (forced or organic) to add methods to the call stack. If you'd like, you can trigger an event (a forced event) using jQuery's trigger method on an event. On the other hand, you can set up a timer using setInterval (a regular action) or setTimeout (a delayed action) to trigger the event. Other than that, you have to rely on the user interaction to trigger events.
You could get clever on what triggers the callback function to the click method - you can look at the user's mouse or scrolling behavior and reload the element or even on some sort of keyboard event. It's really a matter of what will provide the best user experience in your context.
Here is some boilerplate to help:
$(document).ready(function(){
$('.store').click(storeHandler);
$('#someOtherElement').on('event', storeHandler);
setTimeout(storeHandler, 1000);
});
function storeHandler(event) {
var theElement = $(event.target); // the event object is very useful
var theId = theElement.attr('id');
theElement.fadeOut('slow');
$.ajax({
type: 'POST',
url: "update.php",
data:{id:the_id},
success:function(){
print_div();
}
});
}
The goal is to let you replicate the behavior given some event.

jQuery .click() not working on dynamic objects added with AJAX

I have a page that displays a button up top with id=button-link. Just after the button there's another div with id of display-content. Upon clicking the button, I'm making an AJAX call that pulls up some content and displays it in the second div. Here's the JavaScript code that I'm using:
$('#button-link').click(function(event) {
event.preventDefault();
$.ajax({
url: 'site/someAction',
success: function(result) {
$('#display-content').html(result);
}
});
});
$('#secondButton').click(function(event) {
event.preventDefault();
$.ajax({
url: 'site/anotherAction',
success: function(result) {
$('#display-content').html(result);
}
});
});
This works exactly as intended and I'm loading some text and HTML elements in the #display-content div. One of those elements is another button with id #secondButton. When the user clicks that second button, I want to make another AJAX call to a different place and pull different content to display in the #display-content div. This, however, does not work. The jQuery script is on the page, it's loading correctly and the HTML elements are also properly displayed on the page after the first AJAX call but it seems that the #secondButton is not part of the DOM and the click events are not triggered when clicked upon it.
Any idea what is going wrong and how can I register click events for this dynamically added button?

You need to use event delegation.
Note: If the element #secondButton can be added multiple times, this doesn't work. You need to use class for that situation.
For jQuery 1.7 and +
$(document).on('click','#secondButton',function(event) {
event.preventDefault();
$.ajax({
url: 'site/anotherAction',
success: function(result) {
$('#display-content').html(result);
}
});
});
For versions before jQuery 1.7
$(document).delegate('#secondButton', 'click',function(event) {
event.preventDefault();
$.ajax({
url: 'site/anotherAction',
success: function(result) {
$('#display-content').html(result);
}
});
});

Get attr when call function inside html

I have function:
function delMeh() {
console.log('prolazi klik');
var did = $(this).attr('data-value');
$.ajax({
url: "delTmeh.php",
type: "POST",
async: true,
data: { vrednostid:did}, //your form data to post goes here as a json object
dataType: "html",
success: function(data) {
$('#tablemeh').dataTable().fnDestroy();
drawMeh();
},
error: function(data) {
console.log(data);
}
});
}
and HTML:
<i data-value="32" onclick="delMeh();" class="fa fa-times delMeh"></i>
SO, on click I need to delete row 32 from database, but how I can get data-value of clicked element...
I try with:var did = $(this).attr('data-value'); inside delMeh() function but dont work.
How to get attr data-value of clicked element when call function like I need to do?

Why do u need the data value, when using a inline function click?
You could directly pass the value as a parameter to the function.
function delMeh(value) {
// do your stuff
}
<i onclick="delMeh(32);" class="fa fa-times delMeh"></i>
This would work good, but I seriously doubt the usage of this in a inline function call, as it could be used when a element's event is binded using jquery event listener.
Then you can use $(this).data('value')
I hope this helps.

function delMeh() {
console.log('prolazi klik');
var did = $(this).attr('data-value');
alert(did);
}
$(".delMeh.fa.fa-times").click(delMeh);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i data-value="32" class="fa fa-times delMeh">test</i>
This uses the more standard addEventListener. AddEventListener allows for multiple events of the same type and passes the this argument to the function. It also prevents the overwriting of the inline events.

Send the element on the onclick method
onclick="delMeh(this);"
and receive the element on your function
function delMeh(element) {
// than you can get the value with
var did = $(element).attr('data-value');
// or
var did = $(element).data('value');
}
Or you could do it the jQuery way, by binding the on click handler on your html elements like this:
$(".delMeh").click(function() {
// here you could use this
var did = $(this).attr('data-value');
});
where you won't need to set the inline onclick attribute on each element.
Check this question to understand the difference between .attr vs. .data.

You really should avoid using inline event handlers with jQuery as others mention. The reason include getting new jQuery bubbling functionality and not separating the event registration code from the event handling code.
It sounds like your elements are created dynamically, which is probably why your previous attempt at using .on failed (mentioned in your comments). That also means none of the other suggestions will work as-is.
Instead use a single delegated event handler, attached to a non-changing ancestor element. document is the default if nothing else is closer/convenient. In your case the better element might be $('#tablemeh').on(..., but I would need to see a sample of your page's HTML.
A delegated event handler listens for the event (in this case click) to bubble up to the element, then it applies the jQuery selector. Then it calls your function only on the matching elements that caused the event. That means the elements only have to exist/match at event time.
Also, use data as a short-cut to fetch attributes with a data- prefix.
So instead of your existing code, just use something like this:
$(document).on('click', '.delMeh', function(){
var did = $(this).data('value');
$.ajax({
url: "delTmeh.php",
type: "POST",
async: true,
data: { vrednostid: did },
dataType: "html",
success: function(data) {
$('#tablemeh').dataTable().fnDestroy();
drawMeh();
},
error: function(data) {
console.log(data);
}
});
});

Javascript on click event not working within a function but works in document.ready()

Inside my document.ready(), I have a few buttons (a, b, c) and when clicked they call a specific method. However, when I click on button (d), I need buttons (a,b,c) to stop calling their specific methods and do nothing when clicked. I tried using the preventDefault() method, but it did not work. Someone please help! Thanks in advance :)
$(document).ready(function(){
...
// my buttons (a,b,c) which call method fA
$("#a, #b, #c").on("click", fA);
// my button (d) which call method fB
$('#d').on("click", fB);
...
});
// When button (d) is clicked, I want buttons a,b,c to be non-clickable and this method should not be called.
function fA() {
// does a AJAX request
$.ajax({
url: ...,
data: ...,
dataType: "script"
});
}
function fB() {
$("#a, #b, #c").on("click", function(e) {
e.preventDefault(); // THIS IS NOT WORKING!
});
...
//Does its own unique AJAX request
}

When you call .on(), event handlers are not replaced — they're added. Any element may have many event handlers for the same event. You're successfully adding new "click" handlers, but the old ones are still there too.
You can use .off() to remove all handlers for a particular event.
$('#a, #b, #c').off("click");
If you want some existing handlers to be temporarily disabled, you can either set the "disabled" property directly on the elements involved (provided they're the right kinds of elements), or else use some flagging mechanism of your own.
As an example of "flagging" to know when the handlers should/shouldn't operate, you can use a class:
function fA() {
if ($(this).hasClass('inactive')) return;
// does a AJAX request
$.ajax({
url: ...,
data: ...,
dataType: "script"
});
}
function fB() {
$("#a, #b, #c").addClass('inactive');
// ...
When you want the "A" function to start working again, you can just remove that class:
$('#a, #b, #c').removeClass('inactive');

Change function fB to:
function fB() {
$("#a, #b, #c").off("click");
...
//Does its own unique AJAX request
}

Reload Ajax/Javascripts afer .html() data load

So I have a page that loads the data into the page through the following ajax function.
$(document).ready(function(){
function loadData(page){
$.ajax
({
type: "POST",
url: "inc/load_data.php",
data: "p="+page+"XXXXXXXXXXX",
success: function(msg)
{
//alert(msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
//**MODIFIED CODE
$(document).delegate('a.vote_up','click', f_vote_up);
});
}
});
}
});
//Loaded Message
$msg.='<span class="vote_buttons" id="vote_buttons'.$row['id'].'">
</span>';
The message that is loaded has some links that need to work with a another Ajax function(given below), which is apparently not working. The second function(below) is loaded before the data is loaded into the page. I suspect, may be since this function is loaded way before the data is loaded, the second function is not recognizing the click on vote_up. Is there any way to fix it??? I'm not too familiar with AJAX, I would really appreciate some help.. Thank you
$(function(){
$("a.vote_up").click(function(){
//get the id
alert("Hi");
//REST OF THE CODE
}
//***NEW FUNCTION
function f_vote_up(){
//get the id
the_id = $(this).attr('id');
//REST OF THE CODE
$("span#vote_buttons"+the_id).html("Hello, Testing Response!");
alert("End of Func!"); // <
}

When you call that second function, it's only grabbing all the a.vote_up elements that currently exist on the page. When you add more links to the page later on, they don't know to listen for the click.
You can do one of two things to fix this:
Add the click listener to each new link when you add it to the DOM. But this is a bit of work, because you'd have to change how your AJAX function builds the links, and you'd have to turn that click-listener-assigning function into something standalone that you could use at any time.
Instead of doing using the click method, use the delegate method instead:
$(document).delegate('a.vote_up', 'click', function () { ... });
More info on event delegation with jQuery.

you should bind your click event after you load the html
$.ajax
({
type: "POST",
url: "inc/load_data.php",
data: "p="+page+"XXXXXXXXXXX",
success: function(msg)
{
//alert(msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
$("a.vote_up").click(function(){
//get the id
alert("Hi");
//REST OF THE CODE
});
});
}
});

You can use the live function to bind an event to dynamically created elements, i.e.:
$("a.vote_up").live('click', function(){
//get the id
alert("Hi");
});
http://api.jquery.com/live/
This will effectively bind this click event to all elements which match the a.vote_up selector, now and in the future.