Making variables from edit.php available in auto.js
Permalink
Hi,
I have some variables that I pass from the controller to a form.php file with the set function (and form.php gets included in add.php and edit.php). But I would like to be able to access these variables in auto.js too.
I read in another post that one should be able to add something like :
in edit.php, which would make the variable n in this example available for use in auto.js. But it does not work (n is undefined when I try to use it in auto.js).
Is there another way ?
(For some variables, I can read their values in the fields of the form that gets displayed. But I have other variables that are not supposed to be displayed.)
I have some variables that I pass from the controller to a form.php file with the set function (and form.php gets included in add.php and edit.php). But I would like to be able to access these variables in auto.js too.
I read in another post that one should be able to add something like :
<script type="text/javascript"> var n = <?php echo $numberOfImages; ?>; </script>
in edit.php, which would make the variable n in this example available for use in auto.js. But it does not work (n is undefined when I try to use it in auto.js).
Is there another way ?
(For some variables, I can read their values in the fields of the form that gets displayed. But I have other variables that are not supposed to be displayed.)
Thanks for your answer. I noticed a few strange things :
1. The auto.js indeed seems to be executed before the script in edit.php, even though I enclosed the code in auto.js with $(function() { ... }); , which should prevent it from executing before the DOM is completely available, shouldn't it ? (I have knowledge in "pure" JavaScript, but it is the first time I use jQuery). Please could you shed some light about this ?
However, from auto.js I can always read a value that has been displayed in the html form :
var n = parseInt($('#numberOfImages').attr('value')); always works (which means the DOM is always completely available, isn't it ?)
2. Sometimes, variables are successfully passed from edit.php to auto.js. In fact, if I do what I put in my first post above, and in auto.js I do the following :
alert(typeof n);
then the first time when I edit the block in my concrete5 webpage in Edit mode, I get an alert box saying "undefined". This is always displayed before the inline script, as you call it, is executed.
However, if I then click "Cancel" when editing the block, then try to edit the block again, I get "number" instead of "undefined" ! How is this possible ??
What I also don't understand at all is that if instead of using alert(typeof n);
in my auto.js file, I use
alert(n);
then the value of n will never be displayed (not the first time I try to edit the block, and not the subsquent times too). I really have no idea of why this happens !
3. I think I know what you are talking about in your 3rd and 4th answer points, but not in your 1st and 2nd. How would I put a delay before auto.js is initialised ? And what do you mean by turning the code in auto.js into an event handler ?
Thanks
1. The auto.js indeed seems to be executed before the script in edit.php, even though I enclosed the code in auto.js with $(function() { ... }); , which should prevent it from executing before the DOM is completely available, shouldn't it ? (I have knowledge in "pure" JavaScript, but it is the first time I use jQuery). Please could you shed some light about this ?
However, from auto.js I can always read a value that has been displayed in the html form :
var n = parseInt($('#numberOfImages').attr('value')); always works (which means the DOM is always completely available, isn't it ?)
2. Sometimes, variables are successfully passed from edit.php to auto.js. In fact, if I do what I put in my first post above, and in auto.js I do the following :
alert(typeof n);
then the first time when I edit the block in my concrete5 webpage in Edit mode, I get an alert box saying "undefined". This is always displayed before the inline script, as you call it, is executed.
However, if I then click "Cancel" when editing the block, then try to edit the block again, I get "number" instead of "undefined" ! How is this possible ??
What I also don't understand at all is that if instead of using alert(typeof n);
in my auto.js file, I use
alert(n);
then the value of n will never be displayed (not the first time I try to edit the block, and not the subsquent times too). I really have no idea of why this happens !
3. I think I know what you are talking about in your 3rd and 4th answer points, but not in your 1st and 2nd. How would I put a delay before auto.js is initialised ? And what do you mean by turning the code in auto.js into an event handler ?
Thanks
Edit dialogs can do funny things on add (vs edit) because the block does not yet exist and there is no block ID yet.
They load scripts dynamically, so in some cases I find a jQuery ready handler doesn't trigger reliably, so I tend to just use closure functions to wrap my scripts and keep them namespaced.
For 1&2, you need a structure like
See:
http://www.w3schools.com/jsref/met_win_settimeout.asp...
http://api.jquery.com/trigger/
Having said all that, in an edit dialog I tend to use (4). If I need to communicate some configuration values to another script I use (3).
They load scripts dynamically, so in some cases I find a jQuery ready handler doesn't trigger reliably, so I tend to just use closure functions to wrap my scripts and keep them namespaced.
For 1&2, you need a structure like
(function(){ var your_auto_function_name = function (paramns){ //your auto code } // either this for (1) setTimeout(function(){your_auto_function_name(params)}, 100); // or this for (2) $('#my_edit_div_id').on('my_own_event', function(){your_auto_function_name(params)}); })(); //for (2) in your edit code $('#my_edit_div_id').trigger('my_own_event', [params]);
See:
http://www.w3schools.com/jsref/met_win_settimeout.asp...
http://api.jquery.com/trigger/
Having said all that, in an edit dialog I tend to use (4). If I need to communicate some configuration values to another script I use (3).
Ways round it
1. The kludge - put a very small time delay about the initialisation in your auto.js
2. Turn the auto.js code into an event handler and trigger the event from the inline script with your variables as parameters.
3. Attach the data as data-name="value" attributes in the html and then pull those values from the data attributes in auto.js. Removes the need for inline <script>.
4. Make it all inline in the <script> tags and thus remove the need for auto.js.
5. 3&4 hybrid, possibly making the inline script cleaner.