Scripts section in widgets?

  1. Avatar of Mark G.

    I have a

    @section scripts { }

    block in a custom CSHTML widget. However, the contents are not written out when the template is rendered

    I have put the @RenderSection("scripts", false) in my template file:

    @section Scripts { @RenderSection("scripts", false) }

    my template is using the base layout:

    @{ Layout = "~/Areas/bcms-Root/Views/Shared/BaseLayout.cshtml"; }

    Am I doing something wrong?

  2. Avatar of mark g

    bump?

  3. Avatar of Mantas

    Hi,

    Technically cshtml widget does not inherit your layout therefore scripts section will not be rendered. Instead you should go to Site Settings -> Widgets -> Edit Widget -> Widget Options, add widget option with type 'Js Include URL' and specify the URL of your separate javascript file.

    Hope this helps

    By the way, sorry for late response

  4. Avatar of mark g

    ok that makes sense. That will work in cases where the script is not dynamic (or I could create a controller that builds the script).

  5. Avatar of Huu Nghiem

    I have put Widget Options with type 'Js Include URL' and specify the URL of your separate javascript file.

    Name Used default Type Value app ~/Scripts/app/app.js JS Include URL ~/Scripts/app/app.js

    but it see doesn't load on my Server Widget. I did wrong somewhere ?

  6. Avatar of Huu Nghiem

    Edited!!! I have put Widget Options with type 'Js Include URL' and specify the URL of your separate javascript file.

    Name : app Used default : ~/Scripts/app/app.js Type : JS Include URL Value : ~/Scripts/app/app.js

    but it see doesn't load. I did wrong somewhere ?

    Pls help me !!

  7. Avatar of Augustas

    Hello, Huu

    When the JS Include URL is used as an option for a page will automatically render the javascript when opening the page.

    When the JS Include URL is used as an option for a widget you need to include it yourself.

    If you write the javascript include URL with a tilde (~) then you need to render the widget like so: http://puu.sh/iSzbx/b66529b4b6.png

    If you write it without a tilde (Scripts/app/app.js instead of ~/Scripts/app/app.js) then you need to render the widget like so: http://puu.sh/iSzan/4ece94c9e1.png

  8. Avatar of Huu Nghiem

    Thank you so much !! My script has rendered.

    I have another question. I use AngularJS for the widget and don't figure out why :

    • If I put AngularJS library link to _Layout.cshtml then in my app.js --> it doesn't recognize the global variable "angular" --> Error

    • If I include AngularJS library link to the widget ---> It's ok.

    Could you tell me what I wrong, pls ?

  9. Avatar of Augustas

    This is happening because the JavaScript contained within the widget HTML is being loaded sooner than the JavaScript contained within _Layout.cshtml. Try only writing a few console prints in both files and you'll see which one of them is being executed first.

    Including JavaScript within the HTML of widgets is generally a bad practice. In case of using angular with BetterCMS, inline JavaScript will simply not work or will require workarounds to get it to work.

    In order to implement this correctly, you are be required to use a JavaScript module loader library, such as RequireJS.

  10. Avatar of Huu Nghiem

    Oh !! Thank you !!!

    Can you show me the right way how to implement RequireJS to load my angular module in Server Widget, please ?

  11. Avatar of Augustas

    The way to get RequireJS running along with BetterCMS is really no different than any other project. You could try to follow the official RequireJS doc here: http://requirejs.org/docs/start.html or jump straight to using RequireJS with Visual Studio here: http://blogs.msdn.com/b/visualstudio/archive/2015/04/20/using-requirejs-with-visual-studio.aspx

  12. Avatar of huu nghiem

    Thank you so much !!

  13. Avatar of Darsana

    I have facing "Object reference not set to an instance of an object issue" on rendering server widget my template is using the base layout:

    @{ Layout = "~/Areas/bcms-Root/Views/Shared/BaseLayout.cshtml"; }

    whether i missed any script file?? Am I doing something wrong?

* Mandatory
* Mandatory
* Mandatory

Verify that you are human