CODEWITHSUNDEEP
phpjavascriptajax
roflwaffle
roflwaffle

Reputation: 30666

How to restructure an AJAX search form

I have this page (A) that has an input field and once you submit it, it makes an AJAX call and displays the results. Now, I need a search field on another page (B) that once you submit it, it redirects you to the former page (A) with the results displayed as if you did it on the first page (A).

What would be the best way to handle this?

Upvotes: 2

Views: 166

Answers (6)

Roger Russel
Roger Russel

Reputation: 11

I make it using ajax, jquery and json ...

in page(A) you make the call ...

$('input[name="find"]').live('click',function(){
  if($(this).val()){
  $.getJSON('find.php?users=' + $(this).val(), function(data) {
        var rows= "";
                 $.each(data.users, function(i,user){

            rows+= i % 2 ? '<tr class="flip">' : '<tr class="flop">'; ...

            rows+= '<td>' + user.id         + '</td>';
            rows+= '<td>' + user.name       + '</td>';
            rows+= '<td>' + user.score      + '</td>';
            rows+= '</tr>';

        });

        $('#list tbody').html(rows);
     }
   });
});

The page find.php or page(B) 



<?php

$user = $_GET['users'] ;

// Search code by field ... 

// Print de result in JSON format ...

?>

return the json data like this ...



{ 
  "action" : "find user",
  "founds" : "2",
  "users"  : [
       {
          "id"    : "33",
          "name"  : "Peter Park",
          "score" : "343"

       },
        {
          "id"    : "1",
          "name"  : "Clark Kent",
          "score" : "1200"
       }
  ]
}

the page(A) like this ...

<table id='list' >
<thead><tr><th>Id</th><th>Name</th><th>Score</th></tr></thead>
<tbdoy>
</tbody>
</table>

<input type="text" name="find" value="Find User">

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191819

I am unsure as to why you need to have two separate pages with this search. The easiest thing to do would just be to redirect the user from page B to page A with the search already filled in. In other words, page B really does nothing:

<?php
   /**
    * Page B
    */
   if(isset($_REQUEST['b_search'])) {
      header("Location: a_search.php?a_search=$_REQUEST[b_search]");
   }
   echo //page content
?>

<?php
   /**
    * Page A
    */
   $search = isset($_REQUEST['a_search']) ? $_REQUEST['a_search'] : null;
   //handle request for non-JS users, I hope
   echo //page content with search filled in
?>

/**
 * JS
 */
document.ready = function () {
   if (document.getElementById('search_field').value != null) {
      //make ajax call
   }
}

Upvotes: 1

Quang Van
Quang Van

Reputation: 12095

So you want this Ajax?

To do it with Ajax, I recommend you create a page ajax.php all it does is accept a query and spit out the result.

ajax.php?query=foo

and then output the result in a list or something...

Then use javascript to display it...

But that's only if you want to use ajax.

Upvotes: 0

Mahdi.Montgomery
Mahdi.Montgomery

Reputation: 2024

With a single logic (if the ajax load time isn't a concern) you could do something like this (or any variation on it):

<?php 
$Term = (isset($_REQUEST['Term'])) ? $_REQUEST['Term'] : 'null'; 
// Optional   default term 
?>
<script>
    function ajax(term){
        if (term == null)
            return false;
    // ajax function for the search box
    // probably fired onclick/onsubmit currently?
    }

    $(document).ready(function(){
        ajax(<?=$Term?>);
    });
</script>

Alternatively you could file_get_contents("ajax_request.php?param=$PostValue") the ajax handler and output without an ajax call onload.

Upvotes: 0

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

Have a single method that does the search functionality. This method can be called in two ways.. 1. Using Ajax 2. Using url parameters

When you are calling page A from page B you will pass the search query as url params.. so search is done and the page is displayed with the results.

When you search using page A.. the ajax method is called and a json/xml data is returned.

Basically, Your page just needs to have both the logic incorporated!

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039538

You could make pageA.php take a query parameter containing the search keywords and if this parameter is assigned a value show the results based on this value. The results will be a simple include so that it could be reused for both the AJAX query and the normal query.

Upvotes: 1

Related Questions