Reputation: 27

Submit Button not working in 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.

Upvotes: 0

Answers (3)

madalinivascu

Reputation: 32354

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"));
}

} ?>

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);
               }
            }
        });


        });

Upvotes: 1

Babak

Reputation: 27

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)
});
});

Upvotes: 0

Pratik Bhalodiya

Reputation: 744

$(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

Upvotes: 0

Submit Button not working in Jquery Mobile

Answers (3)

Related Questions