SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble escaping generated content

    I'm dynamically generating an image tag, and the final slash for self-closing the tag is not coming through, even though the slash is escaped with a backslash. Worse, I think this is screwing up my attempt to select the image in another function. Any ideas what could be causing problems?

    var closeImage = "<img style='float:left;' src='close_x_gray.gif' alt='close' \/>";

    // Ensure all selection zones are revealed except (i.e. then hide) technology
    function WriteTechnologyToMainSelection(technology) {
    var mainSelectionXhtml = '';
    if (technology != '')
    {
    mainSelectionXhtml = '<div style="float: left;">' + technology + '</div>' + closeImage;
    }

    // $('#sideColumn').css('color', 'red');
    $('#mainSelectionRight').html(mainSelectionXhtml);
    }

    Which Firebug shows me isn't producing a well formed tag.

    <div style="float: left;">Sequencing</div>
    <img alt="close" src="close_x.gif" style="float: left;">




    The image does appear, but I can't reference it later on.

    $("#mainSelectionRight img").click(StartTheSearch);

    While everything works fine if I drop the " img" from the call and let clicking anywhere in the div start the search.

    Any idea why escaping the slash isn't working?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you bind the click event to the image before the image is injected into the DOM?

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This format works in all browsers:

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Build String</title>
    <script type="text/javascript">
    <!--
    var technology="Sequencing";
    var closeImage = "\n<img style='float:left;' src='close_x_gray.gif' alt='close' \/>\n";
    mainSelectionXhtml = '<div style="float: left;">' + technology + '</div>' + closeImage;
    alert(mainSelectionXhtml)
    //-->
    </script>
    </head>
     
    <body>
     
    </body>
     
    </html>

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks AllanP. This is a unicode page, but I'll try the unicode equivalents and let you know.

    Quote Originally Posted by furicane View Post
    Did you bind the click event to the image before the image is injected into the DOM?
    No. This may be something I don't thoroughly understand about JS, but whenever I've written click functions with jQuery all I've ever needed to do is reference the proper selector (e.g. #mainSelectionRight img).
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    Any idea why escaping the slash isn't working?
    Possibly because the web page is not XHTML? You may think that it should be XHTML, but the web page is interpreting it as if it were HTML instead.

    Right click on the page and view the page info, to see if the content-type is "text/html" or "application/xhtml+xml"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I tried including escaped line breaks (i.e. carriage return / line feed) and if I try View Selection Source in FF, I can see that they are indeed causing line breaks at the appropriate places, however, I'm still missing my self-closing slash.

    Next I tried, escaping the slash not with a backslash but as a unicode character like the line breaks (\u002F). All these continue to produce the same malformed image tag...

    <img alt="close" src="close_x_gray.gif" style="float: left;">

    At this point I wondered if jQuery might be processing this into the same output so the tag <img blah blah blah /> looked the same whether the result was escaped or not. Therefore, I tried to write something which would process into "\/" and be read correctly (assuming that's even correct). Therefore I escaped both slashes (\u005C\u002F). That didn't work, though it at least produced something different...

    <img \="" alt="close" src="close_x_gray.gif" style="float: left;">

    However, I don't believe that really an improvement. $("#mainSelectionRight img").click(StartTheSearch); doesn't work in IE8, FF3.6, or O11, so I still can't trigger the search to start over just by clicking on the close image.

    Quote Originally Posted by pmw57 View Post
    Possibly because the web page is not XHTML? You may think that it should be XHTML, but the web page is interpreting it as if it were HTML instead.

    Right click on the page and view the page info, to see if the content-type is "text/html" or "application/xhtml+xml"
    Actually, the site is hosted on IIS so I don't even need to check to know that the content-type is "text/html". Someone once told me that's it's possible to get IIS to serve content as "application/xhtml+xml", but I've never seen an MS server actually configured to do it. In MSland, I live where XHTML served as "text/html" is as close as you can ever get.

    Is that why the content I'm creating in jQuery is incorrect?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    Is that why the content I'm creating in jQuery is incorrect?
    No it's not. The web page is of type "text/html" which is why HTML tags are being added to your page.

    The whole XHTML/HTML debacle though is completely unrelated to why you're experiencing the problem.

    Here's a quick test page that I put together, which can be played around with to confirm that the image is easily found, and that the attached event does work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>Test page</title>
    </head>
    <div id="mainSelectionRight">
    
    </div>
    <p>
        <button onclick="WriteTechnologyToMainSelection('This technology')">This technology</button>
        <button onclick="WriteTechnologyToMainSelection('That technology')">That technology</button>
    </p>
    <p><button onclick="getTheImage()">Get the image</button></p>
    <p><button onclick="attachEventToImage()">Attach event to image</button></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
    var closeImage = "<img style='float:left;' src='close_x_gray.gif' alt='close' \/>";
    
    // Ensure all selection zones are revealed except (i.e. then hide) technology
    function WriteTechnologyToMainSelection(technology) {
        var mainSelectionXhtml = '';
        if (technology != '') {
            mainSelectionXhtml = '<div style="float: left;">' + technology + '</div>' + closeImage;
        }
    
        // $('#sideColumn').css('color', 'red');
        $('#mainSelectionRight').html(mainSelectionXhtml);
    }
    function getTheImage() {
        alert($('#mainSelectionRight img')[0]);
    }
    function StartTheSearch() {
        alert('Search started');
    }
    function attachEventToImage() {
        $("#mainSelectionRight img").click(StartTheSearch);
    }
    </script>
    </head>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here's a quick test page that I put together, which can be played around with to confirm that the image is easily found, and that the attached event does work.
    Quote Originally Posted by furicane View Post
    Did you bind the click event to the image before the image is injected into the DOM?
    I had to go with a fallback functionality and only had time to circle back and resolve this issue now. Hazards of deadlines. Anyway, this was the problem. Apparently the image was being injected into the page after my run time code executed and tried to attach the event handler to it. Instead of binding to the image at run time, I had to write that into the function I was calling which created the image, then everything worked fine.

    var closeImage = newLine + "<img style=\"float:left;\" src=\"close_x_gray.gif\" alt=\"close\" \/>" + newLine; // TODO // forward slash is escaped but still does not appear (try template solution??)
    mainSelectionXhtml = "<div style=\"float: left;\">Select a Technology</div>" + closeImage;

    $("#mainSelectionRight").html(mainSelectionXhtml);
    // Need to bind the event here, because the image does not exist on the page
    $("#mainSelectionRight img").bind("click", StartTheSearch)

    Just saw your status. Prayers and thoughts to you, your family, and your entire community. I am so saddened to hear what you've all gone through, Paul.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Off Topic:

    Quote Originally Posted by Chroniclemaster1 View Post
    Just saw your status. Prayers and thoughts to you, your family, and your entire community. I am so saddened to hear what you've all gone through, Paul.
    Thanks. We're making it through, but it's going to be a long hard battle. Power & Internet have returned to my home, which is the important thing but water and sewage could be a few weeks to go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Off Topic:



    Thanks. We're making it through, but it's going to be a long hard battle. Power & Internet have returned to my home, which is the important thing but water and sewage could be a few weeks to go.
    I'm glad to hear that they've fixed the important things.

    It is amazing to think what you're all going through, Paul. Are you relying on bottled water then? Can't think of a bloody useful thing we can do, but you should know that my family and I care. We're praying for you and everyone as you start to rebuild and for all those who've lost loved ones. If there's anything I can do, PM me. And take care; we're so glad that it sounds like you and yours are doing all right.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Off Topic:

    Quote Originally Posted by Chroniclemaster1 View Post
    It is amazing to think what you're all going through, Paul. Are you relying on bottled water then?
    Many many bottles and buckets of water. We fortunately have a source from a factory with external pipes, which is one of the official water collection sources. Most other people are going to water tankers that are spread around the city. We all still have to boil the water before use, but this factory source has no queues, tastes good, and is easy to access.

    Quote Originally Posted by Chroniclemaster1 View Post
    Can't think of a bloody useful thing we can do, but you should know that my family and I care. We're praying for you and everyone as you start to rebuild and for all those who've lost loved ones.
    This may sound harsh, but prayers aren't very useful to us right now. It's like paying your landlord by giving them your love. If you gain some peace of mind for yourself though, then by all means carry on for your sake.

    Quote Originally Posted by Chroniclemaster1 View Post
    If there's anything I can do, PM me. And take care; we're so glad that it sounds like you and yours are doing all right.
    If you do want to help in some way, the best thing that can be done is to donate to the Red Cross appeal. They do not take administrative costs from donations towards the earthquake appeal. Every last donated dollar goes directly to funding the rescue and recovery of people from the damaged buildings, and towards helping the residents who are affected by this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't think they would be, but that at least is something productive I can do. Thanks.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •