Loading a html page with pure Javascript using AJAX - javascript

There is a main page and there are links on that page. When the individual links are clicked, it is supposed to load the contents that link loads inside a div tag of the main page.
Example:
MainPage.htm
<html> ...
<body> ...
<div id="MainContent"> </div> ...
<a href='Link1.htm'>Link 1 </a>
...
</html>
Link1.htm
<script src="main.js">...
<div> other contents here </div>
When user clicks on the Link 1, the browser doesn't go to that page, instead AJAX is used to fetch that linked document and load inside #MainContent.
But, the problem is that the linked page has a table and there are table manipulation codes that needed to be run when it first loads. In fact that linked document has link to separate script and some functions that are supposed to run on window.onload.
When I simply load that Linked document using AJAX I am using following approach:
MainContent.innerHTML = XHR.responseText;
This is not helping run the window.onload codes on that linked document.
Are there any solutions or workaround for this type of problem?
Just for side note: I am just Using Javascript no other APIs like angular or jQuery or similar.

Something is wrong with your approach. The main problem here is that the context of the new content that you are getting via ajax is not gonna be executed because the window.onload is already done.
When you refer to "table manipulation codes" I assume that there are a couple of javascript functions that needs to be executed after the content is properly appended in the html, so what you can try over here is moving those "manipulations" to a separate js file and include it in the index.html and execute the proper functions in the success callback after getting the content via ajax.
I think this should be the more accurate approach.

Related

Display DB content to a DIV based on a link click [duplicate]

I'm sure that this is a very simple problem, but I have multiple pages each with their own 'content' with page navigation at the bottom. Before I start coding a script to generate several different html files who all have head, body, and navigation footer code... how could I have only one instance of the navigation footer and have the links only update the content inside the 'content' div?
Very basic example of updating an element's content via JavaScript:
<div id="content"></div>
<script>
document.getElementById('content').innerHTML='<b>oh hai</b>';
</script>​​​​​​​​​​​​​
To do it when someone clicks on a link, you'd attach a function to the onclick handler for that link that does the updating and then returns false so the link won't do it's usual navigation.
If you don't want to have all the content loaded into a single file, you can use AJAX to retrieve content dynamically. You may wish to use a library/framework like jQuery to simplify the coding of AJAX interactions.
You can do this with AJAX. An example with jQuery is using the load function:
http://api.jquery.com/load/
This will fetch a given URL and load its contents into an element matched by a selector.
This can be solved in a few different ways. You'll either need to load all possible contents at once (easy to access content after load, but slow initial load), or you can asynchronously request content as your user requires it.
1) Hardcode all content into one page
By doing this, you'd have a selection of content blocks hidden on your page:
<div class="content-blocks">
<div class="content" id="content1">...</div>
<div class="content" id="content2">...</div>
...
</div>
Then, each link would have an event handler to load the appropriate content into your main content element.
document.getElementById('content1-link').onclick = function() {
document.getElementById('content-box').innerHTML = document.getElementById('content1').innerHTML
}
2) Make AJAX requests for content
To do this, your various content blocks would be stored in external files, e.g. 'content1.html', 'content2.html', etc. I would highly recommend using a javascript library with AJAX support for this method, as they will handle differences in how browsers handle asynchronous requests. Some, like jQuery, also provide convenience functions to do such tasks:
$('#content1-link').on('click',function(){
$('#content-box').load('/path/to/content1.html');
});
3) Use include statements
This method has the ease of implementation of the first solution (doesn't rely on async requests), but it keeps your content in separate files, like the second solution. Basically, you utilize whatever type of include your server/language supports (e.g. SSI includes, PHP require, etc). You would then create the event handlers as in the first option.

Run javascript code that is specific to the view

In my ASP.NET MVC4 application I got 1 javascript file for my functions across the site.
This works pretty good - however I want to run certain code in certain views.
Usually I would solve this by simply putting a short script tag in the view calling the desired function.
However I load my js files at the bottom of the body tag so this script tag would call a function before it being loaded which would obviously not work.
How can I call individual parts of my js file from different views while keeping my js files at the bottom of the body?
There are a few things going on here.
I would not be putting JavaScript directly in the page. Many reasons for this, and is not the focus of your question, but something I wanted to bring up.
You can have a separate JS file that gets loaded after your main JS file that actually does the call to the functions from "main".
My approach is to tag said views with an id:
<div id="specific-page-name"></div>
Then in my javascript simply do:
if ($('#specific-page-name').length) {
// Run code
}
This way you can still separate your views from js code.
Finally, if I have to use model data in js I can do something like:
<div data-model-data="#Model.Data"></div>
And simply read it as:
$('div').data('model-data');
I'm detailing the answer given by Matt in his comment : in your layout, you can specify that you want some additional HTML content (in your case, that will be your JS). You'll want to add it after your main JS block.
#RenderSection("AddScripts", required: false)
Then in your view, you can add a section and it won't be rendered in the view, but in the corresponding section in the layout (after your main JS block).
#section AddScripts {
<script type="text/javascript">
...
</script>
}

How can I load an HTML5 page into my HTML5 page?

I am making a simple static app in HTML5.
What I am doing now is that I have one single long page in which I have thousands of lines of code.
I am currently doing this to go to another page:
<div data-role="content">
<label for="heading">History</label>
History
Remote Control
</div>
...and then I have module_a & module_b as follow...
<div id="module_a" data-role="page">
//content
</div>
...and same for module_b
Both divs are in same page so my page looks very bad.
What I want to is that I need same functionality but I dont want my divs that is module_a and module_b in the same page.
I want to create different pages for that and then load it as I am going so that my main page looks clear.
If I gather what you're asking correctly you want AJAX. When you click on one of the links/buttons you need a javascript code which will send a request to get the HTML of another page and load it into place on the page.
The best way to do this is to use jQuery. It has this really helpful function called load() which does EXACTLY what you need. http://api.jquery.com/load/
It looks like this:
$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');
Hope that helps.
This should work:
Put each of your modules in their own file.
Amend the links to the modules so that they link to the module files.
Replace the modules in your original file with an <iframe> tag.
Add onclick event handler to each link that sets the src attribute of the <iframe> to the URL of the module’s file (and returns false, so that the link isn’t followed).
However, you’ve got more scope for doing stuff with the HTML that you load if you go with AJAX as suggested by #ThomasClayson.
Have you tried AJAX?
$.ajax({
url: 'seperate_page.html',
success: function(data) {
$('#module_b').html(data);
}
});
From how I understood the question, this will solve your problem.. hope it helps

How to show a page where a DIV is with jQuery

Hello I have a DIV in the page index.html:
<div id="form"></div>
Now I need a way with jQuery to show another page inside that DIV.
The page I need to call and load there is contact.php
It is a simple HTML + PHP contact form.
Is there a way to load with jQuery the contents of contact.php inside index.html page where the DIV is?
Thanks for your help!
$("#form").load("contact.php");
The jQuery load function fetches data from the server (in this case from contact.php) and replaces the contents of the selected element (in this case #form) with that data.
If necessary, you can also pass data into the page being loaded, and also supply a callback function that will be executed upon completion.
For more information, see the jQuery API.
You probably want to use an <iframe> element. It would look something like this:
<iframe id="form" src="contact.php"></iframe>
This will load contact.php in a separate frame within your index.html, and you can style iframe#form in the same way that you would style a <div>.

jQuery append doesn't work fully with <script> tag

Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'

Categories

Resources