duanhoupeng6642
2016-02-02 07:59
浏览 54

提交按钮不在Jquery Mobile中工作

Hi guys I'm working on a web app where i have a menu on the left and a div on the right where shows content of other pages when i click on menu items , i'm using Ajax to bring the content using this code:

<script>
    $.ajax({
        url: "new_pm.php"
    }).done(function(data) {
        $("#content").html(data);
    });

    $("#content").on("click", "a", function(e) {
        e.preventDefault();
        var html = this.href;
        $("#content").load(html)
    });
</script>

The second part of above code is to get the links in the content but the problem is it works for Links and not buttons (Inputs)

Here is the code for the page that loads (new_pm.php) :

<?php
//We check if the user is logged
if(isset($_SESSION['id']))
{
$form = true;
$otitle = '';
$orecip = '';
$omessage = '';
//We check if the form has been sent
if(isset($_POST['title'], $_POST['recip'], $_POST['message']))
{
        $otitle = $_POST['title'];
        $orecip = $_POST['recip'];
        $omessage = $_POST['message'];

        //We remove slashes depending on the configuration

            if(get_magic_quotes_gpc())
        {       
                //$otitle = stripslashes($otitle);
                //$orecip = stripslashes($orecip);
                //$omessage = stripslashes($omessage);
        }

        //We check if all the fields are filled

        if($_POST['title']!='' and $_POST['recip']!='' and $_POST['message']!='')
        {
                //We protect the variables

               // $title = mysqli_real_escape_string($otitle);
                //$recip = mysqli_real_escape_string($orecip);
               // $message = mysqli_real_escape_string(nl2br(htmlentities($omessage, ENT_QUOTES, 'UTF-8')));

                //We check if the recipient exists

                $dn1 = mysqli_fetch_array(mysqli_query($link,'select count(id) as recip, id as recipid , (select count(*) from pm) as npm from users where email ="'.$orecip.'"'));

                if($dn1['recip']==1)

                {
                        //We check if the recipient is not the actual user

                        if($dn1['recipid']!=$_SESSION['id'])
                        {
                                $id = $dn1['npm']+1;

                                //We send the message

                                if(mysqli_query($link,'insert into pm (id, id2, title, user1, user2, message, timestamp, user1read, user2read)values("'.$id.'", "1", "'.$otitle.'", "'.$_SESSION['id'].'", "'.$dn1['recipid'].'", "'.$omessage.'", "'.time().'", "yes", "no")'))
                                {
?>
<div class="message">The message has successfully been sent.<br />
<a href="list_pm.php">List of my Personal messages</a></div>
<?php
                                        $form = false;
                                }
                                else
                                {
                                        //Otherwise, we say that an error occured
                                        $error = 'An error occurred while sending the message';
                                }
                        }
                        else
                        {
                                //Otherwise, we say the user cannot send a message to himself
                                $error = 'You cannot send a message to yourself.';
                        }
                }
                else
                {
                        //Otherwise, we say the recipient does not exists
                        $error = 'The recipient does not exists.';
                }
        }
        else
        {
                //Otherwise, we say a field is empty
                $error = 'A field is empty. Please fill of the fields.';
        }
}
elseif(isset($_GET['recip']))
{
        //We get the username for the recipient if available
        $orecip = $_GET['recip'];
}
if($form)
{
//We display a message if necessary
if(isset($error))
{
        echo '<div class="message">'.$error.'</div>';
}
//We display the form
?>
 <div class="container contentContainer" id="topContainer">
        <div class="row">

            <div class="col-md-12 " id="topRow">


    <form class="marginTop" action="new_pm.php" method="post">
              <div class="form-group required">           
        <label for="title"> Subject* </label>
        <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($otitle, ENT_QUOTES, 'UTF-8'); ?>" id="title" name="title" /><br />
              </div>

               <div class="form-group required">
        <label for="recip">Recipient<span class="small">(UserEmail)*</span></label>
        <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($orecip, ENT_QUOTES, 'UTF-8'); ?>" id="recip" name="recip" /><br />
               </div>

         <div class="form-group required">
        <label for="message">Message*</label>
        <textarea class="form-control marginBottom" cols="40" rows="5" id="message" name="message"><?php echo htmlentities($omessage, ENT_QUOTES, 'UTF-8'); ?></textarea><br />
        <input type="submit" value="Send"  class="btn btn-success"/>
       </div>
    </form>
</div>
</div>
</div>
<?php
}
}
else
{
        echo '<div class="message">You must be logged to access this page.</div>';
}
?>

When i click the submit button nothing happens , but when i load new_pm.php itself in a new tab and click submit it works perfectly and send the message.

Any idea how to make it work the same in the div.

Really appreciate the help.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • duanchi3109 2016-02-02 08:20
    已采纳

    Create a file named ajax.php with the fallowing

    <?php
    //We check if the user is logged
    if(isset($_SESSION['id']))
    {
    $otitle = '';
    $orecip = '';
    $omessage = '';
    //We check if the form has been sent
    if(isset($_POST['title'], $_POST['recip'], $_POST['message']))
    {
            $otitle = $_POST['title'];
            $orecip = $_POST['recip'];
            $omessage = $_POST['message'];
    
            //We remove slashes depending on the configuration
    
                if(get_magic_quotes_gpc())
            {       
                    //$otitle = stripslashes($otitle);
                    //$orecip = stripslashes($orecip);
                    //$omessage = stripslashes($omessage);
            }
    
            //We check if all the fields are filled
    
            if($_POST['title']!='' and $_POST['recip']!='' and $_POST['message']!='')
            {
                    //We protect the variables
    
                   // $title = mysqli_real_escape_string($otitle);
                    //$recip = mysqli_real_escape_string($orecip);
                   // $message = mysqli_real_escape_string(nl2br(htmlentities($omessage, ENT_QUOTES, 'UTF-8')));
    
                    //We check if the recipient exists
    
                    $dn1 = mysqli_fetch_array(mysqli_query($link,'select count(id) as recip, id as recipid , (select count(*) from pm) as npm from users where email ="'.$orecip.'"'));
    
                    if($dn1['recip']==1)
    
                    {
                            //We check if the recipient is not the actual user
    
                            if($dn1['recipid']!=$_SESSION['id'])
                            {
                                    $id = $dn1['npm']+1;
    
                                    //We send the message
    
                                    if(mysqli_query($link,'insert into pm (id, id2, title, user1, user2, message, timestamp, user1read, user2read)values("'.$id.'", "1", "'.$otitle.'", "'.$_SESSION['id'].'", "'.$dn1['recipid'].'", "'.$omessage.'", "'.time().'", "yes", "no")'))
                                    {
    
    
                                            $form = false;
                                    }
                                    else
                                    {
                                            //Otherwise, we say that an error occured
                                            $error = 'An error occurred while sending the message';
                                    }
                            }
                            else
                            {
                                    //Otherwise, we say the user cannot send a message to himself
                                    $error = 'You cannot send a message to yourself.';
                            }
                    }
                    else
                    {
                            //Otherwise, we say the recipient does not exists
                            $error = 'The recipient does not exists.';
                    }
            }
            else
            {
                    //Otherwise, we say a field is empty
                    $error = 'A field is empty. Please fill of the fields.';
            }
    }
    elseif(isset($_GET['recip']))
    {
            //We get the username for the recipient if available
            $orecip = $_GET['recip'];
    }
    
    //We display a message if necessary
    if(isset($error))
    {
            echo json_encode(array("message"=>$error));
    } else {
          echo json_encode(array("message"=>"ok"));
    }
    

    } ?>

    Next:

    your form page will look like:

    head
    body tag
    ...
     <div class="container contentContainer" id="topContainer">
            <div class="row">
    
                <div class="col-md-12 " id="topRow">
    
    
    <div class="message">The message has successfully been sent.</div><br />
        <form class="marginTop newclass" action="new_pm.php" method="post">
                  <div class="form-group required">           
            <label for="title"> Subject* </label>
            <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($otitle, ENT_QUOTES, 'UTF-8'); ?>" id="title" name="title" /><br />
                  </div>
    
                   <div class="form-group required">
            <label for="recip">Recipient<span class="small">(UserEmail)*</span></label>
            <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($orecip, ENT_QUOTES, 'UTF-8'); ?>" id="recip" name="recip" /><br />
                   </div>
    
             <div class="form-group required">
            <label for="message">Message*</label>
            <textarea class="form-control marginBottom" cols="40" rows="5" id="message" name="message"><?php echo htmlentities($omessage, ENT_QUOTES, 'UTF-8'); ?></textarea><br />
            <input type="submit" value="Send"  class="btn btn-success"/>
           </div>
        </form>
    </div>
    </div>
    </div>
    
    ..
    body tag
    

    next your ajax should look like this and needs to be placed in the footer of the form page

    $(document).ready(function (){
    $('input[type="submit"]').on("click",function(){
     $.ajax({
            url: "ajax.php"
            data:$(this).parent('form').serialize();
            success:function(data) {
               if(data.message == "ok") {
                 $('.message').text('The message has successfully been sent.');
                 $(this).parent('form').remove();
               }
               else {
                 $('.message').text(data.message);
               }
            }
        });
    
    
        });
    });
    

    Note: with links: i appended a newclass to the form and now you can use any object to trigger your ajax

    $('a').on("click",function() {
         $.ajax({
                url: "ajax.php"
                data:$('.newclass').serialize();
                success:function(data) {
                   if(data.message == "ok") {
                     $('.message').text('The message has successfully been sent.');
                     $('.newclass').remove();
                   }
                   else {
                     $('.message').text(data.message);
                   }
                }
            });
    
    
            });
    
    点赞 打赏 评论
  • dopq87915 2016-02-02 08:01
    $(document).ready(function (e){
    $.ajax({
        url: "new_pm.php"
    }).done(function(data) {
        $("#content").html(data);
    });
    
    $("#content").on("click", "a", function(e) {
        e.preventDefault();
        var html = this.href;
        $("#content").load(html)
    });});
    

    use this code

    点赞 打赏 评论
  • dongxi4235 2016-02-02 08:45

    Thank you a ton for the complete answer , but the ajax only works if there is a submit button and it does not work with links , can we put an if statement inside like this:

        $(document).ready(function (){ if (input[type="submit"])
    $('input[type="submit"]').on("click",function()
     $.ajax({
            url: "ajax.php"
            data:$(this).parent('form').serialize();
            success:function(data) {
               if(data.message == "ok") {
                 $('.message').text('The message has successfully been sent.');
                 $(this).parent('form').remove();
               }
               else {
                 $('.message').text(data.message);
               }
            }
        })
    
    
        });        else (   $.ajax({
        url: "new_pm.php"
    }).done(function(data) {
        $("#content").html(data);
    });
    
    $("#content").on("click", "a", function(e) {
        e.preventDefault();
        var html = this.href;
        $("#content").load(html)
    });
    });
    
    点赞 打赏 评论

相关推荐 更多相似问题