I need to render a simple HTML page as partial within this div.It is a simple HTML5 application, not of MVC architecture hence Html.RenderPartial is not working.Any help??
<div id= "this_div_will_contain_partial">
</div>
Use jquery's load:
<script>
$(function(){
$('#this_div_will_contain_partial').load('http://www.urpartialurl.com');
});
</script>
I have noticed that you haven't included javascript tag but this is the only option to achieve this. Also the page you are trying to access needs to be on the same domain.
Related
I have a main.html containing the following div:
<div id="main">
I want to dynamically load html in this div (say page1.html and page2.html). I am able to accomplish this through the following code :
document.getElementById("main").innerHTML='<object type="text/html" data="page1.html" ></object>';
Now, I want to have a button id="btn1" in my page1.html, which should load page2.html into div "main" of my parent main.html.
However, in page1.html, I am not able to locate my container div "main"
document.getElementById("main") // returns null
Thanks in advance for the help!
Your issue is trying to use a single page's DOM to interact with content loaded in through an iframe or object. Using these makes life very difficult for a JavaScript developer.
If you are using only plain JavaScript, I would suggest you instead use an AJAX request to load in HTML directly through the DOM instead of transcluding this content using old methods.
Here's a beginner's guide to plain-JS AJAX. Frameworks like jQuery simplify the process immensely.
http://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855
Otherwise, no. You cannot access that node's content because of Cross-Site Scripting security features.
I have a asp.net razor partial view which is used multiple times on one page.
In that partial view I have javascript in the $(document).ready() which I want to do some jQuery stuff on the content of the partial view.
<div class="someclass">
</div>
<script>
$(document).ready(function() {
$('.someclass').dosomething();
));
</script>
So the problem is that $('.someclass') returns to much elements when this partial view is use multiple times on one page.
How can I achieve that $('.someclass') returns only the intended element?
The only solution I see is to generate a unique id for the element and use that in the jQuery selector. But I don't like generating id's for that.
Any other ideas for a solution?
As a general rule you should not include scripts in partial views and it will create unexpected behaviors if the partial views are used/loaded more than once. Also, the inline scripts avoids them get cached by the browser. Though sometimes we feel lazy it always best practice to separate the scripts out of the views.
A quick fix would be to use that class only for init and remove it after the initialization like this:
<div class="someclass initSomething">
</div>
<script>
$(document).ready(function() {
$('.initSomething').dosomething().removeClass('initSomething');
));
</script>
I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to observe DRY concept.
HTML files should look like this:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
How can I do that?
If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.
Have a look at the jQuery 'load()' function here:
http://api.jquery.com/load/
Assuming your have the following html:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
your usage would look something like this:
$('#header').load('header.html');
$('#footer').load('footer.html');
Here's a link (first one from Google I might add) that explains how to do this in various languages.
Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript is another way to include HTML within the pages of your
site. This has the advantage of not requiring server-level
programming. But it's a little more complicated than the server-level
include methods.
Save the HTML for the common elements of your site to a JavaScript
file. Any HTML written in this file, must be printed to the screen
with the document.write function.
Use a script tag to include the
JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js">
Use that same code on
every page that you want to include the file.
PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.
Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).
If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.
If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.
http://docs.angularjs.org/#!/api/ng.directive:ngInclude
If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?
As others said, it looks like it can't be done with HTML alone. Another way it could be done on the server-side, if you are using Java, is with Thymeleaf.
For example, adding a main menu on every page with
<div th:replace="fragments/mainmenu.html"></div> . Then mainmenu.html could just contain a bunch of divs. The fragment doesn't need to be a full HTML page.
How to refresh a particular part of a webpage using struts2 framework
please help...
Thanks
There is something not in scope of Struts2, all you need to have a small JavaScript code which will do your work something like
<div id="content"><p>refesh content</p></div>
Refresh
function divrefresh() {
document.getElementById('content').innerHTML = "Div got refreshed"
}
Not sure what your use-case is, so there might be other way to do this but only possible when you provide more information.
Have a look at the Struts2 Jquery Showcase. It uses the Struts2 Jquery Plugin.
You can use <sj:div> with reloadTopics and href attributes to dynamically refresh parts of a webpage.
i am working on BLOGGER and i have came across 1 query.
I want to integrate following in the blogger template.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
</div>
i want to add it from the HTML widget but HTML do not understand
data:post.url or data:post.title
So can i use javascript and how?
I think, you would add the Facebook comment box.
http://www.bloggermint.com/2010/05/how-to-add-facebook-comment-box-on-blogger-blogs/