SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is utilising non-html attributes a bad way of scripting?

    Suppose I've got the following html:

    <span class='fakelink' todo='index.php?del=123'>click to delete icon</span>

    When the user clicks the fake link I retrieve the 'todo' attribute and utilise it in an AJAX request. Is this a good way of scripting?

    Will this cause any trouble because 'todo' is an unsupported HTML attribute? Will my HTML document become invalid?

    You may ask why I use this method. Well, I want to leave out any JavaScript in my HTML document and use behaviours instead. To make my JavaScript functions abstract and reusable I want to use pieces of data from my HTML document and pass it to the script.

    Any advice or alternative method highly appreciated!

    Barton

  2. #2
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should be ok if you set your doctype to xhtml and pass the xhtml tags as xml.
    DoesItMatter
    - anyone seen my underwear?

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this:
    Code:
    function reusableFunction(url)
    {
        //do something
    }
    
    mySpan.onlick = function(){resuableFunction(index.php?del=123)};

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly what I want to avoid. You suggest to put data (the url & id) into JavaScript.

    Quote Originally Posted by 7stud
    How about this:
    Code:
    function reusableFunction(url)
    {
        //do something
    }
    
    mySpan.onlick = function(){resuableFunction(index.php?del=123)};

  6. #6
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, what I've learned by reading these articles is that I just continue what I was doing, that is putting data in custom attributes. Creating a DTD seems not recommended and my HTML document will not validate like it should but that doesn't seems a problem at all.

    Thanks for your suggestions!


  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You suggest to put data (the url & id) into JavaScript.
    If you decide you want to change where the onclick event takes the user, what will you have to do with your method? Won't you have to potentially search through 100's of lines of html to find each tag and make changes to its todo attribute? What if you had 100 separate html pages with 100 lines of html per page, and your spans were sprinkled throughout every page?

    With the suggestion I posted, you can put your generic function in an external .js file and link to it, and then write some code like this:
    Code:
    window.onload=function()
    {
    	var spans = document.getElementsByName("gotoPage1Spans");
    	for(var i = 0, len = spans.length; i < len; i++)
    	{
    		spans[i].onclick = function(){genericFunction("page1.php?name=value")};
    	}
    	
    };
    With that method, if you need to change the destination page, you only have to change one line of js code per page, which is located 7 lines beneath your opening script tag. That seems a lot easier to maintain to me. And, if you were even smarter about it, you could put all the different urls that all the different spans need to go to into an array, and then put that array in an external .js file that you link to, e.g.:
    Code:
    //link_pages.js
    linkPages = ["page1.php", "page2.php", "page3.php"];
    That would allow you to make simple page changes to a one line file, and as a result, all the spans on every page of your site would automatically be updated. The onclick assignments would look like this:
    Code:
    window.onload=function()
    {
    	var spans = document.getElementsByName("gotoPage1Spans");
    	for(var i = 0, len = spans.length; i < len; i++)
    	{
    		spans[i].onclick = function(){genericFunction(linkPages[0]};
    	}
    
    	
    };
    You might even be able to make the onclick assignments generic enough to move that code to an external .js file as well.

    If you've fallen in love with the idea of using custom attributes, then instead of using the name attribute in the spans to identify which ones to target, use a custom attribute.
    Last edited by 7stud; Mar 10, 2006 at 23:12.

  8. #8
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7stud, you've got a point and I'll consider your solution.

    I like the attribute solution because the content is placed into its context. Suppose you want a popup with the message "Would you like to delete this icon" and this text is placed as an attribute in the delete button, than it would be easier for the HTML coder to see the relation between the delete button and the pop-up text. But this won't work with multilangual sites... So maybe it's not a good idea.

    Thanks for bringing on the other solution, I'll give it a try!

    Barton


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •