Load html into div without losing js and css - javascript

I want to load a html file with it's own stlyesheet and js into a div of another page.
For example the html file i want to load will be something like this
<html><head>External syle and js</head><body></body></html>
into the div tag of other html page using
$("#divID").load("htmlpagename.html");
When ever I'm loading html it's losing css and I'm thrown with an error in console as
GET http://localhost:81/projects/js/table.js?_=1377245019877
jquery.min.js (line 6) 404 Not Found 149ms

If you want to keep the whole content of the page loaded, you'll need to use an iframe instead.
Information taken from the jQuery .load() documentation:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as html, title or head elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
If you decide to use an iframe, this can help you:
$("<iframe />").attr("src", "htmlpagename.html").appendTo("#divID");

You can use iframe in html, so why don't you use iframe?
<html>
<head>
<!-- Other Head Files and Tags Here -->
</head>
<body>
<div id="divID">
<iframe src="htmlpagename.html"></iframe>
</div>
</body>
</html>

Try this :
$('<iframe />').attr('src', 'htmlpagename.html').appendTo('#divID');
fiddle

Related

Unable to get Javascript file to run on page

I'm not good with script and I can't figure out what's going wrong with my execution.
The webpage is http://snmcsupport.com/map-js-test-page and it should be running a script that produces a clickable map. The script itself is extremely long so I won't paste it here, but you can see it if you click here
On my webpage, I have the markup necessary to run the script in the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js">
</script>
On my webpage, I call the script
<div>
<script type="text/javascript" src="http://snmcsupport.com/wp-includes/js/app.js">
</script>
</div>
But I still can't get the code to run? The initial instructions from the developer also said:
The last step is to initialize the map by making the following script calls:
<script>makeaClickableMap.initialize(<your-document-object-model-handle>);</script>
where your-object-document-model handle can be anything actually:
a jQuery object like $("#map")
a Javascript Document Object Model like document.getElementById("map")
or a simple string like "map"
but I can't figure out what that means. If I try to put in the initialize command in my webpage I get a nasty cross-scripting error and it won't let me.
I'm running this on Wordpress using a Divi Child theme.
makeaClickableMap.initialize(<your-document-object-model-handle>);
//this is the element that will --^
//be used to contain your rendered map
The method makeClickableMap.initialize() expects you to pass it a reference of an HTML element where you want the map to appear. Elements can be identified by
their tag name (div, p, h1, etc.)
a class name <div class="className></div>
OR by id name, which I will demonstrate here:
Firstly, you;ll need an element with an ID associated with it, it should be placed inside the <body> tag:
<div id="map"></div>
underneath this tag, but still within the body tag, you'll need to include the makeClickableMap.initialise call and pass in the ID of this <div>:
<!-- Javascript solution: -->
<script>
makeaClickableMap.initialize(document.getElementById('map'));
</script>
<!-- notice that the id is just 'map' here -->
An alternative to the Javscript solution above is using jQuery as follows (you'll still need the div with the ID):
<!-- jQuery solution: -->
<script>
makeaClickableMap.initialize($('#map'));
</script>
<!-- notice the ID is prefixced with a '#' character-->

how is PHP distorting my HTML?

I've been running into some problems that seem to arise from making my questionnaire a .PHP file rather than an .HTML. The reason I had to do this is because I'm using a PHP script for working with an SQL database and I had to include them into the Questionnaire, which won't work as an HTML.
In the HTML version everything runs perfectly the way I coded it. When I saved it as a .php file my javascript stopped working properly and I tried linking the javascript at the bottom of the body tag instead of the head and that still didn't help.
After a lot of going back and forth trying to see what's different I decided to save the .php file as an html just for grins and giggles to see if I still got the same problems. Oddly enough, it runs just as smooth as the other HTML file.
here's links to all 3 versions so you can see what I mean.
HTML v1
PHP
HTML v2
In the JS Console I got this error
Uncaught TypeError: Cannot set property 'onClick' of null
which referred me to line 163 of my .js file which is referencing the "next" button of the first page of the Questionnaire (not intro page that loads up but the next page where you actually input data).
The way I have the Questionnaire structured in the .PHP file is
<?php ini_set('display_errors','on'); ?><?php include('extlib/vdaemon/vdaemon.php'); ?><!doctype html>
<html>
<head>
//links to files etc.//
</head>
<header>
</header>
<body>
<form action="core/process.php" method="post" id="CorpID" runat="vdaemon">
<input type="hidden" name="formID" value="Questionnaire" />
<input type="hidden" name="redirect_to" value="http://optiqvision.x10host.com/Corp_ID_&_Branding_Questionnaire.html" />
//all form inputs//
</form>
<?php VDEnd(); ?>
</body>
<footer>
</footer>
</html>
The entire Questionnaire has well over 100 individual inputs so I didn't want to put all of them in this snippet. I just wanted to show the over all structure, plus I figured you could get more details in the browser from clicking on them and looking at the debugger to see more of what's going on. Can anyone identify what I'm doing wrong with the PHP? I really don't understand why it's messing up the way it is.
In your html the code for the textarea is like this:
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
In your php the
The textarea closing tag is misplaced; coming after a lot of div's including the element with the id=p1_next. SO the divs just become part of the textarea value instead of being part of the HTML page
Edit: Looks like the real problem is that the DOM is broken. In your PHP file, you have a self-closed textarea tag. textarea tags need a closing tag.
<!-- you have this, it's not syntactically correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;" />
<!-- the following is correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
Put Corp_ID_&_Branding_Questionnaire.js right before the body tag and it will work. The reason the PHP file is throwing a javascript error is because the node "p1_next" doesn't exist at runtime since your JS is in the head tag.
The reason it's working in the HTML file is mainly thanks to luck. The static HTML is loading fast enough that the DOM is ready by the time your JS code is running. As a thumb of rule, generally include all your JS right before the body tag. There are of course some exceptions.
If you really need to include your script in the head, you can wait until the DOM is ready by wrapping all your code with this:
$(document).ready(function() {
console.log( "ready!" );
// your JS code here
});
Last, if you're going to be using jQuery as a library, then it is recommended to use jQuery syntax instead of native JS. Just make sure to include the jQuery JS before your code.
var p1a = document.getElementById("p1_next");
// becomes:
var p1a = $('#p1_next'); // jQuery node by CSS selector
Before the end of the body tag like this:
<html>
<head>
..your code ..
</head>
<body>
..your code ..
<script type="text/javascript" src="http://www.optiqvision.x10host.com/Files/Javascript/Corp_ID_&_Branding_Questionnaire.js"></script>
</body>
</html>

Add html on head

I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>

How to create iframe about:blank without src but content html javascript

I want to create a iframe without src ( about:blank ) but that iframe content some javascript html
I need to do it because I don't want create a hosted webpages on server for this mission, this will make more connection to server which are no good for resource. And also don't want to write direct javascript html on webpage because they make the webpage load slow most time when load/running.
How to do it by using javascript (jquery maybe )?
iframe eg :
<iframe src="about:blank" width="300" height="250" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
and its content:
<div>xxx</div>
<script type="text/javascript">var abc=1 </script>
<script type="text/javascript" src="http://1234.net/js.js"></script>
UPDATE
Thanks for some answered following.
But I need to clarify that script will create iframe by javascript also, because the need to create iframes in one page with different ids.
Please look at my test:
http://jsfiddle.net/rDkEw/
The problems are:
if use document.body.appendChild, the iframe will create on body of webpage, but I need it to keep it inside the current div which hold the JavaScript.
For everyone googling this after 2016: Use a data: URL, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.
<iframe src="data:text/html, <h1>Your HTML</h1>"></iframe>
An <iframe> has a contentDocument property representing its… content’s document. You can use write() on that. Here’s a demo.
You can do it like this:
var iframe = document.getElementById('iframeid');
var div_el = document.createElement('div');
div_el.innerHTML = "....";
iframe.contentWindow.document.body.appendChild(div_el);
A jQuery solution:
$('#iframeid').contents().find('body').append("<div>.....</div>");
With jQuery:
$('#myIframe').appendTo('#iframeDiv');
your iframe id = "myIframe"
your html content div id = "iframeDiv";
note: without jQuery, the two other answers seem perfectly suited.
You can add any content to page in iframe as described here but as you don't have a page loaded I doubt the javascript you add to this page will work. You can give it a try.

Absolute url overwiritten as a Relative URl when adding a new html element like iframe etc (i.e adding the a base address at prefix of URL supplied)

I am trying to add an iframe to my website. The problem is that our CMS automatically overrides the src address given ex: I set the absolute url (source address) to http://www.youtube.com/embed/RE6C1AoWy3M and when the page is rendered the src is modified as shown.
The base address is being added. This was set as we normaly upload images/files on our file system.
Any idea how can I override this, maybe embed some javascript function. I do not have access to .cs/ Asp.net pages.
You can create an inline script that will render the iframe during the page load.
Example:
<html>
<head>
<title>example</title>
</head>
<body>
<!-- Your normal HTML/text here -->
<!-- add the script where you wanted the iframe to be -->
<script type='text/javascript'>
document.write("<iframe src='http://www.youtube.com/embed/RE6C1AoWy3M'></iframe>");
</script>
<!-- Your remaining HTML/text here -->
</body>
</html>
This has finally worked. I am creating the iFrame as shown below not using the CMS drag/drop html objects and modify the src attribute.
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
// Here I am getting the object to append the iframe to
var elem = document.getElementById("td1");
// Append iframe to this element.
elem.appendChild(el);
el.setAttribute('src', 'http://www.youtube.com/embed/RE6C1AoWy3M');
</script>
Although this solved my problem, I am open to new maybe better suggestions. I am willing to learn from other's experience.

Categories