I just want to toggle html button content(activate or deactivate) on click of button...now if button content is activate it changes this to deactivate....but not vice-versa... please have look on ajax code:
<button type="button" class="btn btn-success btn-sm" id="<?php echo $row->id; ?>" onclick="savestatus<?php echo $row->id; ?>(<?php echo $row->id; ?>)">Activate</button>
and my script is
<script>
function savestatus<?php echo $row->id; ?>(row_id){
$.ajax({
type: "POST",
url: "<?php echo base_url().'home/activate_buyer/'. $row->id; ?>",
data:{},
success:function( data )
{
$("#"+row_id).html("Deactivate");
}
});
}
</script>
please help...
Use text method to change the text of the button
$("#"+row_id).text("Deactivate");
EDIT
i want if text is activate then onclick it becomes deactivate and
vice-versa
$('.button').click(function(event){
$(this).text().trim()==="Active"?$(this).text("Deactive"):$(this).text("Active")
})
JSFIDDLE
Try this bro
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<?php
$row= 5;
?>
<button type="button" class="btn btn-success btn-sm" id="<?php echo $row; ?>" onclick="savestatus(this)">Activate</button>
<script>
function savestatus(ele) {
var id = ele.id;
$.ajax({
type: "POST",
url: "<?php 'http://localhost/testGuzzle/jsOnChange2.php'; ?>",
data:{
test: id,
},
success:function( data )
{
$("#"+id).html("Deactivate");
}
});
}
</script>
</body>
</html>
Change your url at script.
My result
Related
I am fetching image with "id"(dynamic) and i want to delete image using ajax, Image is deleted successfully but unable to hide (div) dynamically (which i deleted)
Here is my html code
<?php
$banner=$store->banner;
if(!empty($banner))
{
$ban = explode(',', $banner);
$i="1";
foreach($ban as $key => $img)
{
$img;
$info=$img;
?>
<input type="hidden" id="id" name="id" value="<?php echo $store->id; ?>">
<input type="hidden" id="imgname" name="imgname" value="<?php echo $img; ?>">
<div class="form-group" id="<?php echo $key; ?>"> <!-- Creating div with id (dynamic) -->
<label for="status">image <?php ?></label>
<img src="<?php echo base_url(); ?>/<?php echo $img; ?>" width="80" height="80">
<a class="btn-sm btn-danger text-light" onclick="deleteFun(<?php echo $key; ?>)" href="#"> Delete</a>
</div>
<?php
$i++;
}
}
?>
Here is my ajax function,I just want to hide div(which i select/deleted),How can i do this ?
<script type="text/javascript">
function deleteFun(ImgId)
{
if (confirm("Are you sure you want to delete this banner ?")) {
var imgname = $('#imgname').val();
var id = $('#id').val();
$.ajax({
type: "POST",
url: "<?php echo base_url('upload_controller/deleteImage'); ?>",
data: {'id': id,'imgname':imgname,'ImgId':ImgId},
success: function(data){
$("#ImgId").remove();
console.log(data);
}
});
}
}
</script>
In your JS, you have to specify DIV id as a concatenated value to target the specific id as the id you are taking is coming in to the function as an argument.
<script type="text/javascript">
function deleteFun(ImgId)
{
if (confirm("Are you sure you want to delete this banner ?")) {
var imgname = $('#imgname').val();
var id = $('#id').val();
$.ajax({
type: "POST",
url: "<?php echo base_url('upload_controller/deleteImage'); ?>",
data: {'id': id,'imgname':imgname,'ImgId':ImgId},
success: function(data){
$("#" +ImgId).hide();
console.log(data);
}
});
}
}
</script>
I am new to JQuery and I am making an html page where the user can search for a Book ID once the search button is clicked. The problem is, the search button is not responding. Here's my code.
Here's the php file:
<?php
require("dbconnect.php");
$sql = "select * from tbl_books";
$result = mysql_query($sql, $conn) or die(mysql_error());
/** table **/
echo "<table border='1'
cellpadding='5'>";
echo "<tr>";
echo "<th>Name</th>";
echo "<th>Category</th>";
echo "<th>Author</th>";
echo "</tr>";
while($row=mysql_fetch_array($result)) {
$id = $row['bid'];
$bname=$row['bname'];
$category=$row['category'];
$author=$row['author'];
echo "<tr>";
echo "<td>$bname</td>";
echo "<td>$category</td>";
echo "<td>$author</td>";
}
?>
Html
<!doctype html>
<html>
<header>
<title>
Main Page
</title>
<script type="text/javascript"
src="jquery-2.1.4.min.js"> </script>
<script>
$(function() {
$.post("bookoramaBookDisplay.php",
function(data){
$("#display").html(data);
});
});
</script>
<script>
$(function() {
$("#btnsearch").click(function() {
var search=$("#txtsearch").val();
$.post("bookoramaBookDisplay.php",
{txtsearch:search},
function(data){
$("#display").html(data);
});
});
});
</script>
</header>
<body>
<div id = "table2">
<div id = "taas">
<input type="text"
name = "txtsearch_name"
id = "txtsearch"
placeholder="Search Book">
<input type="button"
value="Search"
id = "btnsearch">
</div>
<div id = "baba">
<div id = "display">
</div>
</div>
</div>
A little help would be highly appreciated. Thank you!
Your query should be
$where='';
if($_POST[txtsearch]){
$where = "WHERE `bid`='".$_POST[txtsearch]."'";
}
$sql = "select * from tbl_books $where";
<!doctype html>
<html>
<head>
<title>
Main Page
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: 'POST',
cache: false ,
url: "bookoramaBookDisplay.php",
success: function(rmsg){
$("#display").html(rmsg);
}
});
$("#btnsearch").click(function() {
$.ajax({
type: 'POST',
cache: false ,
url: "bookoramaBookDisplay.php",
data: {txtsearch:search},
success: function(rmsg){
$("#display").html(rmsg);
}
});
});
});
</script>
</head>
<body>
<div id = "table2">
<div id = "taas">
<input type="text" name = "txtsearch_name" id = "txtsearch" placeholder="Search Book">
<input type="button" value="Search" id = "btnsearch">
</div>
<div id = "baba">
<div id = "display">
</div>
</div>
</div>
</body>
</html>
PHP
<?php
require("dbconnect.php");
$where='';
if($_POST[txtsearch]){
$where = "WHERE `bid`='".$_POST[txtsearch]."'";
}
$sql = "select * from tbl_books $where";
$result = mysql_query($sql, $conn) or die(mysql_error());
/** table **/
echo "<table border='1'
cellpadding='5'>";
echo "<tr>";
echo "<th>Name</th>";
echo "<th>Category</th>";
echo "<th>Author</th>";
echo "</tr>";
while($row=mysql_fetch_array($result)) {
$id = $row['bid'];
$bname=$row['bname'];
$category=$row['category'];
$author=$row['author'];
echo "<tr><td>".$bname."</td><td>".$category."</td><td>".$author."</td></tr>";
}
echo "</table>";
?>
I have a like and dislike system in a page, like and dislike works only on the first page but not on others post. Here is what I have tried
This is how I fetch information
Here is the php part
Like.php
if(isset($_POST['id'])){
$send = mysqli_query($connecDB, "UPDATE portfolio SET `like`='$view' WHERE `id`='$id'"); }
Javascript part
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $('#id').val();
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$('#result').html(data);
}
});
});
</script>
Here is the HTML part
$sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" id="result"><?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i> </button>
<input type="hidden" name="id" id="id" value="<?php echo $rowsmall['id']; ?>"> <?php } ?>
The problem I'm facing is that the javascript is again and again sending same hidden id.
In HTML id attribute must has an unique value in whole page and this line (var id = $('#id').val();) always return id of first post, use dataattributes to simply access post id, just like this
PHP
<?php $sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" data-id="<?php echo $rowsmall['id']; ?>" >
<?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i>
</button>
<input type="hidden" name="id" value="<?php echo $rowsmall['id']; ?>">
<?php } ?>
JavaScript
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $(this).data('id'); // get data-id atrribute
var element = this;
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$(element).html(data);
}
});
});
</script>
i have two problems with jQuery ajax call back.
I have following code of jQuery ajax call:
<div id="newpages"></div>
<script type="text/javascript">
<!--
var page = 1;
var max_pages_number = <?php echo $max_pages_number; ?>;
jQuery(document).ready(function(){
jQuery("#registry_show_more").click(function(){
if(page < max_pages_number) {
jQuery.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
action: 'registry_paggination',
page: page+1,
plusid: 18,
page_size: <?php echo $page_size; ?>,
category: <?php echo $kategoria; ?>,
filtr: '<?php echo $filtr; ?>',
access: <?php echo $access; ?>,
},
success: function(data, textStatus, XMLHttpRequest){
page++;
if(page >= max_pages_number) {
jQuery("#registry_show_more").hide();
}
if(data) {
alert('a');
jQuery("#newpages").append(jQuery("#newpages").html() +data);
alert('b');
}
},
error: function(MLHttpRequest, textStatus, errorThrown){}
});
}
});
});
//-->
</script>
<div style="display: block;" id="registry_show_more">
<a class="w-blog-entry-more g-btn type_default size_small">WCZYTAJ WIĘCEJ</a>
</div>
First problem. After received data in ajax callback first alert('a') shows, then data is appended to div with id="newpages". But second alert('b') dont shows.
Second problem. In ajax.php file i have part of code like this:
<script type="text/javascript">
<!-- plus
jQuery(document).ready(function(){
jQuery("#bp<?php echo $row->registry_id; ?>").click(function(){
if(!jQuery.cookie('regvote<?php echo $row->registry_id; ?>')) {
jQuery.cookie('regvote<?php echo $row->registry_id; ?>','+', { expires: 1 });
jQuery.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
action: 'registryVote',
plusid: <?php echo $row->registry_id; ?>,
},
success: function(data, textStatus, XMLHttpRequest){
jQuery("#vc<?php echo $row->registry_id; ?>").html(data);
},
error: function(MLHttpRequest, textStatus, errorThrown){}
});
}
});
});
//-->
</script>
<div class="post twc-post type-post status-publish format-standard hentry w-blog-entry">
<div id="votepanel<?php echo $row->registry_id; ?>" style="width: 35px; float: left;">
<a style="cursor:pointer; cursor:hand" id="bp<?php echo $row->registry_id; ?>"><i class="fa fa-plus-square" style="cursor: hand !important; color: #bd2029; font-size: 32px;"></i></a>
<h6 id="vc<?php echo $row->registry_id; ?>" style="margin: 0; padding: 0;"><?php echo number_format((double)$row->value,1); ?></h6>
<a style="cursor:pointer; cursor:hand" id="bm<?php echo $row->registry_id; ?>"><i class="fa fa-minus-square-o" style="color: #bd2029; font-size: 22px;"></i></a>
</div>
<script type="text/javascript">
<!-- minus
//jQuery(document).ready(function(){
jQuery("#bm<?php echo $row->registry_id; ?>").click(function(){
if(!jQuery.cookie('regvote<?php echo $row->registry_id; ?>')) {
jQuery.cookie('regvote<?php echo $row->registry_id; ?>','-', { expires: 1 });
jQuery.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
action: 'registryVote',
minusid: <?php echo $row->registry_id; ?>,
},
success: function(data, textStatus, XMLHttpRequest){
jQuery("#vc<?php echo $row->registry_id; ?>").html(data);
},
error: function(MLHttpRequest, textStatus, errorThrown){}
});
}
});
// });
//-->
</script>
And scripts MINUS and PLUS don't work when i append them to div "newpages". All elements are showed but scripts don't work.
I am not completely sure, but I think the first problem is cause because you cant use append to append an html Text. You can append elements but directly html is not a good idea I think. Try using jQuery("#newpages").html(jQuery("#newpages").html() + data); instead
About the second problem as far as I understand you are appending those scripts into a file after a call ? Isnt the call after the Document.Ready have already passed ? You append the scripts correctly but the scripts are executing after document.ready which have passed already ? Sorry if I havent understood the chronololy correctly.
I can not select the element and change the content within it
here is my html
<div class="like_user_wrapper" id="<?php echo $post_id.'like_user_wrapper' ;?> ">
hello, world
</div>
<span class="post_bottom_bar">
<img class="thumb_icon" onmouseover="
var post_id=<?php echo $post_id ?>;
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('<?php echo '#'.$post_id.'like_user_wrapper' ?>' ).html('hello');
}
})
" >
I can not change it into hello, when my have my mouse over the icon
You have an extra space in the id=" " part. Change it to:
id="<?php echo $post_id.'like_user_wrapper' ;?>">
Notice the space after ;?> is removed.
you can do so:
<img class="thumb_icon" />
<script>
$(".thumb_icon").mouseover(function(){
var post_id=<?php echo $post_id ?>;
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('<?php echo '#'.$post_id.'like_user_wrapper' ?>' ).html('hello');
}
})
})
</script>
or
<img class="thumb_icon" onmouseover="mouseoverImg();" />
<script>
function mouseoverImg(){
var post_id=<?php echo $post_id ?>;
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('<?php echo '#'.$post_id.'like_user_wrapper' ?>' ).html('hello');
}
})
}
</script>
I think that you need to do something like this:
HTML:
<div class="like_user_wrapper" id="<?php echo $post_id.'like_user_wrapper';?>">
hello, world
</div>
<span class="post_bottom_bar">
<img class="thumb_icon" id="<?php echo $post_id;?>" >
</span>
Javascript:
$(document).ready(function(){
$('.thumb_icon').mouseover(function(){
var post_id = $(this).attr("id");
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('#' + post_id + 'like_user_wrapper').html('hello');
}
});
});
});