$("button").click(function () {
var base_url = $('#base_url').val();
var id = $(this).attr('value');
$('#foo').remove();
alert(id)
$.ajax({
url: base_url + 'Reports/view_extra',
type: 'POST',
data: {
id: id
},
success: function (data) {
$("<div id='foo'></div>").appendTo(".append").append(data);
$("#dialog-modal").dialog({
height: 200,
width: 790,
modal: true
});
$("#dialog-modal").css("display", "block");
$("#dialog-modal").show();
}
});
});
<td><?php echo isset($v->comments) ? substr(ucfirst($v->comments), 0,100)."... <button class='more' value='$v->fid'>See More</button>" : '-' ?></td>
Here is the code.
My Question is when i click on See More button then get the value for me for 10 records.
But when i used pagination(Datatables) then for other records didn't fetch the value on "See more" button click.
Related
I want to change the width of span depends on load data from jquery respnse. Thanks.
<div class="star-rating">
<span style="width:
<script type='text/javascript'>
var auto_refresh = setInterval(function(){
$('#load_rating_average').load('get_average_rating.php?b_id=<?php echo $row['b_id']; ?>');
},2000);
</script>
<span id=''></span>
</span>
</div>
You can use jQuery css for this, just get the value in javascript and assign it using jQuery
$("#spanId").css("width", "<?php echo $dynamicWidth ?>%"); // give id to span
or
$("#spanId").width("<?php echo $dynamicWidth ?>%");// give id to span
EDIT
you can use ajax request as well,
setInterval(function(){
$.ajax({
url: 'get_average_rating.php',
type: 'GET',
data: { 'b_id' : <?php echo $b_id ?> },
success: function(width){ // assumed width = 75 (numeric o/p)
// apply width to spanId
$("#spanId").css("width",width + "%");
}
})
},2000);
This one Worked thanks for sharing.
var auto_refresh = setInterval(
function()
{
var dt;
$.get("get_average_rating.php?b_id=<?php echo $row['b_id']; ?>", function(data){
dt=data;
$("#load_rating_avg").css("width", dt +"%");
});
}, 2000);
i am using ajax to sort list the hotels when i click on heat icon which is coming from while query from database on that hear icon i called one function to set a session after set a session i want to fill heart icon without refreshing a page and again clicking on same heart icon i want to unset the particular id from session and show the heart icon as blank .
please provide me solution.
live url- https://www.hotelinkonkan.com
<a class="clickforact"><i class="fa fa-heart-o" id="boricon1" onclick="cart('<?php echo $id;?>')" ></i> </a>
The Function which is write on this icon click event for add and remove the is from session
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
total_cart_items:"totalitems"
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
});
function cart(id)
{
$('.clickforact').click(function(){
if($(this).find($("i")).hasClass('fa-heart-o'))
{
$(this).find($("i")).removeClass('fa-heart-o').addClass('fa-heart');
}
else if($(this).find($("i")).hasClass('fa-heart'))
{
$(this).find($("i")).removeClass('fa-heart').addClass('fa-heart-o');
}
});
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
iteam_id:id
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
}
function cart_remove(id)
{
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
iteam_id_remove:id
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
show_cart();
}
function show_cart()
{
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
showcart:"cart"
},
success:function(response) {
document.getElementById("mycart").innerHTML=response;
$("#mycart").slideToggle();
}
});
}
</script>
You are calling event multiple times so you are facing an issue
1)with javascript 'onclick' : onclick="cart('')"
2)with jquery 'click' : $('.clickforact').click(function(){}
You can achive your goal using jquery only.
with this:
//pass data-id with anchor tag
<a class="clickforact" data-id="<?php echo $id;?>"><i class="fa fa-heart-o" id="boricon1" ></i> </a>
Use only jquery event
$('.clickforact').click(function(){
if($(this).find($("i")).hasClass('fa-heart-o'))
{
$(this).find($("i")).removeClass('fa-heart-o').addClass('fa-heart');
}
else if($(this).find($("i")).hasClass('fa-heart'))
{
$(this).find($("i")).removeClass('fa-heart').addClass('fa-heart-o');
}
var id = $(this).data("id"); //<---retrive your id
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
iteam_id:id
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
});
I am new to jQuery so please don't judge me too harshly!
I'm making a page which lists videos, under each video there is a voting button. The button works in 2 stages, first you click it which expands the button, then the second click should confirm the vote using PHP/Ajax. If you click another button before submitting it should reset the first.
I put together the below to try and accomplish this, the first section is to expand the button, then the second is to submit the vote. It kind of works, but I noticed that if you click on one button, then another, then back to the first it submits the vote. Any ideas of how I can get this working? Or a better way of working?
Thanks in advance!
<script>
$(window).load(function(){
$("ul li .button").click(function() {
$("ul li .button").removeClass("active-button");
$("ul li .button").text("Vote for this");
$(this).addClass("active-button");
$(this).text("Submit vote");
stop;
});
});
$(document).on("click", "ul li .button", function () {
if ( $(this).hasClass( "active-button" ) ) {
$("ul li .active-button").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
});
}
});
</script>
<ul class="videos clearfix">
<?php include('config.php');
$sql=mysql_query("SELECT * FROM messages LIMIT 4");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$title=$row['title'];
?>
<li>
<h2><?php echo $title; ?></h2>
<?php echo $msg; ?>
<div id="<?php echo $mes_id; ?>" name="up" class="button vote">Vote for this</div>
</li>
?php } ?>
</ul>
Dont have two seperate click handlers, combine them into one:
$(document).on("click", "ul li .button", function () {
if ( $(this).hasClass( "active-button" ) ) {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
}else{
$("ul li .button").removeClass("active-button");
$("ul li .button").text("Vote for this");
$(this).addClass("active-button");
$(this).text("Submit vote");
}
});
I have a problem and I do not know if the method I am using is correct.
I want to decrease the variable $ pag -1 if a record is deleted.
I do this because I have a pagination and affects which records are deleted, I must decrease that variable I use in the pagination.
In this code I decreases though it has not eliminated any registration.
How can I do to make me decrease the variable only if a record is deleted?
her code:
<?php $pag=20; ?>
<script type="text/javascript">
$('.delete').live("click",function()
{
var ID = $(this).attr("id");
var dataString = 'id='+ ID;
jConfirm('DELETE?',
function(r) {
if(r==true)
$.ajax({
type: "POST",
url: "delete.php",
data: dataString,
cache: false,
beforeSend: function(){
$("#stbody"+ID).animate({'backgroundColor':'#F2F2F2'},300);},
success: function(html){
$("#body"+ID).fadeOut(300,function(){$("#body"+ID).remove();});
//div update
setTimeout(function() {
$("#apDiv101").load('disminuye.php');
}, 100);
}
});
});
return false;
});
</script>
<!--html delete-->
<a class="delete" href="#" id="<?php echo $id;?>" title="DELETE"></a>
<!--DIV update-->
<div id="apDiv101"><?php
include('disminuye.php');
?></div>
file disminuye.php
<?php
$pag = $pag-1;
echo $pag;
?>
I am trying to use the code bellow to reveal a div that contains a loading image for all divs but I cannot make it work.
For example I have 4 divs and inside those divs I have included the div that holds the image loading icon. Each div has a button with same class name.
Every time that I press the button the div that holds the loading image appears only in the first div.
P.S I want to keep this structure because I am grabbing some attributes from <a href>
My Jquery Code:
<script type="text/javascript">
$(document).ready(function() {
$(".mybutton").click(function() {
var id = $(this).attr("id");
var title = $(this).attr("title");
var dataString = 'id='+ id;
$('#myloader').fadeIn("fast");
$.ajax({
type: "POST",
url: "getvars.php",
data: dataString,
cache: false,
success: function(html) {
$('#myloader').fadeOut("fast");
}
});
});
});
</script>
And my html Code:
<!-- Div 1 -->
<div id="Master" style="width:100px; height:100px;">
<div id="myloader" style="width:50px; height:50px; display:none;">Wait...</div>
Press me
</div>
<!-- Div 2 -->
<div id="Master" style="width:100px; height:100px;">
<div id="myloader" style="width:50px; height:50px; display:none;">Wait...</div>
Press me
</div>
It is because you are using a div id and it should be unique on a HTML document, so you should replace #myloader with .myloader
and of course <div id="myloader" to <div class="myloader"
You are using same id for multiple elements. There should be only one element having an id.
Try this:
$(".mybutton").click(function()
{
var b = this;
var id = $(this).attr("id");
var title = $(this).attr("title");
var dataString = 'id='+ id;
$('#myloader').fadeIn("fast");
$.ajax({
type: "POST",
url: "getvars.php",
data: dataString,
cache: false,
success: function(html)
{
$(b).siblings('div')[0].fadeOut("fast");
}
});
});
});
ID should always be unique( that is why it is called ID..:) )..so
replace #myloader with .myloader and <div id="myloader" to <div class="myloader" ..and you can use prev() jquery function to get the div with loading...
your codes should look like this
$(document).ready(function() {
$(".mybutton").click(function()
{
var id = $(this).attr("id");
var title = $(this).attr("title");
var dataString = 'id='+ id;
$(this).prev().fadeIn("fast"); //chnages here
$.ajax({
type: "POST",
url: "getvars.php",
data: dataString,
cache: false,
success: function(html)
{
$(this).prev().fadeOut("fast"); //and here
}
});
});
});
Change <div id="myloader" to <div class="myloader" and then change JS as:
<script type="text/javascript">
$(document).ready(function() {
$(".mybutton").click(function() {
var id = $(this).attr("id");
var title = $(this).attr("title");
var dataString = 'id='+ id;
var $loader = $(this).parent().find('.myloader'); //Change this
$.ajax({
type: "POST",
url: "getvars.php",
data: dataString,
cache: false,
beforeSend: function() { //Change this
$loader.fadeIn("fast");
}
success: function(html) {
$loader.fadeOut("fast"); //Change this
}
});
});
});
</script>