UPDATE:

I'm making a like/dislike voting program and it has worked the way I want it in Firefox 3, Chrome, and Safari. However, it doesn't seem to be working in Firefox 4. For example, I've made a form such that after the user clicks the submit button and the data is sent into the SQL table, a jquery animation is supposed to play. This is the full code:

<script type="text/javascript" src="opacity.js"></script>



<link href="voter.css" rel="stylesheet" type="text/css" />

<?php


mysql_connect("","","") or die("Error connecting to db");
mysql_select_db("") or die("Error connecting to db");

$currAdd2 = $_SERVER["REQUEST_URI"];
$currAdd2 = substr($currAdd2, 0, -9);
$currAdd2 = substr($currAdd2, 11);

$numrow1 = mysql_query("SELECT * FROM rate WHERE apt = '$currAdd2' AND likes = 1 ");
$numlikes = mysql_num_rows($numrow1); 

$numrow2 = mysql_query("SELECT * FROM rate WHERE apt = '$currAdd2' AND likes = 0 ");
$numdislikes = mysql_num_rows($numrow2);

$numrow3 = mysql_query("SELECT * FROM rate WHERE apt = '$currAdd2'  ");
$totalvotes = mysql_num_rows($numrow3);

$likewidth = ($numlikes/($totalvotes+1)) * 400;
$dislikewidth = ($numdislikes/($totalvotes+1)) * 400;
?>
<form action= '<?php echo $_SERVER['PHP_SELF']; ?>'; method='post'>
<table align='left' width='500px' border='0' cellpadding='0' cellspacing='0'>
<? echo"      
      <tr>
        <td>
            <div id='blue'><input type='image' name='blue' id='likebutton' value='blue' src='../zrating/like.png' 

            /></div>

        </td>
        <td>
        <b>$numlikes Like</b>
        <div id='like' style='width:$likewidth'><div id='dis'></div></div><br>
        </td>
      </tr>
      <tr>
        <td>
            <div id='red'><input type='image' name='red' id='dislikebutton' value='red' src='../zrating/dislike.png'  

            /></div>

        </td>
        <td>
            <b>$numdislikes Dislike</b>
            <div id='dislike' style='width:$dislikewidth'><div id='dis'></div></div><br>
        </td>
      </tr>
      <tr>
      <td>
      </td>
      <td>
      <div id='success'><br><br>Thanks for voting!</div>
      <div id='fail'><br><br>You are only allowed 1 vote per apartment.</div>     
      </td>
      </tr>
  </table>
</form>
";


//check ip address
    if (!empty($_SERVER['HTTP_CLIENT_IP']))   //check ip from share internet
    {
      $ip=$_SERVER['HTTP_CLIENT_IP'];
    }
    elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))   //to check ip is pass from proxy
    {
      $ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    else
    {
      $ip=$_SERVER['REMOTE_ADDR'];
    }



if ( isset( $_POST['blue'] ) )
{

    $currAdd = $_SERVER["REQUEST_URI"];
    $currAdd = substr($currAdd, 0, -9);
    $currAdd = substr($currAdd, 11);

    $ipquery = mysql_query ("SELECT * FROM rate WHERE ip = '$ip' AND apt = '$currAdd' ");
    $ipquery = mysql_fetch_assoc($ipquery);
    $ipquery = $ipquery['ip'];


    if ($ipquery == $ip)
    {
        echo "<script type='text/javascript' src='jquery.js'></script>";


                echo "<script type='text/javascript'>
                 $(document).ready(function()
    {
    $('#fail').animate({width:300},1000);
    $('#fail').animate({height:100},1000);
    $('#fail').animate({width:300,height:100},1400);
    $('#fail').fadeOut(5000);

    }); </script>";

    }
    else
    {

    mysql_query ("INSERT INTO rate VALUES ('','$currAdd', '1', '$ip')");            

    $rankqry = mysql_query ("SELECT * FROM rank WHERE apt = '$currAdd' ");
    $rankqry = mysql_fetch_assoc($rankqry);
    $rankqry = $rankqry['rank'];

    $rankupdate = $rankqry + 1;

        if($rankupdate < 0)
        {
        $rankupdate = 0;
        }

    mysql_query ("UPDATE rank SET rank = '$rankupdate' WHERE apt = '$currAdd' ");
    $likesqry = mysql_query ("SELECT * FROM rank WHERE apt = '$currAdd' ");
    $likesqry = mysql_fetch_assoc($likesqry);
    $likesqry = $likesqry['likes'];

    $likesupdate = $likesqry +1;

    mysql_query ("UPDATE rank SET likes = '$likesupdate' WHERE apt = '$currAdd' ");

            echo "<script type='text/javascript' src='jquery.js'></script>";


        echo "<script type='text/javascript'>
                 $(document).ready(function()
    {
    $('#success').animate({width:300},1000);
    $('#success').animate({height:100},1000);
    $('#success').animate({width:300,height:100},1400);
    $('#success').fadeOut(5000);

    }); </script>";

}

}


if ( isset( $_POST['red'] ) )
{
    $currAdd = $_SERVER["REQUEST_URI"];
    $currAdd = substr($currAdd, 0, -9);
    $currAdd = substr($currAdd, 11);

    $ipquery = mysql_query ("SELECT * FROM rate WHERE ip = '$ip' AND apt = '$currAdd' ");
    $ipquery = mysql_fetch_assoc($ipquery);
    $ipquery = $ipquery['ip'];

    if ($ipquery == $ip)
    {
                echo "<script type='text/javascript' src='jquery.js'></script>";


                echo "<script type='text/javascript'>
                 $(document).ready(function()
    {
    $('#fail').animate({width:300},1000);
    $('#fail').animate({height:100},1000);
    $('#fail').animate({width:300,height:100},1400);
    $('#fail').fadeOut(5000);

    }); </script>";


    }
    else
    {

mysql_query ("INSERT INTO rate VALUES ('','$currAdd', '0', '$ip')");    

$rankqry = mysql_query ("SELECT * FROM rank WHERE apt = '$currAdd' ");
$rankqry = mysql_fetch_assoc($rankqry);
$rankqry = $rankqry['rank'];

$rankupdate = $rankqry - 1;

if($rankupdate < 0)
{
    $rankupdate = 0;
}


mysql_query ("UPDATE rank SET rank = '$rankupdate' WHERE apt = '$currAdd' ");

$dislikesqry = mysql_query ("SELECT * FROM rank WHERE apt = '$currAdd' ");
$dislikesqry = mysql_fetch_assoc($dislikesqry);
$dislikesqry = $dislikesqry['dislikes'];

$dislikesupdate = $dislikesqry +1;

    mysql_query ("UPDATE rank SET dislikes = '$dislikesupdate' WHERE apt = '$currAdd' ");

            echo "<script type='text/javascript' src='jquery.js'></script>";



                    echo "<script type='text/javascript'>
                 $(document).ready(function()
    {
    $('#success').animate({width:300},1000);
    $('#success').animate({height:100},1000);
    $('#success').animate({width:300,height:100},1400);
    $('#success').fadeOut(5000);

    }); </script>";


    }
}
?>

I used version 1.4.2 of the jquery library and the latest version but still no luck. Thanks in advance for the help.

Comments

is it an ajax-request or a regular page request?

Written by mightyplow

Accepted Answer

I'm using the latest version of jQuery (1.6.1), and the following code just ran on my server perfectly fine:

<?php

echo '<html>
<head>
</head>
<body>

<div id="success">
    Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success!
</div>

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $(\'#success\').animate({width:300},1000);
    $(\'#success\').animate({height:100},1000);
    $(\'#success\').animate({width:300,height:100},1400);
    $(\'#success\').fadeOut(5000);
});
</script>
</body></html>';

?>

EDIT: Here's a link to my test PHP script

2nd EDIT: I wanted to add something to my answer. Without context, it is hard to tell if this is an issue, but make sure you are loading the jQuery JS file before you make any calls to the jQuery. The animation calls you made can be done outside of the HTML chunk, but it cannot be done before you load the jQuery JS file. For example, this would work:

<?php

echo '<html>
<head>
</head>
<body>

<div id="success">
    Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success!
</div>

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
</body></html>';

if ( isset( $_POST['submit'] ) )
{
    mysql_query ("INSERT INTO table VALUES ('','', '', '')");

    echo "<script type='text/javascript'>
             $(document).ready(function()
    {
        $('#success').animate({width:300},1000);
        $('#success').animate({height:100},1000);
        $('#success').animate({width:300,height:100},1400);
        $('#success').fadeOut(5000);
    }); </script>";
}

?>

But this will not:

<?php

echo '<html>
<head>
</head>
<body>

<div id="success">
    Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success! Success!
</div>

<script type="text/javascript">
$(document).ready(function()
{
    $(\'#success\').animate({width:300},1000);
    $(\'#success\').animate({height:100},1000);
    $(\'#success\').animate({width:300,height:100},1400);
    $(\'#success\').fadeOut(5000);
});
</script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
</body></html>';

?>

Using online jQuery 1.6.1 file

<form action= '<?php echo $_SERVER['PHP_SELF']; ?>'; method='post'>
<table align='left' width='500px' border='0' cellpadding='0' cellspacing='0'>
<?
   // Using online jQuery 1.6.1 file
   echo"      
      <tr>
        <td>
            <div id='blue'><input type='image' name='blue' id='likebutton' value='blue' src='../zrating/like.png' 

            /></div>

        </td>
        <td>
        <b>$numlikes Like</b>
        <div id='like' style='width:$likewidth'><div id='dis'></div></div><br>
        </td>
      </tr>
      <tr>
        <td>
            <div id='red'><input type='image' name='red' id='dislikebutton' value='red' src='../zrating/dislike.png'  

            /></div>

        </td>
        <td>
            <b>$numdislikes Dislike</b>
            <div id='dislike' style='width:$dislikewidth'><div id='dis'></div></div><br>
        </td>
      </tr>
      <tr>
      <td>
      </td>
      <td>
      <div id='success'><br><br>Thanks for voting!</div>
      <div id='fail'><br><br>You are only allowed 1 vote per apartment.</div>     
      </td>
      </tr>
  </table>
</form>
";

echo "<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>";


                echo "<script type='text/javascript'>
                 $(document).ready(function()
    {
    $('#fail').animate({width:200},1000);
    $('#fail').animate({height:100},1000);
    $('#fail').fadeOut(5000);

    }); </script>";
?>
Written by Jon
This page was build to provide you fast access to the question and the direct accepted answer.
The content is written by members of the stackoverflow.com community.
It is licensed under cc-wiki