Reputation: 11062

Problems With This jQuery Selector

Hi all I have a (probably) simple problem but I just can't figure out why it's not working.

The code below should be fairly easy to follow:

<?php
require('../db.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Website Checker</title> 

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpletip-1.3.1.js"></script> 
<script type="text/javascript">
$(document).ready(function() {

$('#check').click(function(){

$('.http-status').html('<img src="images/spinner.gif"/>').fadeOut('slow').fadeIn('slow');

$('#site-list li.websites').each(function()
{
    //var newurl = $(this).find('span.url a').attr('href');
    var newurl = $(this).find('span.url').html();
    $.ajax(
    {
        type:    "POST",
        url:     "process.php",
        data:    ({"a":newurl}),
        cache:   false,
        success: function(message)
        {
            $(this).find('span.http-status').html(message);
        } //End AJAX return
    }); //End AJAX call
    }); //End li each
}); //End Check

$('#check').click();

});

</script>

<ul id="site-list" class="list"> 
<li class="title">
    <span class="id"></span>
    <span class="name">Title</span>
    <span class="url">URL</span>
    <span class="status">HTTP Status</span>
</li> 
<?php
// some PHP to fetch all the gig entries from the shows table
$sql = "SELECT * FROM `check`";
$query = mysql_query($sql) or die(mysql_error());
// a loop to place all the values in the appropriate table cells
while ($row = mysql_fetch_array($query)){
//begin the loop...
$id=$row['id'];
$name=$row['name'];
$url=$row['url'];
?>
<li class="websites">
    <span class="id"><?php echo $id; ?></span>
    <span class="name"><?php echo $name; ?></span> 
    <span class="url"><?php echo $url; ?></span>
    <span class="status http-status"></span>
</li>

<?php
}
?>
</ul>
<br /> 
<a href="#" id="check" class="button">Check Now</a>

This basically pulls site data from a db and presents it to the user and what I am trying to do is when you click the button for the http code of each site to be checked and displayed (and also run upon the page first being loaded)

This seems to work fine - the correct data is sent and recieved but then after that the spinner is STILL there!

link: http://www.4playtheband.co.uk/check/

process.php (if it helps):

<?php
require('../db.php');

$url= NULL;
if(isset($_POST['a'])) {    $url = mysql_real_escape_string($_POST['a']);   }

function Visit($url)
{
$agent = "Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)";$ch=curl_init();
curl_setopt ($ch, CURLOPT_URL,$url );
curl_setopt($ch, CURLOPT_USERAGENT, $agent);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch,CURLOPT_VERBOSE,false);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$page=curl_exec($ch);

//echo curl_error($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if($httpcode>=200 && $httpcode<300) 
{
    echo '<span class="up">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is up"/></span></span>'; exit;
}
else
{
    $httpcode=404;

    $date = date("l, j \of F Y \@ H:i");

    $to      = "[email protected]";
    $subject = "Urgent: $url is down";
    $message = "Hello,\n\nIt appears that on our latest check of $url on $date that the site was down.\n\nRegards,\nWeb Checker";
    $headers = 'From: [email protected]' . "\r\n" .
           'Reply-To: [email protected]' . "\r\n";

    mail($to, $subject, $message, $headers);
    echo '<span class="down">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is down"/></span></span>'; exit;
}
}

if(!empty($url)){ Visit($url); exit; } 

?>

Upvotes: 1

Answers (3)

George Cummins

Reputation: 28926

The problem is here:

$(this).find('span.http-status').html(message);

According to the [jQuery .ajax documentation][1]:

The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.

To get around this problem, you can assign the value of $( this ) to another variable, and access that variable in the body of the success callback:

$('#site-list li.websites').each(function()
{
    theElement = $( this );
    var newurl = $(this).find('span.url').html();
    $.ajax(
    {
        // ...
        success: function(message)
        {
            theElement.html(message);
        } //End AJAX return

Upvotes: 2

ShankarSangoli

Reputation: 69915

You should refer to .http-status element within each li in the success callback. Since you are making ajax calls in a loop we need to store each li object into local variable and create a closure by calling a method which will set the status message. Try this

$('#check').click(function(){

$('.http-status').html('<img src="images/spinner.gif"/>').fadeOut('slow').fadeIn('slow');


$('#site-list li.websites').each(function()
{
    var $li = $(this);

    //var newurl = $(this).find('span.url a').attr('href');
    var newurl = $(this).find('span.url').html();
    $.ajax(
    {
        type:    "POST",
        url:     "process.php",
        data:    ({"a":newurl}),
        cache:   false,
        success: function(message)
        {
            setStatusMessage(message, $li);

        } //End AJAX return
    }); //End AJAX call
    }); //End li each
}); //End Check

   function setStatusMessage(message, li){
       li.find('.http-status').html(message);
   }

Upvotes: 1

iCreateAwesome

Reputation: 4464

Looks like you are only setting the 'span' of the .http-status to the message, so the spinner is still in .http-status

You need to clear .http-status::

success: function(message)
    {
        $('.http-status').html('');
        $(this).find('span.http-status').html(message);
    } //End AJAX return

Upvotes: 1

Problems With This jQuery Selector

Answers (3)

Related Questions