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.
