jquery behaviour

Topics: General, Troubleshooting
Apr 13, 2012 at 8:30 AM

thanks for taking the time to read and help!

below 'views/xy.cshtml' file runs flawless in MVC 3 Razor!

When using the same file in Orchard I see the 'Alert beginning' prompt BUT NOT the 'Alert end'.
To me it looks like it cannot find "GolfQuotes" in $.get('/Orchard.Web/MySource/GolfQuotes.txt', function (data) { ......
However, I tried 'all' sensible variations without success, THEREFORE:
 
Question: 1) Are there any special considerations to take into account when using jquery in Orchard?
          2) In Orchard is there a convention where I have to place this 'GolfQuotes.txt' file ? or any user files for that matter?  

when using 'debugger;'
I can step through the code 'jquery-1.7.1.js'

I always get the <h2> header! I.e. the page is found and loaded correctly (I guess).
PS: I created a 'xyPart Content item' and can create a Content Type or use it as a widget; same behaviour!


what am I missing here, thanks for your time and hints!
ed


Orchard.web/modules/myModule/Views/xy.cshtml:

@{ Script.Require("jQuery"); }
<h2>Rtext header</h2>
<table>
   <tr>
     <td >
       <div class="quotes"> </div>
     </td>
   </tr>
 </table>

@using (Script.Foot())  { ==========>  I tested with and without this wrapper ... same behaviour!
<script type="text/javascript"  >
    jQuery(document).ready(function ($) {
         debugger;

     alert('Alert beginning');

       $.get('/Orchard.Web/MySource/GolfQuotes.txt', function (data) {
            var quotes = data.split("\%");
            var idx = Math.floor(quotes.length * Math.random() - 1);
            $('.quotes').html(quotes[idx]);

            alert('Alert end');
        });
    });
  
</script>
}

Developer
Apr 13, 2012 at 8:43 AM

Orchard by default locks down everything. Using web.config in certain folders (like Views, Media and Styles) to override this lock down by mapping requests to the static file handler. Did you make sure you copied one of these web.config files to the MySource folder?

Apr 13, 2012 at 10:51 AM

I'm not quite sure wether I understand your advise, AND, where from would I know that i have to add one of those web.config files!?

anyway, I tried with adding the config file from Views and Media/Style (which look the same) .......... and have the same problem!

? OR, do I need to add anything to the config file?!

thanks for your time and clarification

ed

Developer
Apr 13, 2012 at 11:45 AM

If we look at the web.config in the root of the application, we see the following section:

<httpHandlers>
      <!-- see below -->
      <clear />
      <add path="*" verb="*" type="System.Web.HttpNotFoundHandler"/>

    </httpHandlers>

This effectively maps all requests to the HttpNotFoundHandler. This means that you cannot directly request files from your browser. E.g. requesting a resource at /Orchard.Web/MySource/GolfQuotes.txt will cause a 404 - not found error.

To overcome this, you would need to add a web.config to /Orchard.Web/MySource/ that re-maps requests to the static file handler:

<handlers accessPolicy="Script,Read">
      <!--
      iis7 - for any request to a file exists on disk, return it via native http module.
      accessPolicy 'Script' is to allow for a managed 404 page.
      -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
    </handlers>

Now you should be able to successfully request the resource at /Orchard.Web/MySource/GolfQuotes.txt

However, I just re-read your initial post, where you say that the page is actually found, so this is not the issue.

Can you verify that the jquery ajax callback is invoked at all? In any case, there are no other special considerations when using jQuery in Orchard. It just works out of the box.

 

Apr 13, 2012 at 12:52 PM

thanks, the web.config is already like you suggested! hence, I'd like to elaborate on your quote:

"Can you verify that the jquery ajax callback is invoked at all?"

  ????                  you got me .... how do I check this?

PS: just to make sure: yes I see the "<h2>Rtext header</h2>" text ! So i assume that the xy.cshtml page was found!? And, as said, when I use "debugger;" in

the jquery I can step through jquery-1.7.1.js!

sorry for my ignorance ..

ed

 

Developer
Apr 13, 2012 at 1:36 PM

You mentioned that the first alert executes, so yes, the xy.cshtml successfully renders in the browser and the javascript is executed.
I suspect that the ajax call to the .txt file fails. You could try the following:

  1. What happens when you enter the url to the .txt file directly in the browser?
  2. Using IE F12 Developers Tools, you can set a breakpoint on the first line of the ajax callback (var quotes = data.split("\%");). Does the debugger break there? If not, then here's probably a server error when requesting the .txt file (which you should see also when executing step 1.) If the debugger does break, then the ajax call was succesful, but an error occurs in one of the next lines.

Both FireBug (FF) and F12 Developer Tools (IE) have a Console tab, where you might find some javascript errors.

 

 

 

 

Apr 13, 2012 at 2:25 PM

Firebug and Developer Tools also have a network tab, where you can see what your ajax call returns. Then you can check whether GolfQuotes.txt actually gets returned, or just some error message.

Apr 13, 2012 at 3:58 PM

thanks to both, have to re-familiar myself with debugging but so far when checking the 'Network' Tab I see error 404:
URL ‎‎
/OrchardLocal/Contents/Item/Display/Orchard.Web/MySource/GolfQuotes.txt 
Method Result Type       Received Taken Initiator 
GET       404    text/html 4.85 KB 187 ms JS Library XMLHttpRequest
when doing the ame in MVC 3 I get:
GET       200    text/plain 3.72 KB 62 ms

when using in IE:

d:/cmsites/orchardsrc/src/Orchard.Web/MySource/GolfQuotes.txt ===> IE shows my txt file correctly

http://localhost:30320/OrchardLocal/Contents/Item/Display/Orchard.Web/MySource/GolfQuotes.txt  ===> page not found (404!?)

.... well I need some more time I guess
ed 

Developer
Apr 13, 2012 at 5:49 PM

Ok, so the issue has nothing to do with jQuery. The webserver simply blocks access to your txt file (when you use the local path d:/cmsites/etc, it works, since you're now using the file system to access the file instead of IIS).
Could you please show us the contents of the web.config file you have stored in the MySource folder? Perhaps also provide us with a screenshot of your folder structure of the Solution Explorer.

Apr 13, 2012 at 6:42 PM
below my config file ... more embarassing: how do I add the screenshot I made with the windows snipping tool .png!
Or where could I attach the files!?
ed
web.config in folder /MySource alongside with the .txt file 
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>
  <system.web>
    <httpHandlers>
      <!-- iis6 - for any request in this location, return via managed static file handler -->
      <add path="*" verb="*" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>
    
    <handlers accessPolicy="Script,Read">
      <!--
      iis7 - for any request to a file exists on disk, return it via native http module.
      accessPolicy 'Script' is to allow for a managed 404 page.
      -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>
Developer
Apr 13, 2012 at 6:46 PM

Perhaps you could upload the image to your webserver and provide us with the url?

Another question: what is the root folder of your website? Is it: http://localhost:30320/OrchardLocal/Contents/Item/Display/Orchard.Web, or is it: http://localhost:30320/OrchardLocal/Contents/Item/Display/Orchard.Web/MySource?

In other words: is GolfQuotes.txt stored in the root of your web application, or not?

Apr 13, 2012 at 7:53 PM

well I thought there is a possibility to attach them directly in the thread ... anyway

as you see in below links /MySource is in the Orchard.web folder. The other link shows you my Module Rtext (RandomText) (hope you get it! from google)

https://docs.google.com/file/d/0B7KwAufd8a_oQmdZNEVLdFdiYWs/edit
https://docs.google.com/file/d/0B7KwAufd8a_obmlkWFZKRXNzU0k/edit

re root folder:

when I see the home page the url is:

http://localhost:30320/OrchardLocal

when I click my tab for the random text it shows:

http://localhost:30320/OrchardLocal/Contents/Item/Display/51

So nothing like you 'propose' i.e I never see anything with MySource!? The only time I had  the url with /mySource was the last item when rumming the debugger (see msg of today 2.58 pm)
well, thanks for your help
ed

 

 

 

Apr 13, 2012 at 8:19 PM
edikaufmann wrote:

thanks to both, have to re-familiar myself with debugging but so far when checking the 'Network' Tab I see error 404:
URL ‎‎
/OrchardLocal/Contents/Item/Display/Orchard.Web/MySource/GolfQuotes.txt 
Method Result Type       Received Taken Initiator 
GET       404    text/html 4.85 KB 187 ms JS Library XMLHttpRequest
when doing the ame in MVC 3 I get:
GET       200    text/plain 3.72 KB 62 ms

when using in IE:

d:/cmsites/orchardsrc/src/Orchard.Web/MySource/GolfQuotes.txt ===> IE shows my txt file correctly

http://localhost:30320/OrchardLocal/Contents/Item/Display/Orchard.Web/MySource/GolfQuotes.txt  ===> page not found (404!?)

.... well I need some more time I guess
ed 

That URL doesn't make any sense I think. The file is in /MySource and not in /Contents/Item/Display... which actually is a route.

What happens if you try with:

$.get("@Url.Content("~/MySource/GolfQoutes.txt")", function (data) {
instead?

Apr 14, 2012 at 7:47 AM

I tweaked your statement to get rid of some errors to:

$.get('@Url.Content("~/MySource/GolfQoutes.txt")', function (data) { ======> quotes are different!

Url is still red underscored does not give any hints

when I run with this statement and the debugger(F12) and network capture on and I get following
ouput:

https://docs.google.com/file/d/0B7KwAufd8a_oM3ZZQVJGUE1sTnM/edit

Remind you the difference when running in MVC 3 the type is"text/plain"

well ... I'm out of ideas
thanks ed

Developer
Apr 14, 2012 at 8:53 AM

I can't view your images, Google says I need permission.

Apr 14, 2012 at 9:19 AM

ooops .. sorry
should be ok now! ed

Developer
Apr 14, 2012 at 9:49 AM

404. I normally don't do this, but is it possible for you to send me over your module? I need to know what's going on now :)

sipke at skywalkersd.nl

Apr 14, 2012 at 1:44 PM

You could try to create a new folder and put your text file there together with a copy of web.config from /Styles (or any other folder serving static files).

Apr 14, 2012 at 2:20 PM

thanks to both helping me

in my msg from Fr 5h42 pm you see the web.config which is in the same folder /mySource alongside with 'GolfQoutes.txt'
my module 'Rtext' has been sent
ed

 

 

 

Developer
Apr 15, 2012 at 1:33 PM

Thanks for the code, trying it out showed what the issues are.

The first thing is a typo in the url. In your source code, you used the following line:

$.get('@Url.Content("~/MySource/GolfQoutes.txt")'function (data) {

Which should have been:

$.get('@Url.Content("~/MySource/GolfQuotes.txt")'function (data) {

 The second issue is the inclusion of jQuery. The following code:

@{ Script.Require("jQuery"); }

Will render the script tag just before the end of the body. However, you are referencing jQuery earlier in the file.
You could either fix it using the following code:

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

Or, you could wrap your inline script inside of a call to @Script.Foot(), causing your script to be rendered after the inclusion of the jquery file.

And that should do it.

 

 

Apr 15, 2012 at 3:31 PM

Hi Sipke, thanks for your time ...

.... yes that does it!

ed