Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1262
  • Last Modified:

jQuery dynmically loading accordion into an ajax div

Hi

So i have an jQuery that works fine when it is within a static HTML page but I need to have the accordion loading into a div via ajax how do i  adapt the code bellow to achieve this.

Note in the test i'm using a button to bring in the accordion via a perl script in reality i use another event to submit a query./

HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      	<link rel="stylesheet" href="jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery.ui.all.css">
    	<script src="jquery-ui-1.9.2.custom/development-bundle/jquery-1.8.3.js"></script>
    	<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.core.js"></script>
    	<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.widget.js"></script>
    	<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.accordion.js"></script>
    	<link rel="stylesheet" href="jquery-ui-1.9.2.custom/development-bundle/demos/demos.css">
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
	<script>                                             
	$(function() {
  $("#button").click(function(){
    alert ("Nng");
    $("#test").load('cgi-bin/ac.pl');
  });
	  $( "#accordion" ).accordion({
	    collapsible: true, 
            active : false, 
	    change: function (e, ui) {
	      $url = $(ui.newHeader[0]).children('a').attr('href');
	      $.get($url, function (data) {
                 console.log(data);
	         $(ui.newHeader[0]).next().html(data);
              });
            }
	  });
	});
	</script> 
                                            
    </head>
    <body>
     <div id="container">
     <input type="button" value = "Get Accodion" id="button">  

    
     <div id="test">
     </div>
    </div>
    
    </body>
    
    </html>
        
                                                

Open in new window


perl script  ac.pl

#!C:/Perl64/bin/perl.exe


print "Content-type:text/html\n\n";

print qq(      <div id="accordion">
            <h3><a id="1" href="index.html" >A html page</a></h2>
                 <div id="d1"></div> 
            <h3><a id="2" href="cgi-bin/env.pl" >A perl script</a></h2>
                 <div id="d2"></div>
      </div>);

Open in new window

0
trevor1940
Asked:
trevor1940
  • 2
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Try this :
<script>                                             
	$(function() {
		$("#button").click(function(){
			alert ("Nng1");
			$("#test").load('cgi-bin/ac.pl', function() {
				alert ("Nng2");
				$( "#accordion" ).accordion({
					collapsible: true, 
					active : false, 
					change: function (e, ui) {
						$url = $(ui.newHeader[0]).children('a').attr('href');
						$.get($url, function (data) {
							console.log(data);
							$(ui.newHeader[0]).next().html(data);
						});
					}
				});
			});
		});
	});
</script> 

Open in new window

0
 
trevor1940Author Commented:
Thanx leakim971 that worked a treat you win the points!

can you tell me what the  difference is between your .load & .ajax like

$.ajax({type:"get",url:"cgi-bin/ac.pl",success: function(data){
 // do accordion
});

Open in new window

0
 
leakim971PluritechnicianCommented:
http://api.jquery.com/load/
http://api.jquery.com/get/
http://api.jquery.com/post/
http://api.jquery.com/getJSON/

are shorcuts of :

http://api.jquery.com/ajax/

$("#putTheContentHere").load("whichPage.ext", { "ImHereSoItWillUsePOST": "1234" }, mycallback);

Open in new window

same as :
$.ajax({ type:"POST", url:"whichPage.ext", data:{ "ImHereToo": "1234" }, success:mycallback});
var mycallback = function(data) { $("#putTheContentHere").html(data); } 

Open in new window

0
 
trevor1940Author Commented:
sweet Thanx for the  info
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now