using ajax inside a component without using com_ajax? [duplicate]

Question

I making a practice component and i would like to try make an ajax search . Inside my component i made 2 methods. Method search() and searchRes(). The first has the html form for the search bar and the second one handle the php->mysql work returning the results. At the moment i print the results @ index.php?option=com_pelatol&task=searchRes.

Altough i would like to implement some ajax to ouput the results below the form. Im trying for hours now achieve the correct jquery script but cant get it done. I tried do it with com_ajax but i got far more lost than without it.

This is how the script is looking at the moment:

$js = <<<JS
(function ($) {
    $(document).on('click', '.srcButton', function () {
        var value   = $('.ajaxform').serialize(),
            request = {
                    'option' : 'com_pelatol',
                    'component' : 'com_pelatol',
                    'data'   : value,
                    'format' : 'raw'


            };

        $.ajax({
            type   : 'GET',
            url    : 'index.php?option=com_pelatol&task=searchRes'
            data   : request,
            format : raw,
            success: function (response) {
                $('.theResults').html(response);
            }
        });
        return false;
    });
})(jQuery)
JS;
$doc->addScriptDeclaration($js);

Im sure this is wrong but dunno how to fix it:

'option' : 'com_pelatol',
'component' : 'com_pelatol',

Method search() (i removed the action from Form so it wont redirect)

 function search() {
    //action="'.$route.'" method="GET" id="ajaxform" 
    $route= JRoute::_( 'index.php?option=com_pelatol&task=searchRes');
    $html='<div class="searchContainer">';
    $html.='<h3 style="text-align:center;"> Search Area </h3>';
    $html.='<p>  Search By term: </p>';
    $html.='<form ><div class="radio">';
    $html.='<input type="hidden" name="option" value="com_pelatol" />';
    $html.='<input type="hidden" name="task" value="searchRes" />';
    $html.='<input id="id" type="radio" name="term" value="ID">';
    $html.='<label for="id">Id</label>';
    $html.='<input id="lastName" type="radio" name="term" value="LASTNAME">';
    $html.='<label for="lastName">Last Name</label>';
    $html.='<input id="firstName" type="radio" name="term" value="FIRSTNAME">';
    $html.='<label for="firstName">First Name</label>';
    $html.='<input id="email" type="radio" name="term" value="EMAIL">';
    $html.='<label for="email">Email</label>';
    $html.='<input id="all" type="radio" name="term" value="all">';
    $html.='<label for="all">All</label>';
    $html.='<br/><br/>';
    $html.='<input type="text" name="query"/>';
    $html.='<input class="srcButton"? type="submit" value="Search"/>';
    $html.='</div></form></div>';
    $html.='<div id="theResults"></div>';
    echo $html;


    }

and this is the SearchRes Method:

function searchRes() {

$term=$_GET['term'];
$src=$_GET['query'];
if ($term=="all") {
    //will fill it later
}else {
    $hq=$term;
}
$db=JFactory::getDbo();
$query='Select * from #__pelatologio where '.$hq.' LIKE "'.$src.'"';
$db->setQuery($query);
$options=$db->loadObjectList();

foreach ($options as $row) {
    $query2='SELECT * from #__akinita where NAMEID='.$row->ID;
    $db->setQuery($query2);
    $options2=$db->loadObjectList();
    echo '<div class="resContainer">';
    echo '<div class="userRes">';
    echo '<span>ID: </span>';
    echo $row->ID;
    echo '<br/><span>Last Name: </span>';
    echo $row->LASTNAME;
    echo '<br/><span>First Name: </span>';
    echo $row->FIRSTNAME;
    echo '<br/><span>Email: </span>';
    echo $row->EMAIL;
    echo '</div>';
    echo '<br/><span>Ακίνητα Χρήστη</span>';
    foreach($options2 as $akin) {
        echo '<div class="akinRes">';
        echo '<span>ID: </span>';
        echo $akin->ID;
        echo '</br><span>Είδος: </span>';
        echo $akin->EIDOS;
        echo '</br><span>Περιοχή: </span>';
        echo $akin->PERIOXI;
        echo '</br><span>Εμβαδόν: </span>';
        echo $akin->EMBADON;
        echo '</br><span>Δωμάτια: </span>';
        echo $akin->IPNODOMATIA;
        echo '</br><span>Μπάνια: </span>';
        echo $akin->MPANIA;
        echo '</br><span>Ετος: </span>';
        echo $akin->ETOS;
        echo '</br><span>Θέρμανση: </span>';
        echo $akin->THERMANSI;
        echo '</br><span>Διαθέσιμο: </span>';
        echo $akin->DIATHESIMO;
        echo '</br><span>Οδός: </span>';
        echo $akin->ADDRESS;
        echo '</br><span>Τιμή: </span>';
        echo $akin->PRICE;


    }
    echo '</div>';

}
echo '<br clear="both" />';

}

Can someone enlight me more on how to do that ? I was thinking of creating a new component only for the ajax call.

Answer 1

There are quite a number of ways to call AJAX without com_ajax. Look at What Is The Proper Way To Make An AJAX Call to understand and choose a method, and then apply your search logic accordingly.

Answer 2

Just checking your JS, maybe it should be written like this, providing that it is a jQuery dependant script :

$js = "
    jQuery(document).ready(function() {
                    //your code
                });
            ";
JFactory::getDocument()->addScriptDeclaration($js);

Or

JFactory::getDocument()->addScriptDeclaration("
jQuery(function($) {
    //your code
});");