Home/ Questions/Q 9269471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T15:07:50+00:00

Yes, I am new to jquery, and javascript. I have a page that has

  • 0

Yes, I am new to jquery, and javascript. I have a page that has both static html and python generated data that gets written to the page via ajax. I have a jquery slider that works just fine for the static html data that is already in the page, but will not work with the newly updated content. Ive tried placing the jquery slider code in the static html page as well as an external javascript source page. Neither works. Only when I place the jquery slider code in my python script which writes the new data to the page will it work, I really really don’t like what happens when the next set of dynamic data is imported. No clue what I’m doing wrong….

jquery code:

$(document).ready(function(){
  $(".noIbar").click(function(e){
    if (e.ctrlKey)
      {
        $(this).next(".panel").slideToggle("fast");
      }
  });
});

This is a screenshot of the working section of the code. When the user holds control key and clicks on the first (static html) line, it works, but the two second lines which are returned via python script are not working. I have a feeling this has to do with how the jquery is called.

Im calling the ajax script via onload in the body tag:

<body  onload="test();loadcontent();">

here is the ‘loadcontent()’ function:

function loadcontent()
{
$(document).ready(function(){    
$.get('cgi-bin/content.py', function(data) {
    $("#content").append(data);
});
});
}

This is the exact output from the python script:

<div class='noIbar' onclick="highlightLink(this);AddVar('1.2.840.113970.3.33.1.16671800.20120327.1134351')">
  <div class='data'>105630</div>
  <div class='data'>ISO_IR 100</div>
  <div class='data'>20120327</div>
  <div class='data'>135346.000</div>
  <div class='data'>00035MR120014044</div>
  <div class='endcap'>2681</div>
</div>
<div class='panel'>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.8.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.9.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.10.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.11.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.12.jpg"></div>
</div>

<div class='noIbar' onclick="highlightLink(this);AddVar('1.2.840.113970.3.33.1.14883629.20111109.1132327')">
  <div class='data'>121011</div>
  <div class='data'>ISO_IR 100</div>
  <div class='data'>20111109</div>
  <div class='data'>133143.000</div>
  <div class='data'>00035US110137393</div>
  <div class='endcap'>US OB</div>
</div>
<div class='panel'>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.8.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.9.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.10.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.11.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.12.jpg"></div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the fix for your problem :

    $(document).ready(function(){    
    $.get('cgi-bin/content.py', function(data) {
        $("#content").append(data);
        $(".noIbar").click(function(e){
            if (e.ctrlKey)
            {
                $(this).next(".panel").slideToggle("fast");
            }
        });
    });
});

    You had added call back function before the ajax call. After getting response from your python script you are adding content to DOM, new content added will not respond to call back events until and unless you define them again for new elements.

    • 0