Link to article in module

Question

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?

Answer 1

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