This project is read-only.

?? 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 ... 

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

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>

 

 



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