I have created a toggle button with jquery but I need to pass my $id so it can execute the mysql in toggle_visibility.php.
How do I pass my variable from my <A> tag ?
<a class="toggleVisibility">Yes</a>
<script>
$("a.toggleVisibility").toggle(
function () {
$(this).html("No");
},
function () {
$.ajax({
type: "POST",
url: "toggle_visibility.php",
data: "id<?=$id; ?>",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
$(this).html("Yes");
}
);
</script>
It looks like $id is a PHP variable so when the server generates your page it will be printed at the right spot.
But you are missing a = in the string:
data: "id=<?= $id ?>",
If this is not what you want you have to clarify where $id comes from.
Update:
You have to integreate the ID somehow in the table row. E.g. you could set is as rel attribute for the link:
<tr>
<td class="date"><?php print $row['date']; ?></td>
<td><?php print $row['title']; ?></td>
<td class="visible">
<a class="toggleVisibility" rel="<?php echo $row['id']; ?>">Toggle</a>
</td>
</tr>
then you can fetch it in the function with jQuery's attr() method:
$("a.toggleVisibility").toggle(
function () {
$(this).html("No");
},
function () {
$.ajax({
type: "POST",
url: "toggle_visibility.php",
data: "id=" + $(this).attr('rel'),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
$(this).html("Yes");
}
);
Related
I usually figure things out for myself but this one is giving me a really difficult time. I need to change the text value of a button in a table that is created by php from a database, after it gets clicked on.
<td id="order_num"><?php echo $order -> order_num; ?></td>
<td><?php echo $order -> data; ?></td>
<td><?php echo $order -> data; ?></td>
<td><?php echo $order -> data; ?></td>
<td><?php echo $order -> data; ?></td>
<td><?php echo $order -> data; ?></td>
<td><?php echo $order -> data; ?></td>
<td><?php echo $order -> data; ?></td>
<!-- **** this is the button. ******** -->
<td><button type="submit" class="accept_order" id ="row_<?php echo $order -> order_num; ?>"
data-row_id = "row_<?php echo $order -> order_num; ?>" data-current_user = "<?php echo $user_id; ?>"
data-order_num = "<?php echo $order -> order_num; ?>">Accept</button>
here is the big mess of an ajax call
$(document).ready(function () {
$('.shop').on('click', 'button', function(e){
var button = $(this).find('button'); //trying to put the value of the current button in a variable to pass to the ajax function.
var current_user = $(this).closest('.shop').find('.accept_order').data('current_user');
console.log(current_user);
var row_id = $(this).closest('.shop').find('.accept_order').data('row_id');
var accepted_order = $(this).closest('.shop').find('.accept_order').data('order_num');
console.log(accepted_order);
e.preventDefault();
$.ajax('url', {
type: "POST",
data: { order_id: accepted_order, user_id: current_user },
success: function(msg){
console.log(msg);
console.log(this);
//change the text of the button to something like "accepted"
***************this is where I have problems ***********************
$(this).html('accepted'); or
$(this).closest('.shop').find('button').html(msg); or
button.text(msg);
},
error: function(){
$(this).closest('.shop').find('.accept_order').html("failure");
}
});
});
});
</script>
I did use $('button').html(msg);
but that changes all of the buttons. It seems like I lose scope to the object when inside the success function. Any ideas or help will be greatly appreciated. Thanks in advance.
I believe I found your problem source but I'm not sure. And The problem came from this keyword because this in the ajax function direct to the ajax object not the button node object. So you can use bind function in the success and error functions to make this directs to the button. here is the modification:
and another thing the url in ajax function is a variable not a string as you wrote above.
$.ajax(url, {
type: "POST",
data: { order_id: accepted_order, user_id: current_user },
success: function(msg){
console.log(msg);
console.log(this);
//change the text of the button to something like "accepted"
***************this is where I have problems ***********************
$(this).html('accepted'); or
$(this).closest('.shop').find('button').html(msg); or
button.text(msg);
}.bind(this),
error: function(){
$(this).closest('.shop').find('.accept_order').html("failure");
}.bind(this)
});
I'm not sure from the solution because there is no demo for what you asked about.
I hope it works.
Maybe you can use the class to select the button
$.ajax('url', {
type: "POST",
data: { order_id: accepted_order, user_id: current_user },
success: function(msg){
console.log(msg);
console.log(this);
//change the text of the button to something like "accepted"
***************this is where I have problems ***********************
$("button.accept_order").html(msg);
},
error: function(){
$(this).closest('.shop').find('.accept_order').html("failure");
}
});
or better..
var button = $(this);
and inside your ajax call just use:
button.html(msg);
I have a select box with onchange,
<select class="form-control" onchange="getval(this.value,'<?php echo $prd->pr_id;?>','ajax<?php echo $key?>','<?php echo $key ?>')">
and my ajax div is in foreach loop,
foreach($name as $names)
{
<div id = "ajax<?php echo $key?>" Some Content </div>
}
My ajax function:
function getval(id,prid,divid,key)
{
alert(divid)
$.ajax({
type: "POST",
data: "aid="+id+"&prid="+prid,
url: '<?php echo site_url('grocery/onchange')?>',
success: function(html){
$('#'+divid).html(html);
};
});
}
i am tryimg to change the div content..but its not working?
You need a lot of changes in your ajax-
first use console.log() instead of alert and then because your div's id(s) are being created dynamically then you need to handle it in this way-
$.ajax({
type: "POST",
data: {aid:id,prid:prid},
url: '<?php echo site_url('grocery/onchange')?>',
success: function(html){
$(document).find('div[id='+divid+']').html(html);
};
});
Here is the live example- http://jsfiddle.net/x4Lvfk9k/
I m creating like and unlike button for my website , at my local server i used seprate file it it working fine but when i install at my website then it is not working properly.
I m Fetching some information using this code from url bar
<?php
error_reporting (0);
include "includes/session.php";
include 'database/db.php';
extract($_REQUEST);
if(isset($_GET["i"]))
{
$pid=($_GET['p']);
$lid=($_GET['i']);
}
?>
<?php
$likquery = mysql_query("select * from likes where userid=$id and postid=$lid");
if(mysql_num_rows($likquery)==1){
?>
<a class="unlike" id="<?php echo $lid ?>">UnLike</a> <span class="like_update" id="<?php echo $lid ?>"></span>
<?php }else{?>
<a class="like" id="<?php echo $lid ?>">Like</a>
<?php
}?>
AFTER this I use script
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('body').on('click','.like',function(){
var postId = $(this).attr('id');
var postData = 'postid='+postId+'&uid=<?php echo $id ?>';
$.ajax({
type: "POST",
url: "like_notes",
data: postData,
cache: false,
success: function(){
$('#'+postId).text('UnLike').addClass('unlike').removeClass('like');
}
});
})
$('body').on('click','.unlike',function(){
var postId = $(this).attr('id');
var postData = 'postid='+postId+'&uid=<?php echo $id ?>';
$.ajax({
type: "POST",
url: "likeun_notes",
data: postData,
cache: false,
success: function(){
$('#'+postId).text('Like').addClass('like').removeClass('unlike');
}
});
})
});
</script>
And I m not getting any response but when i use
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".like").click(function(){
var postId = $(this).attr('id');
var postData = 'postid='+postId+'&uid=<?php echo $id ?>';
$.ajax({
type: "POST",
url: "like_notes",
data: postData,
cache: false,
success: function(){
$('#'+postId).text('UnLike').addClass('unlike').removeClass('like');
}
});
})
$(".unlike").click(function(){
var postId = $(this).attr('id');
var postData = 'postid='+postId+'&uid=<?php echo $id ?>';
$.ajax({
type: "POST",
url: "likeun_notes",
data: postData,
cache: false,
success: function(){
$('#'+postId).text('Like').addClass('like').removeClass('unlike');
}
});
})
});
</script>
only once it is changing the value
Ok, the second version works only once, because at the beginning, the event is on the button, then you re-render the button by changing it's class and text, so the events get unbinded.
Same is for the 1st version. Jquery says: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().... If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
So re-bind the events after changing the button.
I suggest something like this:
function bindEvents() {
$('.like').off().on('click', function(){
var postId = $(this).attr('id');
var postData = 'postid='+postId+'&uid=' + <?php echo $id ?>;
$.ajax({
type: "POST",
url: "like_notes",
data: postData,
cache: false,
success: function(){
$('#'+postId).text('UnLike').addClass('unlike').removeClass('like');
//rebind events here
bindEvents();
}
});
$('.unlike').off().on('click', function(){
var postId = $(this).attr('id');
var postData = 'postid='+postId+'&uid=' + <?php echo $id ?>;
$.ajax({
type: "POST",
url: "likeun_notes",
data: postData,
cache: false,
success: function(){
$('#'+postId).text('Like').addClass('like').removeClass('unlike');
//rebind events here
bindEvents();
}
});
}
$(document).ready(function(){
bindEvents();
});
Also notice that in var postData = 'postid='+postId+'&uid=<?php echo $id ?>'; code, the php part won't be treated as php. It will be just a string. So replace that part with the following, assuming that the code is located inside a php file:
var postData = 'postid='+postId+'&uid=' + <?php echo $id ?>;
i try to update the status of a messae in my pm's by only clicking the read button on my page. so i found some solution here on this site, but it doesn't really work for me.
i use this ajax before the html button:
<script type="text/javascript">
function setRead(){
$.ajax({
type: "POST",
url: "update_pm_status.php",
data: { name: $("select[name='gelesen']").val()},
success:function( msg ) {
alert( "Data Saved: " + msg );
}
});
}
</script>
the button is styled css and uses it's own javascript to toggle the content (open/close)
so i want to update the status by opening the message
<span class="toggleOpen" onclick="setRead()"><input type="hidden" method="post" name="gelesen" value="<?php echo $row['id']; ?>">lesen</span>
the included site is
<?php
ini_set('include_path', 'inc');
require("connect.php");
{
$id = $_POST['id'];
$sql = "UPDATE
PMS
SET
gelesen = 'yes'
WHERE id = '".mysql_real_escape_string($id)."' AND gelesen = 'no'";
mysql_query($sql) OR die("<pre>\n".$sql."</pre>\n".mysql_error());
}
but i get always the notice of the undefined variable 'id'.
how can i give this variable to the included site?
because i have to wait 8 hours before i can reply i edit my post:
thanks for the answer but i still get the message of a undefined index: name
so the variable is not postet to my update_pm_staus.php
ihave updated my script to this:
<script type="text/javascript">
function setRead(){
$.ajax({
type: "POST",
url: "update_pm_status.php",
data: { id: $(this).children("[name='gelesen']").val()},
success:function( msg ) {
alert( "Data Saved: " + msg );
}
});
}
and the update_pm_status.php to this:
ini_set('include_path', 'inc');
require("connect.php");
$id = $_POST['name'];
$sql = "UPDATE
PMS
SET
gelesen = 'yes'
WHERE id = '".mysql_real_escape_string($id)."' AND gelesen = 'no'";
mysql_query($sql) OR die("<pre>\n".$sql."</pre>\n".mysql_error());
i also changed my html like this in hope to bring it to work.
<span class="toggleOpen" onclick="setRead()" input type="hidden" method="post" name="gelesen" value="<?php echo $row['id']; ?>">lesen</span>
It looks as though you are sending the id correctly, but you are sending it as name. You'd want to update your JavaScript to pass the key:value pair that you're expecting, with the key name that you expect in your PHP.
<script type="text/javascript">
function setRead(){
$.ajax({
type: "POST",
url: "update_pm_status.php",
data: { id: $(this).children("[name='gelesen']").val()},
success:function( msg ) {
alert( "Data Saved: " + msg );
}
});
}
</script>
You'll notice that in the data: {} block of the AJAX request, I've updated your key:value pair to be named id, rather than name. If you do what your key to be named name when POST'ing, then you'd want to update your PHP to look for that:
$id = $_POST['name'];
sorry for the late response. i got the to work. i use
<script type="text/javascript">
function setRead($id){
$.ajax({
type: "POST",
url: "update_pm_status.php",
data: { id: $id}
}); }
and the html like this
onclick="setRead(this.id);
thanks for to all helping me out :)
I want to try to get some value from page cart.php from and ajax call, but its not working.
Ajax code is below:
function temp_sell(id) {
//var p_id=document.getElementById('temp').value;
alert(p_id);
$.ajax({
type: "POST",
url: "temp_sell.php",
data: "value=" + p_id,
success: function (message) {
alert(message);
$("#your_cart").html(message);
}
});
}
temp_sell.php is below where I want to show some products details
<?php
include("connection.php");
echo $p_id = $_POST['value'];
$qty=1;
$query="SELECT * FROM product WHERE id='$p_id'";
$result=mysql_query($query);
while($data=mysql_fetch_array($result))
{
?>
<form>
<table>
<tr>
<img src="<?php echo "img/".$data['image'];?>"/>
<strong><?php echo $data['pro_name'];?></strong>
<strong><?php echo $data['price'];?></strong>
<input type="text" value="<?php echo $qty;?>"/>
</tr>
</table>
</form>
<?php
}
?>
p_id is undefined, you have commented the p_id value or change temp_sell(p_id).
function temp_sell(p_id)
instead of
function temp_sell(id)
Reference comments : Ajax call with javascript not working
Do this :
function temp_sell(id){
var p_id=document.getElementById('temp').value; // <--- uncomment this line
alert(p_id);
$.ajax({
type: "POST",
url: "temp_sell.php",
data: {value:p_id}, // <--- change this
success: function(message){
alert(message);
$("#your_cart").html(message);
}
});
}