0

Good day. There is a custom field in my module mod_expandAjaxReq.xml

<fieldset name="basic" addfieldpath="/modules/mod_expandajaxreq/models/fields">
    <field name="request_url" 
           type="edrop" 
           label="MOD_EXPANDAJAXREQ_URL" 
           description="MOD_EXPANDAJAXREQ_URL" 
    />

edrop.php

<?php
defined('JPATH_PLATFORM') or die;
use Joomla\CMS\Factory;
use Joomla\CMS\Form\FormField;

class JFormFieldEdrop extends FormField
{
    protected $type = 'edrop';

    protected function getInput()
    {
        $document = JFactory::getDocument();
        $app = JFactory::getApplication();
        if ($app->isAdmin()) {
            $document->addScript(JURI::root()."modules/mod_expandajaxreq/assets/js/expandAjaxReq.js");
            $document->addStyleSheet(JURI::root()."modules/mod_expandAjaxReq/assets/css/expandAjaxReq.css");
        }
    
        $html = array();

        $html[] = '         <span class="input-append">';
        $html[] = '             <input type="url" id="ear_request_url" value="" autocomplete="off" size="30" >';                                                         
        $html[] = '             <button id="ear-btn-article-modal" class="btn btn-primary" type="button" title="Insert link to article" data-toggle="modal" data-target="#earModal"><span class="icon-file-add"></span></button>';
        $html[] = '         </span>';
        /*- Modal-*/ 
        $html[] = '<div  id="earModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">';
        $html[] = ' <div class="modal-dialog modal-lg">';
        $html[] = '     <div class="modal-content">';
        $html[] = '         <div class="modal-header">';
        $html[] = '             <h4 class="modal-title" id="exampleModalLongTitle">Modal title</h4>';
        $html[] = '             <button type="button" class="close" data-dismiss="modal" aria-label="Close">';
        $html[] = '                 <span aria-hidden="true">&times;</span>';
        $html[] = '             </button>';
        $html[] = '         </div>';
        $html[] = '         <div id="ear-modal-body" class="modal-body">';
        $html[] = '         </div>';
        $html[] = '     </div>';
        $html[] = ' </div>';
        $html[] = '</div>';
        return implode( "\n", $html );
    }
}

When I click on the ear-btn-article-modal button a modal window opens. I need:

  1. to load a list of articles with a filter field and pagination into the modal window:

    <div id="ear-modal-body" class="modal-body"></div>
    
  2. when selecting an article, insert a link to the article in the custom field

    <input type="url" id="ear_request_url" value="" autocomplete="off" size="30" >
    

Please tell me how to implement it?

0

A common solution would be to:

  • Add an input to your modal
  • While typing (or after) trigger an ajax call that gets a list of articles based on your search term and list the results then (incl. article item id) in the modal.
  • Selecting an article from this list triggers a modal close and sets the article id as value of a hidden field in your form (easily by js)

You can do an AJAX call like this from the module backend (JS):

function yourFancyFunctionAjax(moduleId){
let data = {
    'moduleId' : moduleId,
}
let request = {
    'data': JSON.stringify(data),
    'format': 'json',
    'option':'com_ajax',
    'module': 'modulename_without_mod',
    'method': 'functionNameInHelperPHP'
};
return jQuery.ajax({
    url: '/index.php',
    type : 'GET',
    data: request,
});

}

important is to use the URL "/index.php" otherwise the module searches in the backend path for the helper file.

the method name in helper PHP must be placed in the modules main class and looks like this:

..
method: myMethod
..

function name in helper:

public static function myMethodAjax(){...}

hope this helps

2
  • Thank you. This is understandable. How do I get a list of articles? How is it implemented in the editor, when inserting a link to an article.
    – antarey
    Jul 7 at 18:40
  • just use the default way for selecting data from the database : docs.joomla.org/Selecting_data_using_JDatabase
    – Marco
    Jul 7 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.