⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Custom javascript for add/edit forms



cletourneau

cletourneau
  • profile picture
  • Member

Posted 16 October 2017 - 01:22 AM

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

larasmith
  • profile picture
  • Member

Posted 17 November 2017 - 01:26 AM

@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

oak
  • profile picture
  • Member

Posted 23 January 2019 - 11:18 AM

@larasmith

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

 

Thank you,

Regards

Olaf


larasmith

larasmith
  • profile picture
  • Member

Posted 24 January 2019 - 02:28 AM

@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

nunenthal
  • profile picture
  • Member

Posted 04 March 2019 - 15:20 PM

Nothing because next post replace this post


nunenthal

nunenthal
  • profile picture
  • Member

Posted 05 March 2019 - 15:44 PM

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

Jynxter
  • profile picture
  • Member

Posted 06 March 2019 - 19:25 PM

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

nunenthal
  • profile picture
  • Member

Posted 07 March 2019 - 13:27 PM

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>