jQuery Auto-submit form inside of a <div> loads in new page

Question

I'm developing a project of "prettifying" of a part of an existing web application. There is a need of putting the existing code: search criteria form in one div, and search results in another div (forming a kind of tabs, but that's another story).

Using jQuery I was able to manage that, but right now I am struggling with the results page, which by itself is yet another form that auto-submits to another file (using document.form.submit() ), which is the final search results view. This auto-submit causes that the final view quits the destination div and loads as a new page (not new window).

So, the flow is like that:

1. First file, let's call it "criteria.html" loads the search criteria form (inside of a div) + another div (empty) destined to be filled with search results.:

 <div id="criteria">... form with search criteria here...</div> <div id="results"></div> 

1. On submit, using jQuery's "hide()" method, I hide the first div (surrounding the search criteria form), and make Ajax call to the second file, let's call it "results.php":

 <script> $("#criteria").hide(); $.ajax({ ..., url: "results.php", success: function(data){ $("#results").html(data); }, ... }); </script> 

results.php searches according to given criteria, and displays an "intermediary form" (which returns as a data result of the ajax query above) with a lot of hidden fields, and at the end executes:

<script>document.form.submit();</script>

which submits to another file, let's call it "resultsView.php"

1. This line causes that a result page shows outside the div "results", as a new page.

As there is a lot of logic in those files (more than 700 lines each), the idea of rewriting this monster just gives me creeps.

And now the question: is this a normal behavior (opening the result outside div)? I tried removing the document.form.submit() code and everything works fine (well, without showing the results from "resultsView.php"). It's this line that causes the viewport to reset. I also tried with empty pages (to eliminate the possibility of the interaction with contents of the pages) - still the same result.

I hope there is not too much text and the problem is clearly stated. Every suggestion of how to fix this will be greatly appreciated.

Answer 1

If I understand your question correctly, you need to process the final submit using ajax instead of <script>document.form.submit();</script> so that you can handle the results on-page. Traditional form submits will always reload/open the action page. If you want to avoid that you'll have to control the form submit response via ajax and handle the results accordingly... like you are doing with the first submit.

The only alternative I can think of is to make div id="results" an iframe instead, so that it contains the subsequent form submit. Of course, that unleashes further restrictions that may cause other troubles.

Answer 2

I am not sure if I understood your question, but maybe u can do something like this.

This is my JQuery script: [I just wait for the submission search. When it happens, I use the $.Post method to call a function that should return the Html results (You can include somenthing to hide any field you want using JQuery or css)].

<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("form#searchForm").submit(function() {
                    var theCity = $("select#chooseCity").val(); 
                    var theName = $("input#searchInput").val(); 
                    $.post("callProvideSearchResults.php", {theCity: theCity, theName: theName}, function(data) {
                        $("div#searchResults").html(data);
                    });
                  return false
                });
            });
        </script>

This is my Body: {it consists of the choice of a city, the a form to provide the name of the person you are lookng for and the place to provide the results.

<body>
    <FORM id="searchForm">
        <h2>Select the city: </h2>            
        <select id="chooseCity">
            <?php
            $theCitiesOptionsHTML = "cityOptions.html";
            require($thePathDataFiles.$theCitiesOptionsHTML);  / A large list of cities              
            ?> 
        </select>
        <h2> What is the name of the person </h2> 
        <P> <INPUT id="searchInput" TYPE="TEXT" SIZE=50></P>  
        <P><INPUT TYPE="submit" VALUE="search"></P> 
    </FORM>
    <div id="searchResults">
        <!-- Here: Search results -->
    </div>        
 </body>

// Function callProvideSearchResults.php // Just call the function that makes all the job and echo the $Html page

<?php
    include "provideSearchResults.php";
    $theName=$_POST['theName'];
    $theCity=$_POST['theCity'];
  echo  provideSearchResults($theName, $theCity);

?>

// provideSearchResults.php // Database connection and search

<?php

    function provideSearchResults($theName, $theCity) {

        include "databaseConnection.php";
        //database Queries
        // Generate $theHtml using strings or ob_start, for instance


        return $theHtml;
    }

?>