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>
Related
I'm beginner in programming. I tried to used Ajax on unordered list to run the list item (li) id like this:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion li").not('.empty').click(function() {
var addr = this.id;
$.ajax({
url: addr,
type: "GET",
data: dataString,
success:function(data)
{
alert('I would run those addr here . ' + addr);
}
});
});
});
</script>
<body>
<ul id="accordion">
<li id="a1.php">Aaa</li>
<li class="empty">Bbb</li>
<li class="empty">Ccc</li>
<li class="empty">Ddd</li>
</ul>
</body>
This code above doesn't work, why ?
$(document).ready(function() {
$("#accordion li").not('.empty').click(function() {
var addr = $(this).attr('id');
var dataString = "some string";
$.ajax({
url: addr,
type: "GET",
data: dataString,
success:function(data)
{
alert('I would run those addr here . ' + addr);
}
});
});
});
I need help with a button for loading more data from the database. I've found examples, but too bad ones. Here is what I have so far:
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'ajax_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.tutorial_list').append(html);
}
});
});
});
You can follow below technique to load more data with just replacing morebox html.
blog.php
<div class="tutorial_list">
<!-- LOAD YOUR PHP BLOG DATA -->
<div class="loading"><img src="fb-load.gif"/></div>
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
</div>
<script>
$(document).on('click', '.show_more', function() {
{
var ID = $(this).attr("id");
if (ID) {
$('.morebox').hide();
$('.loding').show();
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastpost=" + ID,
cache: false,
success: function(html) {
$('.loading').hide();
$('.tutorial_list').append(html);
$("#show_more" + ID).remove(); // removing old more button
}
});
} else {
$(".morebox").html('The End'); // no results
}
return false;
});
</script>
ajax_more.php
<!-- LOAD YOUR PHP BLOG DATA WITH lastpost ID and remember to add below code for load more -->
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
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');
}
}
});
});