Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Is this a bug or was it designed to work like this?


Go to End


7 Posts   1349 Views

Avatar
mi32dogs

Community Member, 75 Posts

9 April 2015 at 11:11am

On the backend Additional jQuery (without entwine) is not working on initial page load but it is working if you refresh the edit page.

Ok I have a completely fresh install of SS 3 v3.1.12

I create a Test Page type and add a Javascript

class TestPage extends Page {

  private static $db = array(
  );

  public function getCMSFields() {
    $fields = parent::getCMSFields();
    Requirements::javascript("mysite/code/test.js");
    return $fields;
  }

}
class TestPage_Controller extends Page_Controller {
}

And the javascript page what just turns the MenuTitle into lowercase with underscores

(function($) {
    $(document).ready(function(){
         $('input[name=MenuTitle]').keyup(function () {
            var textValue = $(this).val().toLowerCase();
            textValue =textValue.replace(/ /g,"_");
            $(this).val(textValue);
         });
    });
}(jQuery));

Now when I make the about us page this page type and I go to edit the MenuTitle (Navigation label) it is not working , but If I refresh the page while in edit it is working perfectly.

Is this by design or is this a bug?

Avatar
Rhym

Community Member, 12 Posts

9 April 2015 at 11:13am

You have to use an entwine wrapper for your JS in the CMS.

Avatar
mi32dogs

Community Member, 75 Posts

9 April 2015 at 11:40am

but in the documentation (http://doc.silverstripe.com/en/developer_guides/customising_the_admin_interface/javascript_development/) it says:
"For any custom code developed with jQuery, you have four choices to structure it: Custom jQuery Code, a jQuery Plugin, a jQuery UI Widget, or a jQuery.entwine behaviour. We'll detail below where each solution is appropriate."

and for an example of Custom jQuery Code they give you

(function($) {
    $(document).ready(function(){
        // your code here.
    })
})(jQuery);

This is exactly what i did

Avatar
Rhym

Community Member, 12 Posts

9 April 2015 at 11:47am

*Shrug* I'd just chuck a wrapper on it.

;(function($) {
    $.entwine('your-app', function($){
        $(document).ready(function(){
            // your code here.
        });
    });
})(jQuery);

Avatar
mi32dogs

Community Member, 75 Posts

9 April 2015 at 12:17pm

Thank you for that
so i added the wrapper as you sugested

(function($) {
    $.entwine('my-app', function($){
        $(document).ready(function(){
             $('input[name=MenuTitle]').keyup(function () {
                var textValue = $(this).val().toLowerCase();
                textValue =textValue.replace(/ /g,"_");
                $(this).val(textValue);
             });
        });
    });
}(jQuery));

but it still still does not work on the initial load only if you reload the edit page it works.

Avatar
Jack Marchant

Community Member, 4 Posts

10 April 2015 at 1:14am

Edited: 10/04/2015 1:15am

I've been struggling with using entwine, without much luck so far, so I'd be keen to find out how you go with this.

I've had a little bit of success in my case through use of .bind() on the change event and using an anonymous function to run the rest of my script. Works ok for the initial idea but not the best.
To answer your initial question, its by design, I guess to enforce use of a closure when using JavaScript so you don't run into namespacing issues.

Avatar
mi32dogs

Community Member, 75 Posts

10 April 2015 at 5:10am

Edited: 10/04/2015 5:12am

I had some success this morning I got a jQuery time picker extension working and a basic function.

(function($) {
    $.entwine('my-app', function($){

        // load jQuery Time Picker
        $('input.time').entwine({
            onmatch: function() {
                $(this).timepicker();
            }
        });

        // just a basic function
        $('input[name=MenuTitle]').entwine({
            onkeyup: function(e) {
                var textValue = $(this).val().toLowerCase();
                textValue =textValue.replace(/ /g,"_");
                $(this).val(textValue);
            }
        });

    });
}(jQuery));

I think they should overhaul the documentation, make sure that it is correct and a section on how to convert regular jQuery/JavaScript functions/plugin’s to work with entwine.

I love most of Silverstripe but from my point of view they should get rid of entwine, I think the cost outweighs the value.