hi i am newbie in jquery...
i have few anchor link in my project...
Remove1
Remove2
Remove3
Remove4
function dele()
{
fid= //here i want id of that element which called it
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
for example
if i click on Remove1 then i want it's id say 1,
if i click on Remove2 then i want it's id say 2 and so on...
i tried to do this by $(".delete").click() but i can't use it because it's causing problem for my project...
here id i am generating through database...
can you suggest how can i get id???
Thanks in advance..
Try this
Remove1
Script
function dele(id)
{
fid= id //here your id
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
DEMO
Seen as you're using jQuery for your logic, why not use it to bind events and separate JS from the HTML entirely? Try this:
Remove1
Remove2
Remove3
Remove4
$('.delete').click(function() {
fid = this.id; // this = the element which was clicked on
$.ajax({
url : 'ajax.php',
data : { delet: 'delet', fid: fid },
type : 'POST',
success : function(data) {
$("#showform").html(data);
alert(data);
}
});
});
i can't use $(".delete").click()... bcz it's affecting my functionality when i get back response from php file.. i was using this same but after i seen that my functionality is not working if i am using this way
If you are appending the .delete elements after the DOM has loaded, you need to amend the above to use a delegated selector:
$(document).on('click', '.delete', function() {
// rest of the code...
});
Try like
function dele()
{
var fid= $(this).attr('id');
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
Or even you can send the id directly form the caller function like
Remove4
Try this
Remove1
Remove2
Remove3
Remove4
function dele(element)
{
fid= element.id;
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
instead of only id if u pass the element u can get some other properties of the element also.
Related
I have a PHP file which puts out all orders in the system and adds the custom attribute oid (order-id) to all the links. My links look like:
<a href='#' class='completeOrder' oid='$order_id'>$status</a>
Which gives correct html, when I do inspect element I get this
<a href='#' class='completeOrder' oid='8'>Un-completed</a>
What I would like to do is when this link is clicked, spawn a form with checkboxes and a submit button with the correct order ID in it's html to send. So I can send the form and the order id to another PHP file for processing ( in this case updating the order status ).
What I am doing to spawn the form with the checkboxes is using a jQuery AJAX call, but when I try to alert the order ID to check if jQuery got the oid correctly it tells me its undefined... :
$("body").delegate(".completeOrder", "click", function(event) {
event.preventDefault();
getCompleteOrderTools();
$(".content").toggleClass("hidden");
$('div.hidden').fadeIn(800).removeClass('hidden');
$("#notifications-drop").toggleClass('hidden');
});
function getCompleteOrderTools() {
var o_id = $(this).attr('oid');
alert(o_id);
$.ajax({
url: "action.php",
method: "POST",
data: {
getCompleteOrderTools: 1,
orderId: o_id
},
success: function(data) {
$(".row").append(data);
},
});
}
Your main issue was that you are referencing this in wrong context as the this available in your function getCompleteOrderTools is different that this that you wanted to refer for the click event of your desired link.
You have 2 options :
either use jQuery(this).attr('oid');
Or
use jquery data attributes
<a href='#' class='completeOrder' data-oid='$order_id'>$status</a>
jQuery(this).data('oid');
So your code with .attr will look like :
$("body").delegate(".completeOrder", "click", function(event) {
event.preventDefault();
var myThis = $(this);//This is the 'this' corresponding to the link clicked
getCompleteOrderTools(myThis);
$(".content").toggleClass("hidden");
$('div.hidden').fadeIn(800).removeClass('hidden');
$("#notifications-drop").toggleClass('hidden');
});
function getCompleteOrderTools(myThis) {
var o_id = myThis.attr('oid');
alert(o_id);
$.ajax({
url: "action.php",
method: "POST",
data: {
getCompleteOrderTools: 1,
orderId: o_id
},
success: function(data) {
$(".row").append(data);
},
});
}
The jQuery object ain't passed to your function. You should do the following:
$("body").delegate(".completeOrder", "click", function(event) {
event.preventDefault();
getCompleteOrderTools(jQuery(this));
$(".content").toggleClass("hidden");
$('div.hidden').fadeIn(800).removeClass('hidden');
$("#notifications-drop").toggleClass('hidden');
});
function getCompleteOrderTools(_this) {
var o_id = _this.attr('oid');
alert(o_id);
$.ajax({
url: "action.php",
method: "POST",
data: {
getCompleteOrderTools: 1,
orderId: o_id
},
success: function(data) {
$(".row").append(data);
},
});
}
By passing jQuery(this) to your function, you now have full access to the jQuery object from your click event.
I'm attempting to first make an AJAX request from a social API and append the results with a button inside the div that will save the corresponding item in the array to my firebase database. For example,
I have my AJAX request - I cut out about 75% of the actual code that isn't needed for the question.
$.ajax({
type : 'GET',
url : url,
dataType : "jsonp",
cache: false,
success : function(data){
console.debug(data);
vids = data.response.items;
for(var i in vids) {
dataTitle = vids[i].title;
ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase()'>Save</button></div>";
$('#content').append( ncode )
And then I have my function that I want to save the 'title' of the object the button was appended with to the firebase database.
var dataTitle;
function saveToDatabase() {
ref.push({
title: dataTitle
});
}
The issue is that when the button is clicked it posts a random title from inside the array instead of the title of the item the button was appended with... How can I bind the buttons function to the correct dataTitle?
I'm not sure if that makes sense so please let me know if clarification is needed. Thanks in advance for any help you can provide!
This fails because you are iterating the entire list and assigning them to a global variable. The result is not random at all--it's the last item in the list, which was the last to be assigned to the globar variable.
Try using jQuery rather than writing your own DOM events, and utilize a closure to reference the video title.
function saveToDatabase(dataTitle) {
ref.push({
title: dataTitle
});
}
$.ajax({
type : 'GET',
url : url,
dataType : "jsonp",
cache: false,
success : function(data) {
console.debug(data); // console.debug not supported in all (any?) versions of IE
buildVideoList(data.response.items);
}
});
function buildVideoList(vids) {
$.each(vids, function(vid) {
var $img = $('<img></img>');
$img.attr('src', sanitize(vid.title));
var $button = $('<button class="btn">Save</button>');
$button.click(saveToDatabase.bind(null, vid.title));
$('<div class="tile"></div>')
.append($img)
.append($button)
.appendTo('#content');
});
}
// rudimentary and possibly ineffective, just here to
// point out that it is necessary
function sanitize(url) {
return url.replace(/[<>'"]/, '');
}
I actually just ended up passing the index to the function by creating a global array like so. It seems to be working fine... any reason I shouldn't do it this way?
var vids = []; //global
function foo() {
$.ajax({
type : 'GET',
url : url,
dataType : "jsonp",
cache: false,
success : function(data){
console.debug(data);
vids = data.response.items;
for(var i in vids) {
ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase('+i+')'>Save</button></div>";
$('#content').append( ncode )
} //end ajax function
function saveToDatabase(i) {
ref.push({
title: vids[i].title
});
}
I have a Like button. When the button is clicked one record is inserted into the DB via Ajax. If the insert is successful I change the name of the button to Unlike.
In the page I have 10+ like button and I want to select the clicked button.
I'm trying Using $(this) but that's not working for this specific code.
Here is the code.
$('.content').on('click', '.like_music', function(){
var music_id = $(this).parents('.music-item').attr('id');
$.ajax({
type:'POST',
url:'add_like_music.php',
data:{'music_id':music_id},
success:function(data){
alert(data);
if (data == "YES"){
$(this).html('unlike')
}
}
})
What am I doing wrong?
Use context option of ajax method:
$.ajax({
context: this,
...
});
$(this) is accessible inside the function itself, but not in the callback. You could store it in a variable outside the ajax call:
$('.content').on('click','.like_music',function(){
var $this = $(this);
var music_id = $this.parents('.music-item').attr('id');
$.ajax({
type:'POST',
url:'add_like_music.php',
data:{'music_id':music_id},
success:function(data){
alert(data);
if(data=="YES"){
$this.html('unlike');
}
}
});
try this code:
$('.content').on('click','.like_music',function(){
var music_id = $(this).closest('.music-item').attr('id');
^-----i change this
$.ajax({
type:'POST',
url:'add_like_music.php',
data:{'music_id':music_id},
success:function(data){
alert(data);
if(data=="YES"){
$this.html('unlike');
}
}
});
Can someone please help me with this code?
It changes the class, but no data is sent to the server. I Do not get any errors too.I think i might have messed up the var (declaration ) or the html
Here is the html
<a class="reg" id="<?php echo $pID?>" href="#">Registrate</a>
Here is the script
<script>
$(document).ready(function(){
$('a').click(
function(){
if ($(this).hasClass('reg')){
$(this).removeClass('reg').addClass('done').text('done');
var datasend = $(this).html();
$.ajax({type:"POST", url:"data/update.php", data: 'id='+datasend, success:function(result){
}});
}
});
});
</script>
Replace this :
var datasend = $(this).html();
with
var datasend = this.id;
Also send your data as an object, which will remove the need for the datasend variable.
$.ajax({
url : '/url',
type : "POST",
data : {
id : this.id
}
});
replace
data: 'id='+datasend
with
data:{ id : datasend }
Replace:
$.ajax({type:"POST", url:"data/update.php", data: 'id='+datasend
With:
$.ajax({type:"POST", url:"data/update.php", data: {'id' : datasend}
I'm new to jQuery AJAX. I want to build bookmarking system something like Twitter do (favorites). I have a lot of links. So it's not useful to write AJAX request for each link. That's why I want use just one request script for all links.
Let's say I have the links something link this:
<i class="icon-star-empty"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
So I want to write AJAX request that do something like this when user clicks to one of those URLs.
if (class="icon-star-empty"){
ajaxURL = "/insertBoomark"
} else{
//it means class=icon-start
ajaxURL = "/deleteBookmark"
}
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID}, // I don't know how to get linkID too :(
success: if class was icon-star empty then change it to icon-star-empty else change it to icon-star
});
I know that is not correct syntax.
How can I solve this problem? Please help :(
Thanks in advance.
$("i").on("click", function() {
if ( $(this).hasClass("icon-star-empty") ){
ajaxURL = "/insertBoomark"
} else{
//it means class=icon-start
ajaxURL = "/deleteBookmark"
}
var linkID = $(this).parent().prop("id");
var obj = $(this);
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID},
success: function() {
obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
}
});
})
You can also use the href attribute and just prevent the default action from the jquery event.
html
javascript
$(function(){
$(document).on('click','a',function(e){
e.preventDefault(); //prevent default click action
var $this = $(this); // keeps "this" accessable
var ajaxURL = $this.attr('href'); // get the url from the "a" tag
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID},
success: function() {
if($this.hasClass("icon-star"))
$this.removeClass("icon-star").addClass("icon-star-empty");
else
$this.removeClass("icon-star-empty").addClass("icon-star");
}
});
});
});
$('a').click(function(){
var _ajaxURL,
_self = $(this);
if($(this).hasClass('icon-star-empty')){
_ajaxUrl = "/insertBookmark";
}else{
_ajaxUrl = "/deleteBookmark";
}
$.ajax({
url: _ajaxUrl,
type: 'POST',
data: {id : $(this).prop('id')},
success: {
//I have no idea what you want to do right here.
}
});
});
Okay, first, class is a reserved name in javascript.
Secondly, if you're doing it with a jQuery.click function, then you can just do $(this).attr('id') to get the id.
Also, for the success part, you seem to be confused about javascript's function syntax. What exactly are you trying to do?