Je fais un composant de pratique et je voudrais essayer de faire une recherche ajax. Dans ma composante j'ai fait 2 méthodes. Méthode search()
et searchRes()
. Le premier a le formulaire html pour la barre de recherche et le second gère le travail php-> mysql qui renvoie les résultats. Au moment où j'imprime les résultats @ index.php?option=com_pelatol&task=searchRes
.
Bien que je veuille implémenter quelques ajax pour afficher les résultats sous le formulaire. J'essaie pendant des heures maintenant d'obtenir le bon script jQuery mais je ne peux pas le faire. J'ai essayé de le faire avec com_ajax mais je me suis beaucoup plus perdu que sans.
Voici comment le script se penche sur le 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);
Je suis sûr que c'est faux, mais je ne sais pas comment résoudre ce problème:
'option' : 'com_pelatol',
'component' : 'com_pelatol',
Méthode search () (j'ai supprimé l'action de Form pour qu'elle ne soit pas redirigée)
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;
}
et c'est la méthode SearchRes:
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" />';
}
Quelqu'un peut-il m'éclairer davantage sur la façon de procéder? Je pensais créer un nouveau composant uniquement pour l'appel ajax.
Il existe de nombreuses façons d'appeler AJAX sans com_ajax. Regardez Quel est le moyen approprié de créer un AJAX appel pour comprendre et choisir une méthode, puis appliquez votre logique de recherche en conséquence.
En vérifiant simplement votre JS, il devrait peut-être être écrit ainsi, à condition qu'il s'agisse d'un script dépendant de jQuery:
$js = "
jQuery(document).ready(function() {
//your code
});
";
JFactory::getDocument()->addScriptDeclaration($js);
Ou
JFactory::getDocument()->addScriptDeclaration("
jQuery(function($) {
//your code
});");