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.
Related
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.
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 many view templates where i have inline javascript specific to that view.
for eg:
app/views/something/index.html.haml
.some-id
%h4 Something
#this javascript is not reused anywhere. Used only in this view
:javascript
$(document).ready(function() {
$('.some-id').addClass('something')
})
Is it a good practice to have the views like above?
It is definitely a pain to maintain inline javascript across multiple views. So i started moving them slowly into one single javascript file. But i am not sure if that's a good thing because, all the javascript will now get executed for all the pages.
So which is the best place to put view specific javascript?
If you are worried about page load time, you should use something like loadjs. It is just not maintainable to be place JS in your views like that. For super simple projects then maybe, but in general you should stay away from it.
Another thing to note is that browsers will cache your javascript when it is loaded from a file. They cannot do this when it is inline because the HTML is rendered every page load. So you probably are looking at an overall performance loss when doing it inline, even without loadjs.
I'm working on a Codeigniter application and I use a template system to build my views.
During development, I have just been including my jQuery into the actual view itself. The problem with this is that it ends up in the body of the page. I'd prefer to have it at the footer.
Most of the jQuery is only used once in a specific view, so I don't see the sense of putting it all into the footer partial.
What are my options?
The template library by Williams Concepts has a method for you to add JavaScript on an adhoc basis.
You can then add the JavaScript in the method being called, something like;
$this->template->add_js($script, $type = 'import', $defer = FALSE)
During development, I have just been including my jQuery into the actual view itself. The problem with this is that it ends up in the body of the page. I'd prefer to have it at the footer.
So move the jQuery inclusion to the footer? Means that you'll have to load the other scripts after this, which doesn't work so well with templates :-\ If you only need to load jQuery in some places, see below.
Most of the jQuery is only used once in a specific view, so I don't see the sense of putting it all into the footer partial.
So put it just into the view. <script> is a tag just like anything else. Include it just when you need it. If you might be loading this partial repeatedly, test it like so: <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script> and it should insert into the page for you if it hasn't yet been loaded, and if it has, it skips the insertion. That way you have a sort of just-in-time jQuery loading pattern.
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?