extract load in div - javascript

i use this script that uses the load function and inserts it in a div
<div id="NomeUtente"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$("#NomeUtente").load('http://www.ilfree.it/index.php?/nome.html/');
</script>
it is possible through php to draw in content within the div?
I wish I could pick up the result in the div and then use it on php... help me please

Unsure about what you mean by a php page. But you can read the contents of a div using jquery's html function.
var htmlContent = $("#NomeUtente").html();

Related

The contents of a loaded div doesn't appear from a loaded HTML

I'm developing a single-page web app. What I did is that I have a main page index.html where I have all the skeleton of the app but I have in the body a div that i use to load the contents of the page that I want to show. In the loaded page I have a div whose contents need to loaded as well. The issue is that the contents of the second div doesn't appear and I can't figure out why.
I think you would need an example to better understand.
I have two html files: index.html and browse.html.
First here is browse.html:
<div id="browse_contents">
</div>
Finally here is index.html:
<html>
<head>
//load jquery
<script>
$(document).ready(function(){
$("#browse_page").load("browse.html")
$("#browse_contents").html("<p>The contents.</p>")
});
</script>
</head>
<body>
<div id="browse_page"></div>
</body>
</html
So the problem is that "The contents." doesn't appear and I can't figure out why!
Currently, #browse_contents doesn't exist in the DOM when you are attempting to change its HTML.
.load() is asynchronous, which is why it and other jQuery AJAX methods come with a callback parameter; a function to call when the request is complete:
$(document).ready(function(){
$("#browse_page").load("browse.html", function(){
$("#browse_contents").html("<p>The contents.</p>");
});
});

Load script after inserting it to an element

We have page like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="abc"></div>
</body>
</html>
I want to insert script in div and run it.
So im doing something like this:
document.getElementById("abc").innerHTML="<script>alert('sup');</script>";
Good, script is inside that div, but how can i run it now?
I propably didn't make it clear:
I have an external script that i need to put in specified place on the page.
I don't have access to the website, so i can't put it on the page code.
I want to do this, becouse this script makes new objects on the place where it is putted.
I don't have access to that script. I just have link (not direct) to it.
Make it a function. Use <script>function myAlert(){alert('sup');}</script> instead. You can then call it with myAlert();.
Please use createElement for that
var div = document.getElementById('abc');
var script = document.createElement('script');
var code = document.createTextNode('alert("sup");');
script.appendChild(code);
div.appendChild(script);
To put a script in a div is only useful for document.write And please don't do that. :-)

Select the content of a <script>...</script> as plain text within the html body?

Ok, so lets say i have this here:
<head>
<script type="text/javascript" src="mySecondScript.js">
</head>
<body>
<div class="mainScriptContainer">
<script type="text/javascript">
jwplayer('jwplayer-0').setup({
"image": "http://i1.ytimg.com/vi/hHbAEl1Wbms/0.jpg",
"file": "https://www.youtube.com/watch?v=hHbAEl1Wbms"
});
</script>
</div>
</body>
And all I want to do (within "mySecondScript.js" placed in the header) is to select as plain text the entire content of the <script type="text/javascript">...</script> and contain it inside a variable.
I'll try to explain even further with an example of what I could do with it and what effect it should have
function(){
var plainText = ;//here goes the function that select the whole script content witch is itself contained within the
alert(plainText);
};
And this would create an alert saying:
jwplayer('jwplayer-0').setup({"image": "http://i1.ytimg.com/vi/hHbAEl1Wbms/0.jpg", "file": "https://www.youtube.com/watch?v=hHbAEl1Wbms"});
The function can be in Javascript or jQuery, it doesn't matter
You can get that script tag's text by using the .text() function. Please read here to know more about .text()
Try,
$(function(){
var plainText = $('.mainScriptContainer script').text();
alert(plainText);
});
DEMO
<script> elements are element nodes in the DOM, so you can get them like this:
document
.getElementsByClassName('mainScriptContainer')[0]
.getElementsByTagName('script')[0];
And then, to get its inner text, you can use
.innerHTML
.firstChild.nodeValue
.textContent

javascript - get the content of a div inside an iframe in a js in the main page

Good day to all.
I have this structure
<html>
<iframe>
<div id="idd">Some Content</div>
</iframe>
<script type="text/javascript">
function getIddContent()
{
//This is the part I ask about
}
var content = getIddContent();
</script>
</html>
I need to get the content of the div inside the content variable. Thank you for your time. If I use document.getElementById("idd").innerHTML it says that the div doesn't exist.
Use the following code
function getIddContent() {
return window.frames[0].document.getElementById('idd').innerHTML;
}
But you probably have to include the iframe contents via the src attribute on the iframe.

How to replace Current script tag with HTML contents generated by the same script

I want to replace the current script tag with the HTML contents generated by the same script.
That is, my Page is
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
Inside each .js file corresponding html contents are generated. I want to put the contents as the innerHTML of the parent div. But can't set id for the parent div because the page is not static. So the current script tag must be replaced with the HTML content. How can I do this?
For each script tag src is the same. So can't identify with src. These scripts displays
some images with text randomly. Scripts are the same but displays different contents in divs on loading
Please help me
try inside of myfile1.js:
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
This is a great question for those trying to implement a JSONP widget. The objective is to give the user the shortest possible amount of code.
The user prefers:
<script type="text/javscript" src="widget.js"></script>
Over:
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
Here's an example of how to achieve the first snippet:
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
Have a look at: http://alexmarandon.com/articles/web_widget_jquery/ for the correct way to include a library inside of a script.
document.currentScript has been available since 2011 on Firefox and 2013 on Chrome.
document.currentScript documentation at MDN
<!DOCTYPE html>
<meta charset="UTF-8">
<title>currentScript test</title>
<h1>Test Begin</h1>
<script>
document.currentScript.outerHTML = "blah blah";
</script>
<h1>Test End</h1>
Unfortunately a running JavaScript file is not aware of where it is running. If you use document.write() in the script, the write function will take place wherever the script runs, which would be one way to accomplish what you want, but without replacing the contents or being able to perform any actions on the enclosing DIV.
I can't really envisage a situation where you'd have such stringent restrictions on building a page - surely if the page is dynamic you could generate identifiers for your DIV elements, or load content in a more traditional manner?
Why not use Smarty?
http://www.smarty.net/
You can use javascript in Smarty templates, or just use built-in functions.
Just take a look at http://www.smarty.net/crash_course
poof -- old answer gone.
Based on your last edit, here's what you want to do:
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
If you don't mind the script tag remaining in place you can use something as simple as document.write().
myfile1.js:
document.write("<p>some html generated inline by script</p>");
It will do exactly what you need.

Categories