« previous next »
Pages: [1]   Go Down

Author Topic: Change data attribute of object in html  (Read 4408 times)

0 Members and 1 Guest are viewing this topic.

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Change data attribute of object in html
« 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:

Code: [Select]
<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.

Code: [Select]
$(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!
Logged

Offline Binder News

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 785
  • Rating: +46/-3
  • Zombie of Tomorrow
    • View Profile
Re: Change data attribute of object in html
« Reply #1 on: September 24, 2011, 10:32:13 am »
try $('#text').data="hometext.html";
Logged
Spoiler For userbars:







Hacker-in-training!   Z80 Assembly Programmer     Axe Programmer
C++ H4X0R             Java Coder                           I <3 Python!

Perdidisti ludum     Cerebrum non habes

"We are humans first, no matter what."
"Fame is a vapor, popularity an accident, and riches take wings. Only one thing endures, and that is character."
Spoiler For Test Results:




Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Change data attribute of object in html
« Reply #2 on: September 24, 2011, 11:00:11 am »
Quote from: Binder News on September 24, 2011, 10:32:13 am
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".
Logged

Offline Binder News

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 785
  • Rating: +46/-3
  • Zombie of Tomorrow
    • View Profile
Re: Change data attribute of object in html
« Reply #3 on: September 24, 2011, 11:14:21 am »
Humm. Yeah. What about using AJAX http://www.w3schools.com/ajax/default.asp
Logged
Spoiler For userbars:







Hacker-in-training!   Z80 Assembly Programmer     Axe Programmer
C++ H4X0R             Java Coder                           I <3 Python!

Perdidisti ludum     Cerebrum non habes

"We are humans first, no matter what."
"Fame is a vapor, popularity an accident, and riches take wings. Only one thing endures, and that is character."
Spoiler For Test Results:




Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Change data attribute of object in html
« Reply #4 on: September 24, 2011, 11:28:27 am »
It probably is changing the data attribute correctly, but that doesn't mean the user's browser loads the new data.
« Last Edit: September 24, 2011, 11:28:39 am by Deep Thought »
Logged



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Change data attribute of object in html
« Reply #5 on: September 24, 2011, 12:32:59 pm »
Quote from: Deep Thought on September 24, 2011, 11:28:27 am
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.
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Change data attribute of object in html
« Reply #6 on: September 24, 2011, 12:36:02 pm »
Quote from: ephan on September 24, 2011, 12:32:59 pm
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.
Logged



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Change data attribute of object in html
« Reply #7 on: September 24, 2011, 12:37:51 pm »
I guess I'll use Ajax then.

Code: [Select]
$(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):

Quote
GET http://(...)/ajax_info.txt 404 (Not Found)
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Change data attribute of object in html
« Reply #8 on: September 24, 2011, 12:47:52 pm »
Since you're using jQuery already, you might as well use jQuery's AJAX functions.
Logged



Offline JL235

  • LV3 Member (Next: 100)
  • ***
  • Posts: 57
  • Rating: +13/-0
    • View Profile
    • Play My Code
Re: Change data attribute of object in html
« Reply #9 on: September 25, 2011, 01:40:39 pm »
This works fine for me in Firefox:
Code: [Select]
<!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.
Logged
Build games in the browser at PlayMyCode.com, @playmycode
Pages: [1]   Go Up
« previous next »