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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    make other javascript event work on innerHTML

    hello, i've touched ajax a few days ago to make a more responsive site. i hope somebody can enligthen me on my dillema.

    PROBLEM : link for modal window doesn't seem to work with the data from the innerHTML. basically i wrote a view_queries.php that when it loads will call
    an ajax function getData() which in turn will get the specified data then return an already made table to replace a certain div in my view_queries.php. all
    data where loaded except when i click a link in the generated table, the javascript/thickbox_compressed.js doesn't work at all or is not recognized.

    WHAT I DID SO FAR : before posting here, i have read that it's impossible, i hope this is not the final answer, because innerHTML excludes? other javascript/events
    and sites suggest that use the old DOM style of replacing the div, the problem is since the table was already generated the data is already within the table.

    SOURCE CODE:
    view_queries.php
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/style.css" />
    <link rel="stylesheet" type="text/css"  href="css/thickbox.css" />
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/thickbox-compressed.js"></script>
    <title>SITE TITLE</title>
    </head>
    <body onload="getData('<?php echo $user;?>');">
    <div class="page-container" style="width:650px;">
    	<div class="header" style="width:650px;">
    		<div class="header-top" style="width:650px;">
    			<div class="sitelogo" style="width:650px;"></div>
    		</div>
    	</div>
    	<div class="main" style="width:650px;">
            <center>
            <div id="innerTable" style="text-align:center;"></div>
            </center>
    	</div>
    	<div class="footer" style="width:650px;">&nbsp;</div>      
    </div>
    
    </body>
    </html>
    ajax.js
    Code:
    http = getHTTPObject();
     
    function getHTTPObject(){
      var xmlhttp;
      if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
        try {
          xmlhttp = new XMLHttpRequest();
        }
        catch(e){
          xmlhttp = false;
        }
      }
      return xmlhttp;
    }
    function getData (cUser) {
      iHTML = "<img src='images/ajax-loader2.gif' />";
      document.getElementById('innerTable').innerHTML = iHTML;
      var date = new Date();
      var timestamp = date.getTime(); 
      var url = "getData.php?user=" + cUser + "&&stamp=" + timestamp;
      http.open("GET", url, true);
      http.onreadystatechange = getDataCallback;
      http.send(null);
    }
    function getDataCallback() {
      if (http.readyState == 4) {
        var table = unescape(http.responseText);
        table = table.replace( /\+/g,' ');
        document.getElementById('innerTable').innerHTML = table;
      }
    }
    getData.php
    Code:
    <?php
        include("../support_files/dbConfig.php");
        include("../support_files/MySQLManager.class.php");
        $db =& new goMySQL(DB_HOST,DB_USER,DB_PASS,DB_NAME);	
        $innerTable = "<center>
        <table class=\"tablesorter\" cellspacing=\"1\" cellpadding=\"0\" border=\"0\" style=\"width:550px;\">
            <thead>
                <th colspan=\"5\">Hi $user, here's the list of query issue(s).</th>
            </thead>
            <thead>
                <th style=\"padding:0;text-align:center;width:100px;\">FIELD 1</th>
                <th style=\"padding:0;text-align:center;width:75px;\">FIELD 2</th>
                <th style=\"padding:0;text-align:center;width:75px;\">FIELD 3</th>
                <th style=\"padding:0;text-align:center;width:250px;\">FIELD 4</th>
                <th style=\"padding:0;text-align:center;width:50px;\">DETAILS</th>
            </thead>
            <tbody>
        ";
        $SQL_QUERY = "SELECT `field1`,`field2`,`field3`,`field4`,`id` FROM `database`.`table` WHERE `field5`='4Query';";
        $result = $db->query($SQL_QUERY ) OR $db->raiseError("unable to process request for data. please try again later.");
        if ($db->num_rows($result)>0)
        {
            while ($rows = $db->fetch_assoc($result))
            {
                $field1 = $rows['field1'];
                $field2 = $rows['field2'];
                $field3 = $rows['field3'];
                $field4 = URLENCODE($rows['field4']);
                $id = $rows['id'];
                $hash_id = SHA1($id);
                $innerTable .= "<tr>
                    <td style=\"text-align:center;\">$field1&nbsp;</td>
                    <td style=\"text-align:center;\">$field2&nbsp;</td>
                    <td style=\"text-align:center;\">$field3&nbsp;</td>
                    <td style=\"text-align:left;\">$field4&nbsp;</td>
                    <td style=\"text-align:center;\"><a href=\"detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a></td>
                </tr>";
                USLEEP(10);
            }
        }
        $innerTable .="
            </tbody>
        </table></center>";
        $db->close();
        echo $innerTable;
    this is the problem
    Code:
    <a href=\"detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>
    this doesn't work or recognize any event thus it cannot create a modal window but rather redirects to the target page like a usual link.

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    Los Angeles
    Posts
    545
    Thanks
    81
    Thanked 5 Times in 5 Posts
    What browser are you using?

    Have you tried to reproduce this on other browsers to see if you get the same results?
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have deployed it on IE 7 since that's what most of my users use but i also test it on firefox and it still not working. i have read from a site on how to solve this problem but apparently i cannot understand what he is instructing to do maybe because of my experience with ajax is so little.

    here's the link where i read about innerHTML : http://www.skriptfoundry.com/wordpress/?p=11

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I'll assume that this problem is not more of an AJAX problem (with innerHTML), but instead a problem on your thickbox.

    This part of your code were parsed correctly:
    PHP Code:
    <a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a> 
    ...and you said, that:
    Quote Originally Posted by RamaJin
    this doesn't work or recognize any event thus it cannot create a modal window but rather redirects to the target page like a usual link.
    ...which means that code were relayed correctly, but the thickbox is not functioning correctly.

    With that said, please provide a link to your page, and a link to the page where you got your thickbox.

    Hope that makes sense.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi rangana,

    here's the link where i got the thickbox : http://jquery.com/demo/thickbox/

    now regarding the site i think that won't be possible because the one i work on belongs only on the company's network so access from outside is impossible.

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Okay, what are you wanting to open on the thickbox?
    PHP Code:
    <a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a> 
    Is it an image? Could you please let us know the parsed markup on the above-pointed part of your PHP.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi rangana,

    here's a screenshot of what i want.

    as you can see, the thickbox works if the link the user clicks is not from a generated link/table thrown by innerHTML. and yes that is a modal window.

    and here's the parsed link :
    Code:
    <a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>
    again thanks for the quick reply.

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Your syntax for iframe content for thickbox seemed incomplete.

    Please refer here:
    http://jquery.com/demo/thickbox/

    You missed to set keepThis and TB_iframe to true when passed.

    You might get some hint on the part of your markup where thickbox works fine (manual link).

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #9
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually i have tried that before and it didn't work, also i'm not using the iFrame content but the Ajax content.

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Could you please try to remove highlighted:
    Code:
    <a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>
    ...just to verify that it has no conflict.

    Also, please try to run this HTML:
    Code:
    <a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>
    ...on your page (place it as a normal markup and not as dynamic link).

    Let us know the results.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #11
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    Could you please try to remove highlighted:
    Code:
    <a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>
    even if only height and width is present it still doesn't work when the link was generated by innerHTML

    Quote Originally Posted by rangana View Post
    Also, please try to run this HTML:
    Code:
    <a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>
    ...on your page (place it as a normal markup and not as dynamic link).

    Let us know the results.
    this works

  • #12
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Thanks, and now, I don't know what else to do than to ask for a link to your page instead.

    Could you by chance setup one? So we could be able to see the issue in action.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #13
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    maybe i'll try to replicate my site and host it somewhere so you can check, i'll try to post the link if i can.

    edit:

    so i tried to replicate my problem, removed unnecessary codes and styles so we can easily pinpoint the problem. site is here : http://ramajin.150m.com/

    as you can see the first link works while the link generated by the inneHTML does not work at all or rather became a simple link.
    Last edited by RamaJin; 02-07-2009 at 07:22 AM.

  • #14
    New Coder
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bumping post

  • #15
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Thanks for the bump

    I'm at school right now, and I need bump sometimes.

    Anyway, thanks for creating a demo for us to see.

    The problem is that your thickbox that is being generated by your innerHTML isn't a part of the DOM (yet) when the page is loaded - so the event handlers are not yet bound.

    With that said, you need to recall the thickbox initialise function within your getData() function.

    The fix is by adding highlighted:
    Code:
    function getData () {
      var table = "<br /><center><table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" style=\"width:450px;font-size:11px;font-family:11px;\">";
      table = table +"<thead><th>FIELD 1</th><th>FIELD 2</th><th>FIELD 3</th><th>FIELD 4</th><th>DETAILS</th></thead>";
      table = table + "<tbody>";
      table = table + "<tr><td>VALUE 1</td><td>VALUE 2</td><td>VALUE 3</td><td>VALUE 4</td><td><a href=\"querywindow.html?height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">link generated by innerHTML</a></td></tr>";
      table = table + "</tbody>";
      table = table + "</table></center>";    
      document.getElementById('innerTable').innerHTML = table;
      tb_init('a.thickbox'); // Initialise again
    }
    tb_init() is the thickbox initialise function which attaches its events to your selected elements.

    For further reading:
    http://docs.jquery.com/Tutorials:AJAX_and_Events
    http://www.djcnet.co.uk/jquery-thick...ted-pages.html

    Also, you might want to create the elements via DOM instead of relying on innerHTML.

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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