asked on

Display ajax Search result of 3 vairables in 3 different locations

I have a AJAX search form which takes input from user. Pressing Submit will send the request to php file which run 3 different queries and save results in 3 different variable
Now on my search result page, I want to show results in 3 different section.

The searchresult1 variable result should display in 1st section (see attached diagram), searchresult2 variable result should display in 2nd section and so on.

see the layout of Search Results page here:

https://ibb.co/kH0Z3J

Open in new window

Code For Ajax Call

 function Search() {
        var input =jQuery("#input").val();
	var path_base = <?=base_path();?>
		
         jQuery.ajax({

        type: "POST",
        url: "myfile.php",
        data: {input:input,path_base:path_base},
        // dataType: "JSON",
        success: AjaxSucceeded,
        error: AjaxFailed
    });

Open in new window

myfile.php code

// Execute the query1
$q = '"' . $cl->EscapeString($_REQUEST['input']) . '"/1';
$searchresults = $cl->Query($q, 'search1' ); //second parameter is index name


// Execute the query2
$q2 = '"' . $cl2->EscapeString($_REQUEST['input']) . '"/1';
$searchresults2 = $cl2->Query($q2, 'search2' );

Open in new window

What is the best way to implement that. Can I combine all the 3 search results and then seperate them in AjaxSucccess method. In that case how to setup the html? Need coding help.

Thanks

Chris Stanyon

In your PHP, you could build an object or array containing all of your results and then pass that back to your AJAX call:

Something along these lines:

// PHP

$result = array(
    'result1' => $searchresults1,
    'result2' => $searchresults2,
    'result3' => $searchresults3
);

echo json_encode($result);

Open in new window

Now your AJAX succes handler will receieve an object with 3 properties - result1, result2, and result3, so you can do what you like with them:

// jQuery

$.ajax({
    method: "post",
    url: "myfile.php",
    data: {input:input,path_base:path_base}
})
.done(function(data) {
    // now you can access your results
    // data.result1
    // data.result2
    // data.result3
});

Open in new window

Yuri Boyz

ASKER

Thanks I have successfully received the data in .done function.
but When I do console.log then my data will be appeared in console.
I cannot print it with
alert(data.result1)
it just print [object] [object][object] etc.

So how to retrieve the values?

Chris Stanyon

OK. As it stands, the properties of your returned data are defined in your PHP:

$searchresults1 = $cl->Query($q, 'search1' );
...
'result1' = $searchresults1

When your AJAX call gets the returned value, each properties will be a representation of whatever your query returned. Without knowing that, I can't give you a precice answer, but assuming your query returned an arry of records, then in your AJAX handler, you could loop that array and handle the records one by one:

.done(function(data) {
    $.each(data.result1, function(i,record) {
        // do something with each record from result1
        console.log(record);
    });
});

Open in new window

An alternative approach is to build the HTML you want in the PHP script and just return that. You can then just add the resulting HTML directly to your page.

Yuri Boyz

ASKER

Yes its working. Actually Result1, Result2 and Results3 contains array of data like that:

[93] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => Arabic Page test
                    [status] => 1
                    [created] => 1522315423
                    [entity_id] => 93
                    [bundle] => mainpage
                )

        )

    [105] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => News Page 2
                    [status] => 1
                    [created] => 1522415885
                    [entity_id] => 105
                    [bundle] => news
                )

        )

    [106] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => TESTTT
                    [status] => 1
                    [created] => 1522416460
                    [entity_id] => 106
                    [bundle] => mainpage
                )

        )

    [107] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => NEws Page 1
                    [status] => 1
                    [created] => 1522416780
                    [entity_id] => 107
                    [bundle] => news
                )

        )

    [113] => Array
        (
            [weight] => 4558
            [attrs] => Array
                (
                    [title] => eeeeeeeee
                    [status] => 1
                    [created] => 1522441588
                    [entity_id] => 113
                    [bundle] => ztest
                )

Open in new window

Can data is printing on console how can I apply html on it. Can you give some code example?
and can i write separate loop for Result2 and Result3?

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Yuri Boyz

ASKER

thanks let me test and I will get back to you.

Yuri Boyz