0

jqueryを使用して、自分のWebサイトに賛成票、反対票を投じるボタンを作成しようとしています。私がしたことは、フォームを作成し、$.post() を使用して外部の php スクリプトで処理することでした。これにより、フォームをバックエンドで静かに処理できると思いましたが、ボタンをクリックすると、jquery 関数が機能していないようで、スクリプト全体がフロントエンドに読み込まれます。

誰かがここで助けを提供できるかどうかに感謝します. ありがとう。以下は私のスクリプトです。

メインの PHP スクリプト

<div class="voting_class">

<?php
    $user =& JFactory::getUser();
    $ip = getenv('REMOTE_ADDR');
    if($user->id == 185){
?>

<form method="post" action="../vote_plus.php">
    <div class="form_element">
        <label>user_id</label>
        <input type="text" name="user_id" class="votetext" value="<?php echo $user->id;?>" />
    </div>
    <div class="element">
        <label>ad_id</label>
        <input type="text" name="ad_id" class="votetext" value="<?php echo $this->content->id;?>"/>
    </div>
    <div class="element">
        <label>ip_address</label>
        <input type="text" name="ip_address" class="votetext" value="<?php echo $ip;?>"/>
    </div>
    <div class="submit_element">
        <input type="submit" class="button" id="submitadd" value="Recommend"/>
        <div class="loading"></div>
    </div>
    <div class="submit_element">
        <input type="submit" class="button" id="submitminus" value="Don't Recommend" />
        <div class="loading"></div>
    </div>
</form>
<p class="success_msg" style="display:none"></p>

<?php }?>

</div>

ジャバスクリプトスクリプト

<script type = "text/javascript">
$(document).ready(function() {

    $('#submitadd').click(function(event) {       

    //Get the data from all the fields
    var user_id = $('input[name=user_id]');
    var ad_id = $('input[name=ad_id]');
    var ip_address = $('input[name=ip_address]');

    $.post('../vote_plus.php', { user: "user_id.val()", ad: "ad_id.val()", ip: "ip_address.val()" }, function () {
            $('.success_msg').append("Vote Successfully Recorded").fadeIn();
        });
        event.preventDefault();
    }); 
});
    //if submit button is clicked
    $('#submitminus').click(function(event) {       

    //Get the data from all the fields
    var user_id = $('input[name=user_id]');
    var ad_id = $('input[name=ad_id]');
    var ip_address = $('input[name=ip_address]');

    $.post('../vote_minus.php', { user: "user_id.val()", ad: "ad_id.val()", ip: "ip_address.val()" }, function () {
            $('.success_msg').append("Vote Successfully Recorded").fadeIn();
        });
        event.preventDefault();
    });

});
</script>

すべての mySQL 更新を適切にロードして情報を適切に表示できるため、問題は外部 php スクリプトにあるとは思えないため、外部スクリプトは投稿しません。私の問題は、ボタンをjqueryで動作させることができないところにあります。

4

2 に答える 2

3

あなたのライン

$.post('../vote_plus.php', { user: "user_id.val()", ad: "ad_id.val()", ip: "ip_address.val()" }, function(){

する必要があります

$.post('../vote_plus.php', { user: user_id.val(), ad: ad_id.val(), ip: ip_address.val() }, function(){

これは、コードの合理化されたバージョンです。

$(function () {
  $('#submitadd').click(function (event) {       
    $.post(
      '../vote_plus.php', { 
        user: $('input[name=user_id]').val(), 
        ad:   $('input[name=ad_id]').val(),
        ip:   $('input[name=ip_address]').val() 
      }, function () {
        $('.success_msg').append("Vote Successfully Recorded").fadeOut();
      }
    );
    event.preventDefault();
  });
});

一般的なヒント:

  • これは jQuery スクリプトではなく、JavaScript です。
  • のような明白なことを述べるコメントは使用しないでください//if submit button is clicked。それらは価値を追加しません。
  • 適切で一貫したインデントを使用してください。
  • event.preventDefault();の代わりに使用return false;
  • .append()やのように、jQuery でアクションを連鎖させることができます.fadeOut()。そのために 2 行のコードを作成する必要はありません。
  • $(document).ready()で安全に置き換えることができます$()。
于 2012-05-21T07:46:56.317 に答える
0

代わりにこれを使用してください：

<script type = "text/javascript">
    $(document).ready(function() {

        //if submit button is clicked
        $('#submitadd').click(function() {       

            //Get the data from all the fields
            var user_id = $('input[name=user_id]').val();
            var ad_id = $('input[name=ad_id]').val();
            var ip_address = $('input[name=ip_address]').val();

            $.post('../vote_plus.php', { user : user_id, ad : ad_id, ip : ip_address }, function(){
            $('.success_msg').append("Vote Successfully Recorded");
                $('.success_msg').fadeOut();
        });        
            return false;
         });
    });     
    </script>
于 2012-05-21T07:51:29.770 に答える