Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Can a containing element affect content functionality?

    Hello, everyone.

    I'm not currently having an issue, but I am trying to understand something. Input is appreciated.

    I am using jQuery 1.8, and in one particular document I have set up something that will delete certain files stored within a database. I can't type all the code, here, but I'll try to present an accurate facsimile.

    The links to delete a particular file were anchor tags within a span, like so:
    Code:
    <span style="display:block;" id="span_{ unique identifier }">
      <a href="javascript:void;" name="del_{ same unique id }" id="del_{ same unique id }" class="delFile"><img for delete icon /> FILENAME.EXT</a>
    </span>
    Within document.ready, I had the following:
    Code:
    $('a.delFile').click(function(evt){
      var delID = $(this).attr('id'), spanID = delID.replace(/^del\_/,"span_");
      delID = delID.replace(/^del\_/,"");
      [[ function to delete file by ID ]]
      });
    This is working fine in both IE and FF. But something has me perplexed.

    I temporarily changed the span tags to paragraph tags, and while it still worked in IE, it stopped working in FF. I reverted back to span tags, and it's working just fine, again. But I'm confused as to why a <p> would prevent the delete function in FF, when <span> had no problem.

    Any ideas?

    Thank you,
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Unless you also changed $('a.delFile') to $('p.delFile') (and any occurrence of “span” to “p”, related to the element type) I see no reason why it wouldn’t work (and differently in Firefox and IE for that matter).

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Since the functionality for deleting was for the anchor tags and not the containing span/paragraph, the $('a.delFile') was not changed to $('p.delFile').

    I'm stumped. I just don't see what I'm missing.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Not to ask a dumb question, but...
    Code:
    $('a.delFile').click(function(evt){
      var delID = $(this).attr('id'), spanID = delID.replace(/^del\_/,"span_");
      delID = delID.replace(/^del\_/,"");
      [[ function to delete file by ID ]]
      })
    What is the purpose of the code in red there?

    And for that matter, what was the purpose in giving the <span>s an ID in the first place?

    Or, turning it around the other way, why do you need *BOTH* the <span> and the <a> tags???

    I'm *GUESSING* that after you delete the file you want to hide the <span> or equivalent?

    Why not keep it much simpler?
    Code:
    <style>
    .delFile {
        display: block;
        /* and any other characteristics desired */
    }
    </style>
    ...
    
    <span id="del_{ unique identifier }" class="delFile">
        <img for delete icon /> FILENAME.EXT</a>
    </span>
    
    ...
    $('.delFile').click(
        function()
        {
            var delID = $(this).attr('id').replace(/^del\_/,"");
    
            [[ function to delete file by delID ]]
    
            this.style.display = "none";
        }
    );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I'm using .remove() for the span, once the file is deleted. The spanID variable sets which one.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    So why not just do as I suggested and, instead, hide the <span>?

    But even if you insist on removing it, I don't see why you need the separate <span> and <a>.

    Example:
    Code:
    <style>
    .delFile {
        display: block;
        /* and any other characteristics desired */
    }
    </style>
    ...
    
    <span id="del_{ unique identifier }" class="delFile">
        <img for delete icon /> FILENAME.EXT
    </span>
    
    ...
    $('.delFile').click(
        function()
        {
            var delID = $(this).attr('id').replace(/^del\_/,"");
    
            [[ function to delete file by delID ]]
    
            this.parentNode.removeChild(this);
        }
    );
    The ID isn't even needed except for purposes of calling to delete the file.

    But for that matter, why not forget the id and just do it by the *NAME* of the file?
    Code:
    <span class="delFile">
        <img for delete icon /> FILENAME.EXT
    </span>
    
    ...
    $('.delFile').click(
        function()
        {
            // probably better to remove the <img> node and then get just the text node
            // but this shows the general idea...just extract the filename alone:
            var fname = this.innerHTML.replace(/^\s*\<img[^\>]+\>\s*/i,"");
    
            [[ function to delete file by file name ]]
    
            this.parentNode.removeChild(this);
        }
    );
    Last edited by Old Pedant; 01-08-2013 at 06:17 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by Old Pedant View Post
    But for that matter, why not forget the id and just do it by the *NAME* of the file?
    If the file were stored on the server filesystem, that would be a no brainer. But they are stored in a database, with the content in one table and the file name in another table. Both tables contain the unique ID.

    PS. To the mod who moved this into the Frameworks section: Although I am using jQuery, the question, itself, is not a jQuery question.
    Last edited by WolfShade; 01-08-2013 at 08:54 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Posting Permissions

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