CODEWITHSUNDEEP
javascriptjqueryusinginnerhtml
Hungry
Hungry

Reputation: 45

Jquery not works for javascript innerHtml

Please have a look on code written below. I am trying to have a multiple timer on one page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />

    <style type="text/css">
    #defaultCountdown { width: 240px; height: 40px; }
    </style>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
      <script type="text/javascript" src="jquery.countdown.js"></script>
      <script language="javascript" type="text/javascript"> 

      function LoadText()
      {  
      document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';  
      } 
         </script> 

    </head>
    <body>
    <div id="dd">
    </div>


     <script type="text/javascript">
          // Initialization 
      $(document).ready(function()
      {  

           var date = new Date();       
           $('div.#defaultCountdown').each(function()
            {             

               $(this).countdown
               ({
               until:parseInt($(this).attr("rel"),10),
               format:"DHMS",          
               expiryText:"Expired"
                })
            })   
        });      

         </script>
    </body>
    </html>

My code works fine when I create Divs Hardcoded. But when I load it through Ajax (For understanding of code, for the time being I am creating Divs using Function LoadText()), I am not able to get it displayed. Please help me out.

Upvotes: -1

Views: 1996

Answers (6)

Mottie
Mottie

Reputation: 86413

You should be using a class or unique IDs for the #defaultCountdown div.

Also this would confuse the selector engine since you are telling it to look for a class with a # sign in it:

$('div.#defaultCountdown').each(function()

Try changing it to a class and use:

$('div.defaultCountdown').each(function()

Update: Ok, the reason why your code isn't working is because the LoadText() function is never called. If you update your script to look like this, it will work (demo):

$(document).ready(function() {

    // This is needed to simulate the ajax call
    LoadText();

    // set up countdown timers
    var date = new Date();
    $('div.countdown').each(function() {
        $(this).countdown({
            until: parseInt($(this).attr("rel"), 10),
            format: "DHMS",
            expiryText: "Expired"
        });
    });
});

Upvotes: 0

Hungry
Hungry

Reputation: 45

The working Code if I am not using Ajax Response Text or JavaScript innerHTML. Any solution in this direction will be appriciated. Please find below the modified code that is working. In this code I have created the divs hardcoded. Both the codes can be tested by copying this codes and saving it to html file.

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>

<script type="text/javascript" src="jquery-1.3.2.js"></script>
  <script type="text/javascript" src="jquery.countdown.js"></script>
  <script language="javascript" type="text/javascript">  

  **//function LoadText()
//  {
//  document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
//  }**

  // Initialization 
  $(document).ready(function()
  {  
       var date = new Date();       
       $('div.countdown').each(function()
        {             

           $(this).countdown
           ({
           until:parseInt($(this).attr("rel"),10),
           format:"DHMS",          
           expiryText:"Expired"
            })
        })   
    });      

     </script> 
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>

Upvotes: -1

JAAulde
JAAulde

Reputation: 19560

  1. I don't see you calling your LoadText function anywhere
  2. ID's are required to be unique within a document, and your LoadText function does not respect that rule
  3. Unrelated, but you don't need to escape those double quotes inside of your single quoted string in LoadText

Upvotes: 2

Mike Thomsen
Mike Thomsen

Reputation: 37506

For one, you have this:

div.#defaultCountdown

which should be:

div#defaultCountdown

Upvotes: 2

Steve Claridge
Steve Claridge

Reputation: 11080

Your $('div.#defaultCountdown').each(function() loop runs once when the document is ready - if you subsequently add new divs using Ajax then you need to make sure you re-run your $('div.#defaultCountdown').each(function() code again now that new divs have been added.

The jQuery live() function is good for this.

Upvotes: 0

madmik3
madmik3

Reputation: 6973

sounds like a timing issue. your jQuery code runs when the data is rendered to the page not after your ajax query completes. Make that a function rather than something to run on ready and call it after the ajax finishes.

Upvotes: 0

Related Questions