jquery .load - how to target the loaded file with javascript and jQuery - javascript

If I have a template index.html and use jquery.load to include a file with html e.g $('#targetDiv').load( 'includes/inc1.html' ); into it. How do I target the content in inc1.html with both javascript and jQuery from within index.html
let's say inc1.html contains <div id="content">10</div> and I want to change the value from 10 to 20 using document.getElementById("content").innerHTML = "20"; within the script tags in index.html?
Thanks

What I suggested in the comments about setting a callback function.
$('#targetDiv').load( 'includes/inc1.html', function(){
$('#content').html("20");
});

Related

Dynamically adding html from external view

I have a function in javascript appending some HTML to some div like:
$("#test").html("<tr><td>" + data[0].foo + "</td></tr>");
I don't want this HTML to be in my code, so I want to place this into some external file and load it into variable. But what about data variable? How do I pass it to this external file? How do I use it?
You can store that code in a file (let's say script.js because I'm feeling creative), and using the jQuery function $.getScript( "script.js") will load the script into your page.
If you have the name in a variable, that's not a problem, you can just use
var scriptSrc="script.js";
$.getScript(scriptSrc);
Does this answer your question?

Can jQuery replace text with JavaScript that is then executed

I have a page with headers, images, etc. I'd like to replace a "page" div with another file of HTML, JavaScript, etc using Ajax and execute JavaScript on that page after it is loaded. How do I do this and also handle < , ", and other tags in the file and pass the page some parameters?
Is the other "page" content owned by you? If so, you can have javascript methods on your main "container" page, then once you fire the method to pull the contents of the new "page" div, fire the corresponding javascript method you need, since any necessary DOM elements will have been added to the page at this time.
To do it the way you mentioned, you can follow the steps seen here to use the dynamic script pattern: Executing <script> inside <div> retrieved by AJAX
Basically, you host your javascript externally, then once the page has loaded, add the "src" tag to a script element and it will execute.
As for handling special characters, you can follow steps with jQuery's ajax call to inject HTML from the other page into your current one, such as here: How to get the html of a div on another page with jQuery ajax?
$.ajax({
url:'http://www.example.com/',
type:'GET',
success: function(data){
$('#ajaxcontent').html($(data).find('body').html());
}
});
(Instead of targeting a specific div on the external page, you would target the body or parent container div)
given an html page
<html>
...
<body>
<div class="page">
some html content...
</div>
</body>
</html>
you can replace the content of the div via the jQuery function load()
$("div.page").load("an-http-resource.html");
Use an AJAX request to get the HTML file as a response.
Replace the "page" div innerHTML with the response.
If the HTML page has a bunch of headers and such and you only want a certain portion of that HTML file, you may want to use getElementById or some other method of selecting the portion of the HTML file.
The HTML entities will appear as they normally would in a browser, if that is what you mean by handling < and " and other tags.
You can send parameters by editing the endpoint:
index.html?date=today&car=yours

Replacing contents of html page using another html page

I am trying to avoid header, sidebar info repeating of my html page template.
So, I was thinking to user innerHTML to replace the contents on the fly. However, I do not want to put entire target html on the same page under innerHTML as it will be nightmare to debug or maintain later.
So, is there a way to specify the another page link in the innerHtml and have contents separate?
just as an example
<script type="text/javascript">
function replacePage(page){
var ele = document.getElementById('page-wrapper'); ele.innerHTML = "<div>hey vik</div>";
}
</script>
I'm looking if i can specify the innerHTML value as some .html file name and move the <div>hey vik</div> there.
ok guys i finally used jquery to do this. What I did was instead of loaded content part, i actually moved the static part into a .html file and then loaded it via jquery as
$(function() {
$("#includedContent").load("navbar.html");
};
the place where i need to rander it i added as below
<div id="includedContent"></div>
You can use document.documentElement to select the root element of the document and the store it in a variable:
let content = document.documentElement;
And then use innerHTML to change the page content:
content.innerHTML = "<body><h1>text</h1><body>";

jQuery .before() with external HTML file (same domain)

I'd like to know if it's possible to use the .before() function in jQuery to load an external html file in the same domain.
What I'd like is an HTML form with dynamically placed form elements based on users' entries (being able to add as many phone number fields as they want for instance). I tried many options like .load() or .html() but I can't seem to find any working solution. Maybe I'm not doing this right...
<script>
$(document).ready(function(){
$("#add_society_number").click(function(){
$(this).closest('table').before(forms/society_phone_number.html);
});
});
</script>
What should I use instead of "forms/society_phone_number.html"?
I'll have many pages with shared forms, that's why I want them in external files.
Another reason why I'd like to load external HTML files is that when using .before() function, I have to use "\" for each line breaks in my code...
Thank you :)
You'll need to use $.ajax or one of it's helper methods to get the content.
$(document).ready(function(){
$("#add_society_number").click(function(){
var self = this;
$.get("forms/society_phone_number.html",function(response){
$(self).closest('table').before(response);
});
});
});
you can also use .load('/url/to/script')
<script>
$(document).ready(function(){
$("#add_society_number").click(function(){
$(this).closest('table tbody').load('forms/society_phone_number.html');
});
});
</script>

Am I safe executing this outside "document.ready()" block?

Would I be safe moving this piece of code out from inside the document.ready() block.
var $userInfoNode = $('#userOptions');
CURR_USER_ID = $userInfoNode.attr('data-userId');
CURR_USER_NAME = $userInfoNode.text();
This code is placed in an external js file that is loaded from the head section of html page & selects an html element placed within html body, to extract data from there.
Short answer: No, since the JavaScript file is placed in the header.
The DOM (Document Object Model) needs to contain the <div id="userOptions"> when the code is executed.
Either you place the code after the div, for example right before the closing </body>.
Or you place the code within the $(document).ready() function, which is triggered as soon as the DOM is fully loaded.
out of the document.ready() block.
external js file that is loaded from the head section
selects an html element placed within html body
=> No. You can try it and will find $userInfoNode empty.
Yes.
You also need to ensure that the html elements you are going to refer to appear before your javascript.
in short put this
var $userInfoNode = $('#userOptions');
CURR_USER_ID = $userInfoNode.attr('data-userId');
CURR_USER_NAME = $userInfoNode.text();
at the end of your html page...
If you have to/want to keep it in an external file you can place the script element that references it at the bottom before your closing body tag. It looks a little weird at first but it is valid.

Categories