web-dev-qa-db-fra.com

Qu'est-ce qui dicte le code HTML généré pour les outils de recherche front-end?

Je ne suis pas vraiment un type front-end, et de nombreux domaines du code "créé par magie" restent un mystère pour moi, car cela "se produit" et j'en suis satisfait, ce sera donc probablement l'un des les "duh" moments pour moi.

Dans ce cas, je trouve deux façons très différentes de créer le code HTML des outils de recherche de la vue Liste à l'aide de Front-End. Je ne comprends pas où la fourchette dans la route est que les deux génèrent une sortie différente dans <div class="js-stools-container-filters">...</div>.

Le form.xml Est pratiquement identique, et dans les deux cas, view.html.php Commence essentiellement comme ci-dessous, mais display($tpl) rend un code HTML différent. J'ai essayé d'utiliser différents modèles de site, comparé les fichiers communs entre les deux et je ne sais plus où chercher.

Quel code, ou du moins quels facteurs, déterminent cette différence de sortie pour permettre l'utilisation des classes groupe-contrôle/étiquette-contrôle dans les outils de recherche?

class ExampleViewXyzs extends JViewLegacy
{
    ...
    public function display($tpl = null)
    {
        $app = JFactory::getApplication();

        $this->items         = $this->get('Items');
        $this->state         = $this->get('State');
        $this->pagination    = $this->get('Pagination');
        $this->user          = JFactory::getUser();
        $this->filterForm    = $this->get('FilterForm');
        $this->activeFilters = $this->get('ActiveFilters');
        ...
        parent::display($tpl);

Le code HTML généré désiré ressemble à ceci (Utilisation des classes de groupe de contrôle/étiquette de contrôle):

<div class="control-group">
    <div class="control-label">
        <label id="filter_meeting_year-lbl" for="filter_meeting_year" class="">Meeting Year</label>
    </div>
    <div class="controls">
        <select id="filter_meeting_year" name="filter[meeting_year]" class="inputbox chzn-done" onchange="this.form.submit()"
            <option> ................</option>
        </select>
    </div>
</div>

Le code HTML actuel et non désiré ressemble à ceci ( NO utilisation du contrôle -group/classes de contrôle-étiquette).

<select id="filter_source" name="filter[source]" class="inputbox chzn-done" onchange="this.form.submit();" style="display: none;">
        <option> ................</option>
</select>
<div class="chzn-container chzn-container-single" style="width: 220px;" title="" id="filter_source_chzn">
    <a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a>
    <div class="chzn-drop"><div class="chzn-search">
            <input autocomplete="off" class="active" type="text">
        </div>
        <ul class="chzn-results">
            <li class="active-result" data-option-array-index="0">- Select Something -</li>
            <li class="active-result" data-option-array-index="2">An Option</li>
        </ul>
    </div>
</div>

Et, sur une note connexe, avec l'utilisation de la classe de groupe de contrôle, les outils de recherche restent ouverts lorsque la page est soumise à nouveau, contrairement à l'autre. Je suppose/espère que cela sera résolu avec la réponse à ma question.

developmentfront-end
4
GDP

Votre problème est le plugin choisi de jQuery.

Les scripts JS sont presque toujours ajoutés à l'aide de la classe JHTML et de ses classes enfants. Je n’ai fait qu’un rapide coup d’œil, mais je pense que le script du problème est injecté à ln: 32 de /layouts/joomla/searchtools/default.php:

JHtml::_('searchtools.form', $formSelector, $data['options']);

Je suis à peu près certain que cela entraînera le chargement de /media/jui/js/jquery.searchtools.js Dans le navigateur, ce qui ajoutera toutes les classes choisies.

EDIT - J'ai jeté un coup d'œil au code JS. Vous devriez pouvoir désactiver Chosen en définissant une option avant la ligne mentionnée ci-dessus:

$data['options']['chosenSupport'] = false;
JHtml::_('searchtools.form', $formSelector, $data['options']);

Si tout va bien, vous obtiendrez le résultat souhaité, mais le support choisi sera toujours désactivé.

Les paramètres options sont normalement définis lors de l'appel de JLayoutHelper :: render (), ce serait donc la manière la plus techniquement correcte de procéder. Vous devrez parcourir votre code pour déterminer quelle exécution de JLayoutHelper :: render () est responsable du rendu de la sortie que vous souhaitez modifier, et modifiez-la en quelque chose comme:

JLayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => ['chosenSupport' => false]));

Comme autre hypothèse, la différence de sortie que vous avez remarquée peut être due à différentes options envoyées lors de l'appel de JLayoutHelper :: render ou à la présentation de différentes présentations.

3
chrBrd