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);
Related
I've got some HTML with this image and this data-id.
<img id="test" src="image1.png" data-id="12345" />
I would like to change image1.png for image2.png, or change image2.png for image1.png when the image is clicked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#test").click(function () { var $id = $(this).attr('data-id') });
$.ajax({
url:"test.php",
type: "POST",
data: { id = $id },
success:function(){ }
});
});
</script>
And here is my test.php script.
<?php echo $dataid; ?>
I meet some difficulties with Ajax and JQuery because I'm not used to it...
store the image in a div. whenever click on image retrieve the id and pass to test.php via ajax and echo the response inside the div
mainpage
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#toggle").on('click', '#test', function()
{
var $id = $(this).attr('data-id');
$.ajax({
type: "POST",
url: "test.php",
data: { id: $id },
success: function(theResponse) {
$('#toggle').html(theResponse);
}
});
});
});
</script>
<div id="toggle">
<img id="test" src="image1.png" data-id="12345" />
</div>
test.php
<?php
# Get Id here
$id = isset($_POST['id']) ? $_POST['id'] : '';
# for testing; remove this
echo $id;
# change here date-id and src; if it is dynamic do the database select and display image
echo '<img id="test" src="image2.png" data-id="54321" />';
?>
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 change the value of a span after using jQuery.ajax.
JavaScript
$(document).on('click', '.kssico', function(event) {
var for_uid = $(this).parents("li").attr('data'),
for_name = $(this).parents("li").attr('unme'),
dataString = "for_uid=" + for_uid + "&for_name=" + for_name;
$.ajax({
type: "POST",
url: "include/ajax.php",
data: dataString,
success: function (html) {
if(html=="300") {
$('#myModal .modal-body p').html("Error Please Try Again.");
$('#myModal').modal('show');
}
else {
$(this).parents("li span.mi-val").html(html);
$('#myModal .modal-body p').html("The Requested Action Has Been Notified To Your Friend.");
$('#myModal').modal('show');
}
}
});
});
HTML
<li class="mispan main-span" >
<div class="thumbnail">
<h3 class="miheader">Dewashree Singh</h3>
<a >
<div class="miprofile-pic-cnt" ></div>
</a>
<div class="caption">
<p>
<a href="#" class="btn kssico miclickks">
<img src="/lisps.png"><span class="mi-val">0</span>
</a>
<a href="#" class="btn bdico miclickbd">
<img src="/besd.png"><span class="mi-val">1</span>
</a>
</p>
</div>
</div>
</li>
When I click on a.miclickks it should complete the Ajax call and return a value too be placed inside the span on the button anchor. However, nothing is being changed!
jsFiddle
I don't know what your whole code looks like, but you should be able to modify this to do what you are trying to:
$('#id').on('click', function() {
var that = this;
$.ajax({
url: 'wherever.php',
success: function(html) {
$(that).find("li span.mi-val").html(html);
}
});
It looks like you have two problems. The first is that as #Barmar posted above, mi-val is a child of micclickks, not a parent. The second is that your ajax complete function is asynchronous, so $(this) isn't what you expect it will be. Both of these are solvable though.
Your code is a bit messy and your html is missing the proper attributes, but this is I think roughly what you want:
$('.kssico').on('click', function(event) {
var for_uid = $(this).parents("li").attr('data'); //the li element in your html doesn't have a data attribute
var for_name = $(this).parents("li").attr('unme'); //the li element in your html doesn't have a 'unme' attribute
var dataString = "for_uid=" + for_uid + "&for_name=" + for_name;
$.ajax({
type: "POST",
context: this,
url: "include/ajax.php",
data: dataString,
success: function (html) {
if(html=="300")
{
$('#myModal .modal-body p').html("Error Please Try Again.");
$('#myModal').modal('show');
}
else
{
$(this).parents("li span.mi-val").html(html);
$('#myModal .modal-body p').html("The Requested Action Has Been Notified To Your Friend.");
$('#myModal').modal('show');
}
}
});
});
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>