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-29 12:50:03Z

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, 2011 at 12:50

answered Apr 29, 2011 at 9:56

András Szepesházi

6,7835 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

eouti Over a year ago

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 ?

András Szepesházi Over a year ago

@eouti: Edited answer to better fit your needs.

eouti Over a year ago

jsbin.com/izuni4/22 is exactly what I need !! \n\n I vote for you dude

eouti Over a year ago

@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.

András Szepesházi Over a year ago

@eouti: lol. Me no Jedi. But check this thread for ajax loading indicator solutions: stackoverflow.com/questions/68485/…

|

Collectives™ on Stack Overflow

jQuery Ajax CGI: load script

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related