How to send multiple data in AJAX call through PHP?
Question
I am trying to send in multiple data where I am clicking on a couple of links back to back. Now here is the thing.
I have a 'share' link which if I click on gets the attribute as
$(".file").click(function(){
var elementFile = $(this);
var id = elementFile.attr("name");
});
Next, clicking on this link opens up a div (popDiv_share), which lists all the users from the database. Now if I click on any one of the user, I get its attribute just as above using:
$(".userlist").click(function(){
var elementuser = $(this);
var id = elementuser.attr("id");
});
Now what I am stuck with is say, I click on the first link, it gets the atrribute. Now when I click on the second link from the div, it gets the attribute too, but then the first link attribute is gone. How do I get both the attributes of each of the links even after clicking them back to back, since $(this) will only refer to the current link being clicked and the previous one will be lost.
Any suggestions would be of great help!!
Here is my code:
<?php
session_start();
$user_id = $_SESSION['uid'];
include('db.php');
$sql = "SELECT * from registered_users";
$query = mysql_query($sql) or die(mysql_error());
$result = mysql_query("SELECT * FROM user_files_public where uid = $user_id");
?>
<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="ajax-jaquery.js"></script>
<script type="text/javascript">
$(function(){
$(".file").click(function(){
$(".userlist").click(function(){
var elementUser = $(this);
var elementFile = $(".file").$(this);
var name = elementUser.attr("id");
var id = elementFile.attr("name");
var info='name='+name+'&id='+id;
$.ajax({
type: "POST",
url: "share.php",
data: info,
success: function(){
}
});
$(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
return true;
});
});
});
</script>
<style>
.ontop_share {
z-index: 999;
width: 900px;
height: 900px;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: 1.9;
filter: alpha(opacity = 50);
}
#popup_share {
width: 900px;
height: 900px;
position: absolute;
color: #000000;
border: 2px solid red;
background-color: #ffffff;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
}
function hide(div) {
document.getElementById(div).style.display = 'none';
}
</script>
</head>
<body>
<div id="popDiv_share" class="ontop_share">
<div id="popup_share">
<?php
while($row = mysql_fetch_array($query)){
$id = $row['id'];
$name =$row['first_name'];?>
<a href="" class="userlist" id="<?php echo $id;?>"><?php echo $id.' '.$name;?></a><?php
echo '<br/>';
}
?>
</div>
<a href="#" onClick="hide('popDiv_share')">Close</a>
</div>
<table id="repos" align="center" cellspacing="20px">
<thead>
<tr>
<th>File name</th>
<th>Share</th>
</tr>
</thead>
<?php
while($row = mysql_fetch_array($result)) {
$id=$row['id'];
$user_id = $row['uid'];
$filename =$row['user_file_name'];
?>
<tbody>
<tr>
<td id ="actions"><?php echo $filename; ?></td>
<td id ="actions">
<a name="<?php echo $filename;?>" class="file" href="#" onClick="pop('popDiv_share')">Share</a>
</td>
</tr>
</tbody>
<?php
}
?>
</table>
</body>
</html>
4 answers
solution1
2 2016-03-18 05:45:49
Use a global variable:
var name;
$(".file").click(function(){
var elementFile = $(this);
name= elementFile.attr("name");
});
$(".userlist").click(function(){
var elementuser = $(this);
var id = elementuser.attr("id");
$.ajax({
type: "POST",
url: "share.php",
data: {
name: name,
id: id
},
success: function(){
}
});
});
or traverse the DOM:
$(".userlist").click(function(){
var elementuser = $(this);
var id = elementuser.attr("id");
var name = $(this).closest('#popDiv_share').next('#repos').find('.file').attr("name");;
$.ajax({
type: "POST",
url: "share.php",
data: {
name: name,
id: id
},
success: function(){
}
});
});
solution2
1 2016-03-18 06:18:04
$(".file").click(function(){
var elementFile = $(this);
$(".userlist").click(function(){
var elementUser = $(this);
var name = elementUser.attr("id");
var id = elementFile.attr("name");
var info='name='+name+'&id='+id;
I think this will work
solution3
0 2016-03-18 05:50:31
You don need to use & do something like
$.ajax({
type: "POST",
url: "share.php",
data: {
name: name,
id: id
},
success: function(){
}
});
hope it helps :)
solution4
0 2016-03-18 05:53:43
You can have a global variables attached to window , so you can reach them any time:
window.id;
$(".file").click(function(){
var elementFile = $(this);
window.id = elementFile.attr("name");
});
Once second link is clicked you can take that global variable and you it.
$(".userlist").click(function(){
var id = window.id;
// rest of code
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.