Member Avatar for piers

Hi,

I have been trying to use AJAX with JQuery in a feedback page I am trying to build. I can get the feedback submitted without going to a new page, but currently I can only see the feedback updated when I refresh the page. I called the feedbackdisplay.php file but it only gets called when loading the page instead of when there is a change in the database. Any ideas why this is the case?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <link rel="stylesheet" type="text/css" href= "widestyle.css" id="style" title="style"/>
            <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="jquery-1.7.2.js"> </script>
        <script src="http://malsup.github.com/jquery.form.js"></script> 

        <title>
        My homepage 
        </title>


        </head>

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

            $('#myForm').ajaxForm(function() { 

               // attach handler to form's submit event 
            $('#myForm').submit(function() { 
            // submit the form 

            $(this).ajaxSubmit(); 

            // return false to prevent normal browser submit and page navigation 
            return false; 

            });


         }); 


            $('#list').load("feedbackdisplay.php");

}); 



        </script>

    <div id="main">

        <div id="nav">
            <span class="linkcontainer"><a href="index.html">Home </a></span>
            <span class="linkcontainer"><a href="pierscv.html">My CV </a></span>
            <span class="linkcontainer"><a href="tutorials.html"> Tutorials </a></span>
            <span class="linkcontainer"><a href="feedbackhome.php"> Feedback </a></span>
            <a class="linkcontainer contact" href="contact.html"> Contact </a>
        </div>
        <h1>Feedback </h1>
        <div class="set" id="test">
        <h2 class="firstsection">Introduction</h2>


        <p class="firstpara">
        This page is designed as a knowledgebase of different things that I have picked up over the years to do with software and programming.
        I have designed this page so that I can use it as a quick reference but also so that anyone can use it to help them.
        You will find information on using Microsoft office, useful Javascript I have picked up, HTML5, css and a list of different doctypes
        and video editing using Adobe Premiere Elements.<br/><br/>
        <strong> If there is any other content you would find useful on this site to do with software and programming then let me know. </strong>

        </p>
        </div>
        <div class="set">
        <h2>Feedback form<button class="sh">show/hide </button></h2>
        <p class="firstpara">
        Please complete the form below to provide your feedback.
        </p>

        <form action="feedback.php" method="post" id="myForm">


            Enter Name: <span style="position:relative; left:20px;"><input type="text" id="text" name="text"/> </span><br/><br/>
            Enter feedback: <textarea id="feedback" name="feedback"> Enter Feedback here
  • 3 Contributors
  • 3 Replies
  • 106 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by piers
Member Avatar for GliderPilot

Your load call is only within the document ready so it will only ever get called the once. If you add it to your submit event handler as well it will re-load it on the submit. You might want to add it to the ajaxSubmit success option so it only reloads if the comment was posted successfully:

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

            $('#myForm').ajaxForm(function() { 

               // attach handler to form's submit event 
            $('#myForm').submit(function() { 
            // submit the form 

            $(this).ajaxSubmit({ success: function() { $('#list').load("feedbackdisplay.php"); } }); 

            // return false to prevent normal browser submit and page navigation 
            return false; 

            });


         }); 


            $('#list').load("feedbackdisplay.php");

}); 



        </script>
Edited by GliderPilot because: Typo
Member Avatar for pixelsoul

Well, according to this plugins documentation in the JS file that you're using, you should not use ajaxSubmit if you are using ajaxForm already.

Do not use both ajaxSubmit and ajaxForm on the same form.  These
functions are mutually exclusive.  Use ajaxSubmit if you want
to bind your own submit handler to the form.

So looking back at the documentation on the website http://malsup.com/jquery/form/
You could do something as easy as this

    <script type="text/javascript">  
    $(document).ready(function() {
        var options = { 
            target: '#list', 
            url: 'feedback.php', 
            success: function() { 
                $('#list').load("feedbackdisplay.php");
            } 
        }; 

        // pass options to ajaxForm 
        $('#myForm').ajaxForm(options);
    }); 
    </script>

OR you could just stick the options within the function instead of declarying them in variables before the call to the function.

    <script type="text/javascript">  
    $(document).ready(function() {
        $('#myForm').ajaxForm({
            target: '#list', 
            url: 'feedback.php',
            success: function() {
                $('#list').load("feedbackdisplay.php");
            } 
        }); 
    }); 
    </script>
Member Avatar for piers

Thanks for the replies, this was really helpful.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.