[SOLVED] Use a new JavaScript function in new tab in Form Ticket Page

Johan Romo · 2023-05-15 20:39:05

Hi everyone.

I am developing a ticket's plugin for a personal purpose. This plugin adds a new tab in form ticket page, the new tab has 3 dropdowns:

- The First One has countries around the world.
- The second one has states from these countries.
- The last one has cities from these states.

The idea is that I choose United States (for example) and the state's dropdowns has to show only states from this country, and when I choose California I have to see only cities from California.

I have created a new php class call it "localhost/my_glpi_project/front/test/dropdowns.php" and the dynamic dropdowns work fine due to this html script:

});

//Call to ajax File to do the SELECT Query for Cities Table
    $('#state').on('change', function(){
        var stateID = $(this).val();
        if(stateID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'state_id='+stateID,
                success:function(html){
                   $('#city').html(html);
                }
            });
        }else{
            $('#city').html('<option value="">Selecciona el Estado Primero</option>');
        }
   });
});
</script>

But, when I work with the PHP class that my plugin uses to draw the dropdowns inside the new tab in form ticket page, the HTML works fine but the script do nothing. I also use <script>console.log("Hello World");</script> to print a simple Hello World in Browser's console, but that even does not work.

How can I write the code correctly to print a small comment to the Browser's console from my new tab in formt ticket page?

This would help me to try to figure it out a solution for my script $(document).ready(function(){})

Thank you.

Last edited by Johan Romo (2023-09-15 19:45:00)

cconard96 · 2023-05-16 23:31:31

It is difficult to debug custom plugins without knowing the full code.
How are you adding this tab and what is in the class that represents the tab?

If you would like to see how another plugin adds a new tab to a form, you can look at my "dev" plugin:
https://github.com/cconard96/glpi-dev-plugin

In my setup.php file you can see that I register classes for by "PluginDevDbschema" and "PluginDevClassviewer" classes and specify that they should be added as tabs on every loaded itemtype.

Plugin::registerClass(PluginDevDbschema::class, [
    'addtabon' => get_declared_classes()
]);
Plugin::registerClass(PluginDevClassviewer::class, [
    'addtabon' => get_declared_classes()
]);

For non-development plugins this would be an array of specific classes like "[Ticket::class]" in your case.

In my "PluginDevDbschema" class (inc/dbschema.class.php), you can see I have getTypeName, getTabNameForItem, displayTabContentForItem functions which are essential for the functionality of adding a tab.
The "displayTabContentForItem" function is where you would echo all HTML content needed. You may also include your script tag here.

Johan Romo · 2023-05-17 20:54:19

Hi cconard96.

First, I thank you for your time and support.

I have fix my problem. As you say, inside the function "displayTabContentForItem" I have wroten all the HTML code, but the system couldn't find the /js/jquery.min.js file used in a script. Due to the system couldn't find this file, all scripts fail and even Console.log did not work.

I find out this problem using the dev tools for Chrome, so, I just had to call the js and Ajax files correctly, with the right path.

I am gonna share part of my class code to everybody, it could be useful:

<?php 

include_once ("../../../../inc/includes.php");


class PluginChooseCountriesStatesCities extends CommonGLPI
{
     /**
     * This function is called from GLPI to allow the plugin to insert one or more item
     *  inside the left menu of a Itemtype.
     */
    function getTabNameForItem(CommonGLPI $item, $withtemplate=0)
    {
        return self::createTabEntry('City Selection'); /*New Tab's Name*/
    }
 
    /**
     * This function is called from GLPI to render the form when the user click
     *  on the menu item generated from getTabNameForItem()
     */
    public static function displayTabContentForItem(CommonGLPI $item, $tabnum=1, $withtemplate=0)
    {
?>
       

<head>

<!-- jQuery library -->
<script src="../plugins/cityselection/inc/Test/js/jquery.min.js"></script>

<script type="text/javascript">console.log('Hola a Todos');</script>

<script type='text/javascript'>
$(document).ready(function(){
    $('#country').on('change', function(){
        var countryID = $(this).val();
        if(countryID){
            $.ajax({
                type:'POST',
                url:'../plugins/cityselection/inc/Test/ajaxData.php',
                data:'country_id='+countryID,
                success:function(html){
                    $('#state').html(html);
                }
            });
        }else{
            $('#state').html('<option value="">Selecciona el Pais Primero</option>');
       }
    });

    $('#state').on('change', function(){
        var stateID = $(this).val();
        if(stateID){
            $.ajax({
                type:'POST',
                url:'../plugins/cityselection/inc/Test/ajaxData.php',
                data:'state_id='+stateID,
                success:function(html){
                    $('#city').html(html);
                }
            });
        }else{
            $('#city').html('<option value="">Selecciona el Estado Primero</option>');
        }
   });

});
</script>

</head>
<body>
...
</body>

<?php
        return true;
    }
}
?>

Forum GLPI-Project

Announcement

#1 2023-05-15 20:39:05

[SOLVED] Use a new JavaScript function in new tab in Form Ticket Page

#2 2023-05-16 23:31:31

Re: [SOLVED] Use a new JavaScript function in new tab in Form Ticket Page

#3 2023-05-17 20:54:19

Re: [SOLVED] Use a new JavaScript function in new tab in Form Ticket Page

Board footer