[cletourneau]

Hi,

 

Back in the community version, I used javascript to customize my fields in the add and edit pages. It was pretty straight forward, I would merge my custom js file to the $crud->js_files and it would be loaded when the page was shown. I could add some triggers to some fields, and even insert some great controls like datetime pickers.

 

Now in the enterprise version, this trick doesn't work as easily as before, since add/edit uses modal dialogs that are not yet completely built when the datalist is shown. Jquery on() method works for javascript that needs to be triggered on some event of a field. But what I'm looking specifically is a way to trigger some javascript when the add/modals are shown. I could then override the fields the way I want (like change an input to a datetime picker).

 

The only modern way to accomplish this (I think) would be using MutationObserver. Now my code becomes much heavier and complex. I like my code to be very explicit and this is not helping.

 

Johnny, what about an option to "inject" some javascript files that would be loaded on demand after the add/edit modals are completely shown? I'm not sure what it would look like "API wise", but maybe you could think of something clean? If you could run the JS files after showing the dialogs, we could avoid using MutationObserver. A good way to start your exploration is to check this website. It's actually loading JS from and ajax call, and running it on demand, as explained here.

 

Anyone else have a better idea?

 

Thanks

 

Carl

[larasmith]

@cletourneau

 

I was able to load custom javascript or jquery by loading it in the view.

 

To manipulate or make elements do stuff, for example, a select during add/edit in my script I do this:

 

 

$(document).on('change','select[name=whateverthenameoftheelement]', function(){

alert('This works!');

})

 

I hope it helps!

 

Happy GCing! :) ;) :D​ 

[oak]

@larasmith

Can you tell me, where can i find the add-form code (HTML part)?

 

Thank you,

Regards

Olaf

[larasmith]

@larasmith

Can you tell me, where can i find the add-form code (HTML part)?

 

Thank you,

Regards

Olaf

 

 

Hi Olaf!

 

Could you elaborate?

Thanks!

[nunenthal]

Nothing because next post replace this post

[nunenthal]

Finally a not so crappy solution, but I think that john can easely create a best solution :-)

 

as I m a javascript eternal beginner ,this taked me hours, hope it will solve your problems. It solved mine.

 

first off all, change the name of the class of the elements for adding and editing :

 

$crud->callbackAddField('texte', function () { return '<textarea name="texte" rows="5" cols="100" class="customised_textearea"></textarea>';});

        $crud->callbackEditField('texte', function ($fieldValue, $primaryKeyValue, $rowData) 

        { 

            return '<textarea name="texte" rows="5" cols="100" class="customised_textearea">'.$fieldValue.'</textarea>';

            

        });

 

in my case my class name is : customised_textarea.

 

In this exemple we add a custom content editor.

 

Now in the footer add this script just after the generated css and js file :

 

in my exemple I implement jodit, to have a working exemple

 

<!--the cdn version of joedit :-->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.js"></script>

 

<!-- my little commented script -->

 <script>

    var jodit_used=0;

    

    var observer = new MutationObserver(function(mutations) {

    

    $("a[href*='/edit']").click(function() { jodit_used=0;}); // event on edit button to autorize relaunch

    $("a[href$='/add']").click(function() { jodit_used=0;}); // event on add button to autorize relaunch

    if ($('.customised_textearea').length!=0) // detect if your element is present in the dom

    {

        

        if (jodit_used==0) // authorize only one times by modal opening

        {

          

            jodit_used=1; // set value to 1 to not autorize re-open

            

            var editor = new Jodit('.customised_textearea'); //joedit is launched

        }

    }

});

observer.observe(document.body, {childList: true,subtree: true }); //observe change in the dom, very basic usage

 

</script>

[Jynxter]

Thank you for your solution. I'm not fluent enough with javascript to adequately use your code, but I appreciate sharing your solution.

 

It should be a simple 'add' or 'edit' page from /page/edit/1  or /page/add

 

the complexity required for this makes me regret going with GroceryCrud Enterprise, but I'm hoping to find solutions as I continue on.

[nunenthal]

Hello, more easy to use, simply include this code after that the jquery library is loaded.

And replace "alert('your code here');" by your javascript code. 

Your Javascript code will be lauch one time, each time that the modal is openning by add or edit button.

 

<script>

$( document ).ready(function() {

var used = 1;

var observer = new MutationObserver(function(mutations) {

$("a[href*='/edit']").click(function() { used = 0;});

$("a[href$='/add']").click(function() { used = 0;});

if ($('.modal-footer').length!=0)

    {

        if (used == 0)

        {

        used = 1;

 

        alert('your code here');

 

        }

    }

});

observer.observe(document.body, {childList: true, subtree: true });

});

</script>