Omnimaga
General Discussion => Technology and Development => Web Programming and Design => Topic started by: Munchor on September 24, 2011, 04:52:27 am
-
I am using Javascript (with jQuery) to change the attribute of an object tag, the "data" attribute.
Here's the HTML code:
<div id="content">
<object id="text" width="600" height="450" type="text/html" border="0" style="overflow: hidden;"></object>
</div>
That is a simple object within a div, an HTML object. I want to link it to file, using the [/tt]data = "file.html"[/tt] attribute.
$(document).ready(function() {
$('#text').attr('data', "hometext.html");
});
So this should make it so that when the page is ready, the "text" object data is set to "hometext.html".
However, nothing is really happening, because linking "hometext.html" to the object data should display the contents of "hometext.html" in its location.
If I manually go to the HTML code and set data="hometext.html" it works, but not through jQuery.
How can I do it? Thanks!
-
try $('#text').data="hometext.html";
-
try $('#text').data="hometext.html";
Thanks for the tip, but it didn't work either. I know there's a function called data() which I could use for this, but I'm either not using it right or it is also not working.
I think the problem is the following:
I change the data attribute of the object. That part works. However, due to jQuery/Javascript limitations the object isn't "refreshed", the content isn't "updated".
-
Humm. Yeah. What about using AJAX http://www.w3schools.com/ajax/default.asp
-
It probably is changing the data attribute correctly, but that doesn't mean the user's browser loads the new data.
-
It probably is changing the data attribute correctly, but that doesn't mean the user's browser loads the new data.
Is there a way I can make it load it, like updating it? Thanks.
@Binder News, I can't use Ajax for this, but thanks for the suggestion.
-
Is there a way I can make it load it, like updating it? Thanks.
Has to be static unless you're willing to use AJAX, unfortunately. Try outputting the value with PHP.
-
I guess I'll use Ajax then.
$(document).ready(function() {
$('#text').data="hometext.html";
$('#projetos').click(function() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("text").data="projetos.html";
alert("hey");
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
//$('#text').attr('data', "projetos.html");
});
});
I tried that to change the "data" attribute when the user presses a link but I get (in the Javascript Console, Chrome):
GET http://(...)/ajax_info.txt 404 (Not Found)
-
Since you're using jQuery already, you might as well use jQuery's AJAX functions (http://api.jquery.com/category/ajax/).
-
This works fine for me in Firefox:
<!DOCTYPE html>
<html>
<body>
<object id="text" width="600" height="450" type="text/html" border="0" style="overflow: hidden;"></object>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#text').attr('data', 'http://www.google.co.uk');
});
</script>
</html>But if you want it when the page is ready, why do it with JavaScript? Why not just set the data attribute when the page is built client side? or better yet, just inline the HTML client side, and send it in one. That will make the page load much quicker.