I've added modernizr-rails to my rails project, and it seems to load fine (I can access Modernizr in a debug javascript console). According to the documentation, I added the include tag to the html head section like so:
<%= javascript_include_tag :modernizr %>
But it seems to load after my application javascript file (app/assets/javascripts/app.js), causing any reference to it to fail.
It's a mostly fresh new rails project, is there anything I'm missing? Or am I meant to wait for the document loaded event before calling Modernizr anyway?
Oops, yes there was something missing. I had put the javascript_include_tag :modernizr code in my template, rather than the application layout (app/views/layouts/application), which defines the html head for all templates in the app.
Related
I'm working on a project where I need to convert an HTML (Bootstrap) template into a fully functional application. Inertia JS (Vue and Laravel) is the technology I'm working on. The thing is, there are some additional jQuery and JavaScript files (that were added through the script tag before the body tag closed) that were added to the HTML template.
Now I need to include those files in my application. Here is how I'm trying to achieve it (In my app.blade.php) file:
#vite('resources/view/vendor/jquery/jquery.min.js')
#vite('resources/view/vendor/bootstrap/js/bootstrap.bundle.min.js')
#vite('resources/view/vendor/jquery/jquery.min.js')
#vite('resources/view/vendor/magnific-popup/magnific-popup.js')
#vite('resources/js/vendor/js/plugins/magnific-popup-init.js')
#vite('resources/js/vendor/js/js/scripts.js')
Here is the folder structure of my application:
In the console, I'm getting the following error:
Any lead on this would be highly appreciated.
in a silverstripe project I´m loading whole pages via ajax. Therefore I added to the Page-Contoller following function:
public function ajax(){
return $this->renderWith('MyTemplate');
}
This works fine so far and I get the page rendered as I want when browsing to mysite.com/mypage/ajax. The only Problem are the included JS/CSS Files in the template "MyTemplate":
<% require javascript(my.js) %>
<% require css(my.css) %>
The css/js does not show up in the source code - somehow it is not included, although it is part of the template "MyTemplate".
So is there a way to add the css/js in a cool way with silverstripe methods?
I tried this:
public function ajax(){
Requirements::css("my.js");
return $this->renderWith('ProjectPage');
}
but no success so far.
Many thanks,
Florian
You need to load the following javascript file into your site, depending on silverstripe version:
SS3 - /framework/javascript/jquery-ondemand/jquery.ondemand.js
OR
SS2.4 -/sapphire/javascript/core/jquery.ondemand.js
As far as I understand; when you make an ajax request, any new css or javascript requirements are added into the the request header. Then when the request is successful, ondemand.js pulls those scripts into the document for you, if they are not already there.
I'm trying to make an ajax enabled webapp using the tag. For some reason,
it redirects the entire page to my template, and doesn't update the specified div.
Here is what I have so far:
In the head of my GSP file:
<g:javascript library="jquery" />
<g:setProvider library="jquery"/>
In the body of my GSP file:
<div id="message"></div>
<g:remoteLink controller ="reqOff" action="quick_req" update="[success: 'message']">ar</g:remoteLink>
My controller method returns a template; which seems to be working fine.
The problem:
Right now, rather than update the div, it renders my template on a new page.
Other Notes:
- My grails version is 1.4.0.M1
- My jquery plugin is installed and updated to 1.7.2
- I have no other conflicting JS libraries in my view
I fixed the problem with JQuery and incidentally it was related to the CSS problem mentioned in the comments. As it turns out Gregg was on to something when he pointed out that the jQuery may not be loading in.
What I did is upgrade my resources plugin, and since it brokeing my app, forced me to learn what the resources plugin actually does. After setting up my modules and getting the r:require and r:layoutResources tag in, everything loads in just fine. It took a little trial and error, and I followed a tutorial type blog post from the plugin's author: http://www.anyware.co.uk/2005/2011/09/12/optimising-your-application-with-grails-resources-plugin/
In conclusion, check to make sure your resources are loading correctly with the resources plugin. I was under the assumption that the g:javascript tag loaded jQuery, but for my app, this apparently was not the case.
Our test team came across an issue with their automation scripts using WebDriver. They were using a wait for $.active == 0 to determine that all ajax requests had finished before proceeding. However, with certain partial view loads, the active variable was not decrementing, thereby making the automation very difficult.
I investigated and found that the issue only arose when partial views were being loaded that had an include of a .js file and were loaded via an ajax call. However, it did not happen for all views that included a file. This is how we were including the additional js.
<script type="text/javascript" src="#Url.Script("Internal/People/CommitteeMembership.js")" />
The problem views had one common issue. The script include was defined near the top of the partial view. When I moved this down to the bottom of the partial view, the issue went away and the $.active variable correctly decrements and ends up at 0 after the ajax call to get the partial view.
My question is, can anyone explain why this is happening? I have found no instructions to put the js includes at the bottom of the partial view anywhere? At the least the problem is fixed and our automation tests can continue, but I would really like to know the why...
This has strictly nothing to do with ASP.NET MVC. ASP.NET MVC usually spits HTML. This HTML contains markup and in your case javascript. So if you are saying that the position of the javascript inclusion makes a difference, that's because that's how your scripts are organized and dependent between them.
Personally I tend to include all javascript towards the end of the lmarkup, just before the closing </body> tag.
I'm working on converting NerdDinner to Spark and have everything except the mobile views (which I'm not worrying about) and some code that uses Page. Here is one of the locations that is hanging up - but there are a couple of others due to the View not having a Page ...
In asp.net mvc the code looks like this:
<link rel="Stylesheet" type="text/css" href="<%=Page.ClientScript.GetWebResourceUrl(typeof(DotNetOpenAuth.OpenId.RelyingParty.OpenIdSelector), "DotNetOpenAuth.OpenId.RelyingParty.OpenIdSelector.css")%>" />
The "Page.ClientScript.GetWebResourceUrl" call fails with an error about there not being a Page. Is this true?
I've worked around this one with adding an action that will return the resource as a FileStreamResult ... but there is another call using an open auth library that has a constraint check for a Page object ... so it fails due to the same problem - and unless I hack that code, I can't seem to find away around it. Is there anyway to get a Page in a Spark View?
In my project that uses Spark I am retrieving resources by use of a handler.
In reference to the other call, no there is no Page. A Page object is actually just a special HttpHandler that renders the markup to the response. So since MVC uses a different handler to create the Controller and render the View, there is no Page handler.
I would think the Open Auth library needs to be updated to work better with MVC.