jQuery Ajax CGI: load script

Question

I am trying to load my Perl CGI script's content into the HTML page. .load() does not work. Please tell me what's wrong here:

$(document).ready(function() {
  $('input:checkbox').change(function() {
    var nom = $(this).attr("value");
    if ($(this).is(':checked')) {
      alert('okok');
      $('body').load("../cgi-bin/essai.pl");
    } else {
      //$("#" + nom).remove();
    }
  });

I would like:

When I check the checkbox (which has as value "toto") load (in Ajax) essai.pl?param=toto
When I uncheck this checkbox, remove the content loaded before.

Hope someone has a little time to help me to leave this jQuery nightmare.
Bye.

András Szepesházi · Accepted Answer · 2011-04-29T12:50:03.417

2

You're loading your script's output directly into the body, hence you make all previous body content (including your checkbox(es)) disappear. I assume that is what you experience.

What you should do is have a dedicated block for the script generated content, and use that block as the target of your load function.

HTML:

<body>
<div id="controller">
  <input type="checkbox" name="toto" id="toto"></input> Load / unload content
  </div>
<div id="target">
  Content comes here
  </div>
</body>

JavaScript:

$('input:checkbox').change(function(){
    if ( $(this).is(':checked') ) {
      var target_url = "../cgi-bin/essai.pl?param="+$(this).attr('name');
      $('div#target').load(target_url);
    }
    else {
      $("div#target").html('');
    }
});

I would also refrain from the "../cgi-bin/" type relative path definition and use absolute path instead.

Working example available at http://jsbin.com/izuni4/19

EDIT Seems like I didn't fully grasp what you were trying to achieve. Here is an edited version of the same javascript which appends/removes content blocks triggered by multiple checkboxes. Hope that solves your issue:

http://jsbin.com/izuni4/22/

edited Apr 29 '11 at 12:50

answered Apr 29 '11 at 09:56

András Szepesházi

6,483
5
45
59

Great, that's what I search for. But I have 4 checkbox, when I check the first checkbox, new div load in #target, but nothing append when I check the second one. Is it because load is not like append ? It can't add more, it erase ? – eouti Apr 29 '11 at 12:16
@eouti: Edited answer to better fit your needs. – András Szepesházi Apr 29 '11 at 12:50
http://jsbin.com/izuni4/22/ is exactly what I need !! \n\n I vote for you dude – eouti Apr 29 '11 at 13:14
@András Szepesházi : Are you master in Jquery and JS in general ? Because my script take several seconds to load, I would like to display a loading gif or something like that while it's executing perl code on the server. – eouti Apr 29 '11 at 13:21
@eouti: lol. Me no Jedi. But check this thread for ajax loading indicator solutions: http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery – András Szepesházi Apr 29 '11 at 13:44
@András Szepesházi : Ok thanks. I have a last question. When I load my perl content via ajax, the jquery tooltip plugin does not work on the new ajax content added. How can I apply my plugin to the new ajax content ? – eouti Apr 29 '11 at 13:51

jQuery Ajax CGI: load script

1 Answers1