开发者

how to properly call jquery function from php?

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($dis开发者_JAVA技巧likesqry);
$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.


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>";
?>


If it is working on all browsers except for Firefox 4 you may want to look at this thread:

http://forum.jquery.com/topic/jquery-1-4-x-firefox-4-beta-ajax-callbacks

Is the data submitted with ajax?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜