File and page selector not working within a dialog
Permalink
I'm opening a dialog when clicking a link in a dashboard page. In that dialog I'm using the 'concrete/asset_library' and 'form/page_selector' helpers to display an image selector and a page selector. The controls are displayed properly, but when clicking on them and their dialog opens up, they don't work.
The page selector doesn't show any content, the image selector shows the file manager list but you cannot select an image. Actually I managed to select an image once, another time I got a "$ not defined" error in the console, but most of the times there is no error.
I have tracked the problem partially to javascript code not being executed in a jquery callback. For example, in concrete\tools\sitemap_search_selector.php the javascript code looks like this:
And when the dialog is loaded using ajax, document.ready has already fired so this part of the script won't be executed. However, even when removing the $(function() wrapper, the control doesn't work. Anyone encountered this before?
The page selector doesn't show any content, the image selector shows the file manager list but you cannot select an image. Actually I managed to select an image once, another time I got a "$ not defined" error in the console, but most of the times there is no error.
I have tracked the problem partially to javascript code not being executed in a jquery callback. For example, in concrete\tools\sitemap_search_selector.php the javascript code looks like this:
$(function() { var sst = jQuery.cookie('ccm-sitemap-selector-tab'); ... });
And when the dialog is loaded using ajax, document.ready has already fired so this part of the script won't be executed. However, even when removing the $(function() wrapper, the control doesn't work. Anyone encountered this before?
Problem solved finally, it was a javascript error that failed silently when the script was loaded with ajax. It's a quite fragile process for loading and executing scripts loaded with ajax using jquery. External scripts seems to have problem with $(function() {...}), but inline code on the loaded page handles it.
How did you fix this exactly? Did you put the script inline, or create your own window onload function? Can you show what your code looked like?
Yep, I ended up putting the scripts inline. Dependencies first, then the controller script that doesn't use a $(function()) wrapper. So the code looks like:
tools/myTool.php
js/myTool.js
What made me waste most time is the silent fail of javascript errors during ajax requests. So check the syntax carefully if everything suddenly stops working, or use the "debugger" statement (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) which breaks definitely.
tools/myTool.php
js/myTool.js
// Manipulating the above html, no $(function()...) $('div').css('color', 'red');
What made me waste most time is the silent fail of javascript errors during ajax requests. So check the syntax carefully if everything suddenly stops working, or use the "debugger" statement (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) which breaks definitely.
