This is a seemingly easy problem but it might not be. I am new to rails. As such I am still learning the in's and out's of the asset pipeline. I have an understanding of the assets/stylesheets and can get those to edit my view. However, I cannot get my assets/javascripts to work. The js does work if it is embedded in the view however.
I was hoping someone could take a peek at the source: https://github.com/Brownkyle219/clemson-sustainability
and you can see it functionally here:
http://clemson-sustainability.herokuapp.com
(I am aware that there is a routing issue when you click on the other tabs). Ignore the google charts stuff. My main focus is at the bottom of index.html.erb about the slider. All I want to do is move that script to a separate file in assets/javascripts. Any advice would be great! Thanks
You need to wrap your JS in $(document).ready(function({ yourCodeHere })
Otherwise, the JS gets executed before the elements they target are actually loaded and will not work.
Related
For my page I use 2 JavaScript (external .js), one for the navigation menu:
src="js-menu/bootstrap.min.js"
And for the whole html page:
type="text/javascript" src="js/front.min.js"
The problem is that the whole page .js has some old menu coding and this interferes with my menu JavaScript.
I am a JavaScript beginner so I don't know how to correct it there, I would like to make my nav-menu .js applying only to my navigation div instead ...
Any idea ?
thanks
Try separating the code into different files. It can help in figuring out what is going on. Create a new file, called "temp_something", and copy all of the code into it. Then, try things like removing all of the other JavaScript files, but leave yours in. Then, comment out all code but the "bare minimum" code, and then slowly uncomment code. This may help you by giving you a starting point on where the problem may be.
Forgive me for my lack of MVC knowledge - still in the process of teaching myself.
Basically started a new job which they primarily use MVC, learning curve is steep. Iv'e been tasked with calling a Javascript file when required in a nested partial view, Whilst I'm comfortable with the former, I seem to be having trouble with loading the script. I've tried sections which didn't work to well and I believe cannot be done.
So I have:
Index.cshtml > Loads in AddressList.cshtml > which loads in Address.cshtml
When the address.chtml partial view has been loaded, I'd like to load the js file.
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>
This is very trivial to some but never the less cannot seem to get it to work.
The task at hand is part of a much larger feature which I've built and works great when loading the js file in the main layout view. Circumstances have changed and now the js file needs to be moved.
Any help greatly appreciated.
Javascript and PartialViews don't work well together, since you can use your PartialView multiple times and, if you add your PartialView twice, the script will also be.
One way to get around is moving your script section to your main view, which calls your PartialView later in the process.
Or, if you don't mind on using third party frameworks, there is ForLoop HtmlHelper which allows you to use javascript inside a PartialView and control the scripts to be added correctly.
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
I have tried many different approach but nothing is working as I expected. I've few css and javascript files, that I want to load along with partial associated to my Angular route. Is there any way I can do this? There were some solution around on the web, but nothing seems to work as per their instruction.
I have seen many questions raised around PartialViews and Javascript: the problem is a PartialView that requires Javascript, e.g. a view that renders a jqGrid:
The partial View needs a <div id="myGrid"></div>
and then some script:
<script>
$(document).ready(function(){
$('#myGrid').jqGrid( { // config params go here
});
}
</script>
The issue is how to include the PartialView without littering the page with inline tags and multiple $(document).ready tags.
We would also like to club the results from multiple RenderPartial calls into a single document.Ready() call.
And lastly we have the issue of the Javascript library files such as JQuery and JQGrid.js which should ideally be included at the bottom of the page (right before the $.ready block) and ideally only included when the appropriate PartialViews are used on the page.
In scouring the WWW it does not appear that anyone has solved this issue. A potential way might be to implement a custom View Engine. I was wondering if anyone had any alternative suggestions I may have missed?
This is a good question and it is something my team struggled with when JQuery was first released. One colleague wrote a page base class that combined all of the document ready calls into one, but it was a complete waste of time and our client's money.
There is no need to combine the $(document).ready() calls into one as they will all be called, one after the other in the order that they appear on the page. this is due to the multi-cast delegate nature of the method and it won't have a significant affect on performance. You might find your page slightly more maintainable, but maintainability is seldom an issue with jQuery as it has such concise syntax.
Could you expand on the reasons for wanting to combine them? I find a lot of developers are perfectionists and want their markup to be absolutely perfect. Rather, I find that when it is good enough for the client, when it performs adequately and displays properly, then my time is better spent delivering the next requirement. I have wasted a lot of time in the past formatting HTML that no-one will ever look at.
Any script that you want to appear at the bottom of the page should go inside the ClientScriptManager.RegisterStartupScript Method as it renders at the bottom of the page.
http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx
Edit Just noticed that your question was specific to ASP.NET MVC. My answer is more of an ASP.NET answer but in terms of the rendered html, most of my comments are still relevant. Multiple document.ready functions are not a problem.
The standard jQuery approach is to write a single script that will add behaviour to multiple elements. So, add a class to the divs that you want to contain a grid and call a function on each one:
<script language="text/javascript">
$(document).ready(function(){
$('.myGridClass').each(function(){
$(this).jqGrid( {
// config params can be determined from
//attributes added to the div element
var url = $(this).attr("data-url");
});
});
}
</script>
You only need to add this script once on your page and in your partial views you just have:
<div class="myGridClass" data-url="http://whatever-url-to-be-used"></div>
Notice the data-url attribute. This is HTML5 syntax, which will fail HTML 4 validation. It will still work in HTML 4 browsers. It only matters if you have to run your pages through html validators. And I can see you already know about HTML5
Not pretty but as regards your last point can you not send the appropriate tags as a ViewData dictionary in the action that returns the partial?