Closing an AJAX Element

I’m going to use a series of scripts like the one below to allow visitors to view lists of countries. For example, they can click on buttons labeled “North America,” “Africa,” etc. to see a list of countries associated with each continent.

<head>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
  $("#driver").click(function(event){
      $.get( 
        "/2b/inc/content/db-lists/world/lam.php",
        { name: "Zara" },
        function(data) {
        $('#div-lam7').html(data);
      }
    );
  });			
});
</script>
</head>

<body>
      <input type = "button" id = "driver" value = "Latin America" class="btn" style="width: 100%; margin-top: 5px; background: #3c3; color: #fff; font-weight: 800;" />
      <div id = "div-lam7" style = "background-color:cc0;">
      </div>
</body>

But things could get a little confusing if a visitor winds up with half a dozen lists of countries displayed at once. Can anyone tell me how to modify my script so that users will be able to close a particular “window” or AJAX element?

After Googling for some help, it looks like I need to use one of these:

window.close();

$("#driver").dialog("close");

However, I haven’t been able to make either one work with my script. Most tutorials/examples show them associated with a “success” function, which apparently wasn’t part of the tutorial I got my AJAX script from.

Another question: I discovered that my AJAX function doesn’t work if the file containing the text I want to display is inside a folder that contains a capital letter. I simply fixed it by creating a new folder, with a lower-case name.

But I’m curious - Is AJAX case-sensitive? Otherwise, I have a script in my .htaccess file that nixes capital letters in URL’s, so maybe that’s the culprit.

Thanks.

Hi there, this looks like it’s only part of the script but I’ll give it a shot.

Can anyone tell me how to modify my script so that users will be able to close a particular “window” or AJAX element?

Your AJAX query is putting content into #div-lam7 so to clear it again you can simply do:

$('#div-lam7').html('');

URL’s are case sensitive, it’s up to your server to respond to things correctly, JavaScript doesn’t care what url’s you use. Still, it’s best practice to use lowercase letters only for directories and filenames.

Sorry, I don’t understand how to implement that code.

I tried adding as second script, like this…

$(document).ready(function() {
  $("#na").click(function(event){
      $.get( 
        "/2b/inc/content/db-lists/world/na.php",
        { name: "NA" },
        function(data) {
		 $('#div-na').html('');
      }
    );
  });			
});

And I also tried simply adding it to the original script:

$(document).ready(function() {
  $("#na").click(function(event){
      $.get( 
        "/2b/inc/content/db-lists/world/na.php",
        { name: "NA" },
        function(data) {
                 $('#div-na').html('data');
		 $('#div-na').html('');
      }
    );
  });			
});

I’d just like to set it up so that when a visitor clicks on the button a second time, the AJAX content disappears.

Thanks for the tip about lower case paths. I should probably rename all my folders to lower case.

Ok do that you can fetch if the content of the div is empty, if not clear it.

$(document).ready(function() {
  $("#na").click(function(event) {
    if ($('#div-na').html() == '') {
      $.get( "/2b/inc/content/db-lists/world/na.php", { name: "NA" }, function(data) {
        $('#div-na').html('data');
      });
    }
    else {
      $('#div-na').html('');
    }
  });            
});

I see; thanks.

Actually, that works in that I can now open and close the AJAX element. However, when it’s open, all it displays is the word “data.”

Remove the quotes

$('#div-na').html(data);

Awesome!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.