A Little Require Script help?

Topics: Writing modules
Sep 8, 2011 at 7:24 PM

I’m trying to learn how to write Orchard modules. I paruse through the docs and discussions and I am still having a little problem with include scripts, or maybe I’m just having a bad day :D. I have added the scripts in my Scripts folder in the Solution Explorer. And in my module View I have:

    <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

    @using (Ajax.BeginForm("Index", new { Id = 1 }, new AjaxOptions {
                    UpdateTargetId = "Display",
                    InsertionMode = InsertionMode.InsertBefore,
                    HttpMethod = "POST" }
                    ))
    {
        @Html.AntiForgeryToken()
        <textarea id="Display" style="width:99%; padding-bottom:10px;" readonly="readonly" rows="10" cols="80"></textarea>
        ... Rest Deleted ...
    }

But when I run it and click in the form in the browser I get an error:

    Microsoft JScript runtime error: 'Sys' is undefined.

And Visual Studios points to the line below:

    <form action="/WebAcre.Chat?Id=1" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" ... rest deleted ...

This code worked in my other MVC project. What am I missing here?

Thanks,
Mario

Coordinator
Sep 8, 2011 at 7:53 PM

Several things are not quite right here. First, those script tags should not be there. Instead, you should Script.Require jquery, and Script.Include the other one, or register it and then require it. Second, it's going to be a lot easier to just use some plain jquery to do your Ajax interaction here, and it wont attempt to pull in Microsoft Ajax like it seems to be doing (Sys).

Sep 8, 2011 at 8:01 PM
bertrandleroy wrote:

Several things are not quite right here. First, those script tags should not be there. Instead, you should Script.Require jquery, and Script.Include the other one, or register it and then require it. Second, it's going to be a lot easier to just use some plain jquery to do your Ajax interaction here, and it wont attempt to pull in Microsoft Ajax like it seems to be doing (Sys).


That is what it looks like to me, although Microsoft Ajax are no longer needed. I will need more instructions on how to specify scripts as well as including my own scripts, or I wouldn't be asking here. I did try @Script.Require("jQuery") instead of my scripts tags, but I still couldn't get it to work. I didn't see any documentation on how to include scripts including writing my own.

Coordinator
Sep 8, 2011 at 8:14 PM

What happened when you tried?

Sep 8, 2011 at 8:18 PM
Edited Sep 8, 2011 at 8:21 PM

Same error message:

@Script.Require("jQuery")

@using (Ajax.BeginForm("Index", new { Id = 1 }, new AjaxOptions {
                    UpdateTargetId = "Chat_Display",
                    InsertionMode = InsertionMode.InsertBefore,
                    HttpMethod = "POST" }
                    ))
{

...

}

Coordinator
Sep 8, 2011 at 8:21 PM

What do you see in Firebug (or the equivalent in your browser)? What scripts load? What errors?

Also, I was recommending getting rid of Ajax.BeginForm: that needs Microsoft Ajax, and I don't think you want that.

Sep 8, 2011 at 9:11 PM

I'm using IE 9 and Visual Studios 2010. Visual studio takes over the debug and the error messages are stated above, nothing else reported.

What do you recommend if I didn't use Ajax.BeginForm? I'm writing a chat module and it is not cool to use have the page flash eveytime someone sends a message.

Coordinator
Sep 8, 2011 at 9:38 PM

What I was suggesting is that you use the network tab of Firebug or IE dev tools to see what was effectively loaded.

What I'm recommending is that you wire up a jQuery ajax request more manually, by writing some script, rather than puling in Microsoft Ajax. I'ts still ajax, but it's going to be easier to build, maintain, and also lighter.

Sep 9, 2011 at 12:27 AM

Before I go off on another path maybe there is just something else that is causing the problem, something that's less complicated.

The scripts that are loaded in the network tab are:

    /Core/Shapes/scripts/html5.js
    /Modules/Orchard.jQuery/scripts/jquery-1.6.1.js

There is something else that doesn't look right. When I put the @Script.Require("jQuery") in the view, as shown above. A message appears above the form in the html runtime page - Orchard.UI.Resources.RequireSettings.

In other words, the line @Script.Require("jQuery") causes the message Orchard.UI.Resources.RequireSettings. I have no clue what Orchard.UI.Resources.RequireSettings means. Do you?

Coordinator
Sep 9, 2011 at 1:05 AM

No, that doesn't make sense. But in any case, you really don't want to get Mirosoft Ajax in here. Really.

Sep 9, 2011 at 7:36 AM
Hi,

I've seen this too. Try placing it inside a script block like so:

@{

Script.Require("jQuery").AtHead()

}

I know this don't make sense but I'm sure I had the same problem I doing the syntax this way worked for some reason.

Give it a try.

Thanks

Steve



On 9 Sep 2011, at 00:28, "MarioRosario" <notifications@codeplex.com> wrote:

From: MarioRosario

Before I go off on another path maybe there is just something else that is causing the problem, something that's less complicated.

The scripts that are loaded in the network tab are:

/Core/Shapes/scripts/html5.js
/Modules/Orchard.jQuery/scripts/jquery-1.6.1.js

There is something else that doesn't look right. When I put the @Script.Require("jQuery") in the view, as shown above. A message appears above the form in the html runtime page - Orchard.UI.Resources.RequireSettings.

In other words, the line @Script.Require("jQuery") causes the message Orchard.UI.Resources.RequireSettings. I have no clue what Orchard.UI.Resources.RequireSettings means. Do you?

Sep 9, 2011 at 9:11 AM
SteveTaylorUK wrote:
I know this don't make sense but I'm sure I had the same problem I doing the syntax this way worked for some reason.

The @ suggests that we want to output the result of Script.Require to the response, but we don't want the script tag to appear in the <body> section of the overall HTML document. Script.Require actually adds that script to a list of stuff to output in the <head> portion of the document.

Coordinator
Sep 9, 2011 at 9:21 AM

Ah, good catch, yes.

Sep 9, 2011 at 2:56 PM
Edited Sep 9, 2011 at 2:58 PM
SteveTaylorUK wrote:

... deleted ...
@{
Script.Require("jQuery").AtHead()[;]
}
... deleted ...

Steve

Thanks. Good suggestion, I have seen this too where loading the scripts on top worked whereas on the bottom made things not work. But then because the browser cache made problems difficult to diagnose, I never figured out what was the problem. Things worked for a while, and then it didn't work for a while, and then it did :P.

I am trying your suggestion and variations thereof this morning. I'll post my results after I make it work. So far I'm still getting the same error. But then things may change after dinner, so go figure lol.

Thanks again Steve, I'll post my result soon.

If anyone else have good suggestions, I welcome it, thanks.

Mario

Sep 9, 2011 at 4:24 PM
Edited Sep 9, 2011 at 5:27 PM
bertrandleroy wrote:

... deleted ...

What I'm recommending is that you wire up a jQuery ajax request more manually, by writing some script, rather than puling in Microsoft Ajax. I'ts still ajax, but it's going to be easier to build, maintain, and also lighter.

I may end up going in this direction, I already have something close to what I need, I just need to send back the antiforgery token with the request. How do I send the token back anyways? It shows up as a hidden input field : <input name="__RequestVerificationToken" type="hidden" value="... a very long string ..." />.

If I read this blog correctly (http://www.bondigeek.com/blog/2011/09/03/simple-mvc3-ajax-feedback-form-with-antiforgerytoken-to-prevent-most-csrf-attacks), it can be sent back as

          ...&_RequestVerificationToken=' + document.getElementById("_RequestVerificationToken").value + '...

Is this correct?

Thanks.

Coordinator
Sep 9, 2011 at 8:53 PM

Yes, that's one way of doing it.

Mar 17, 2012 at 5:15 PM
MarioRosario wrote:

I’m trying to learn how to write Orchard modules. I paruse through the docs and discussions and I am still having a little problem with include scripts, or maybe I’m just having a bad day :D. I have added the scripts in my Scripts folder in the Solution Explorer. And in my module View I have:

    <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

    @using (Ajax.BeginForm("Index", new { Id = 1 }, new AjaxOptions {
                    UpdateTargetId = "Display",
                    InsertionMode = InsertionMode.InsertBefore,
                    HttpMethod = "POST" }
                    ))
    {
        @Html.AntiForgeryToken()
        <textarea id="Display" style="width:99%; padding-bottom:10px;" readonly="readonly" rows="10" cols="80"></textarea>
        ... Rest Deleted ...
    }

But when I run it and click in the form in the browser I get an error:

    Microsoft JScript runtime error: 'Sys' is undefined.

And Visual Studios points to the line below:

    <form action="/WebAcre.Chat?Id=1" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" ... rest deleted ...

This code worked in my other MVC project. What am I missing here?

Thanks,
Mario

Hi Mario,

I also have this error on my orchard project now.

Didn't you use ajax.beginform later?

What did you do for fixing the 'sys is not defined' javascript error?

I would appreciate if I can get the solution for this error.

Thanks

Mar 17, 2012 at 5:50 PM
Edited Mar 17, 2012 at 6:30 PM
trust_dandyman wrote:
MarioRosario wrote:

I’m trying to learn how to write Orchard modules. I paruse through the docs and discussions and I am still having a little problem with include scripts, or maybe I’m just having a bad day :D. I have added the scripts in my Scripts folder in the Solution Explorer. And in my module View I have:

 <stuff deleted>

Thanks,
Mario

Hi Mario,

I also have this error on my orchard project now.

Didn't you use ajax.beginform later?

What did you do for fixing the 'sys is not defined' javascript error?

I would appreciate if I can get the solution for this error.

Thanks

My answer is not related to Orchard modules specifically, I am not working on Orchard now. But in general, what I am doing is write my own transport using XMLHttpRequest(), and send the AntiforgeryToken back using the XMLHttpRequest.send(params) method call. I just got it working yesterday, MVC 3 seem to recognize the token. But just to be sure I want to remove jQuery entirely before I can say for sure. Sometimes the browser cache makes a fool of me.

In my case, this greatly simplify my coding and helped me fix 2 bugs that was introduced by using jQuery. jQuery is a general purpose wrapper and it does a lot more that what I need, it is also as long as 10,000 lines of code, much harder to diagnose. This is a very big wrapper around the transport.

This is my solution for the transport:

function HttpPost(Url, AntiforgeryToken+AdditionalParams) {
    var request = new XMLHttpRequest();
    request.open('POST', Url, true); // Asyncronous post

    // Not sure the header settings are necessary, I have not tried removing them yet
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.setRequestHeader('Accept', '*/*');
    request.setRequestHeader('X-Request-With', 'XMLHttpRequest');

    request.onreadystatechange = HandleResponse;
    request.send(AntiforgeryToken+AdditionalParams);
}

With it, you can build your own wrapper around it. Perhaps trust_dandyman, you can tell me if the header settings are needed.

Enjoy,
Mario

PS. Forgot to mention the AntiforgeryToken is url encoded.