?? add .js file to solution & call function from HTML widget

Topics: Customizing Orchard, Troubleshooting
Aug 23, 2012 at 6:01 PM

Surprised that I have not been able to find a step by step on best practice for adding a javascript or jquery function to my solution that will launch a popup window.from html code in BodyPart.  ( That is my use case ... a simple hello world example illustrating the points below for any javascript function would be fine)
What about just adding my function to an existing javascript file in the solution ? ( eliminate the need to add another javascript file )
If not ...
What are the steps for adding a new .js file ?
For my particular Widget what .cshtml file to I code the razor function to reference the javascript file ( place the script tags in the Head )
Again a simple hello world example giving a step by step for this ... or is there another approach I need to know about for launching a popup ... this use case is to popup a url on another domain ... but am also wondering about launching a popup from within the same Orchard CMS domain. 
Is this enough info to describe the issue ???  Happy to exchange more messages in this dicussion ... 

Coordinator
Aug 24, 2012 at 1:46 AM

To ensure jQuery is included: Script.Require("jQuery")

To include inline script at the foot of the page:

@using (Script.Foot()) {
<script type="text/javascript">
//<![CDATA[
  // write your script here
//]]>
</script>
}
To include a script file at the foot of the page: Script.Include("~/PathToYourScriptFromRootOfSite.js").AtFoot() or Script.Include("nameofyourscript.js").AtFoot() if the script is in the Scripts folder of the module or theme where you are writing this code. Make sure the folder where the script file is located contains a web.config file that enables it to be served (you can copy one from any of the Script folders in the distribution).

Sep 26, 2012 at 3:13 PM
Edited Sep 26, 2012 at 3:16 PM

Hi,

I try to follow your proposition, it's not work. I don't understantd 

In the layout.cshtml in my custom theme, I added the file WidgetsCoinLecture.js, the file is C:\Orchard\src\Orchard.Web\Themes\MyTheme\Scripts\WidgetsCoinLecture.js

and inside WidgetsCoinLecture.js I added function testAlert() {    alert('test');}

@if (Model.Header != null) {
<header id="layout-header" class="group">
    <div id="header">
        @Zone(Model.Header)
        @Script.Include("~/Scripts/WidgetsCoinLecture.js").AtFoot()
        testAlert();
    </div>
</header>
}

When I display the page I obtain Orchard.UI.Resources.RequireSettings testAlert();

Do you have any idea?

Best regards,

Alexandre

Coordinator
Sep 26, 2012 at 5:55 PM

@{
    Script.Include("~/Scripts/WidgetsCoinLecture.js").AtFoot()
}

@if (Model.Header != null) {
<header id="layout-header" class="group">
    <div id="header">
        @Zone(Model.Header)
    </div>
</header>
}

Sep 26, 2012 at 8:44 PM

Hi,

Thank a lot.

Big issue my code with testAlert(); :)

 

@{
    Script.Include("WidgetsCoinLecture.js").AtFoot();
}

@tag.StartElement
@if (Model.Header != null) {
<header id="layout-header" class="group">
    <div id="header">
        @Zone(Model.Header)
        <script language="javascript"  type="text/javascript">            
            testAlert();
        </script>        
    </div>
</header>

 

 



Coordinator
Sep 30, 2012 at 10:40 PM

Can you be a little more specific?

Oct 1, 2012 at 12:07 PM

Hi,

"Can you be a little more specific?"

This post is closed (in my last anwser, I put my modifications). So don't need to go further.

I change the order from the code according to your recommandations.

Best regards,

Alexandre