Question : Change content file onClick without reloading page.

My interface is here: http://brianfalls.com/playground/email_inerface_sandbox/emailTemplate/

The include:
<div id="emailContent">
      <div class="body">
            <cfinclude template="dsp/dsp_emailTemplate_#templateID#.cfm">
      </div>
</div>

The carousel instance:
<div id="featureCarousel" style=" float: left; ">
      <cfloop list="#request.templateist#" index="i" delimiters=",">
            <div class="feature">
                  <a onclick="alert('Change Emial Template...\r\nBut Only When Feature is Selected (At Center)...');"><img src="/playground/email_inerface_sandbox/templates/#i#/preview.png" /></a>
                  <div>
                        <p>
                              <h3>Template #i#</h3>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare egestas arcu eu auctor.</p>
                        </p>
                  </div>
            </div>
      </cfloop>
</div>

I am not sure where to go with it. How do I change the template without reloading? Further, how do I keep the click event to the primary feature only? I know, I will likely not be able to use cfinclude. It's just what I am using now. What do I use? I don't really want to use frames... I would like to keep it all as is, and just swap the included code for other included code. TIA!

Answer : Change content file onClick without reloading page.

WoW! there is alot of stuff going on here.. I can give you a sample and tell you how to do it, but you will have to deal with applying it because it is not going to be easy. first post is the jquery function (you can see where it needs to go on your page):

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:

           
           
              $(document).ready(function() {
            
			$(".div_class").click(function(){
				template_number = $(this).attr('id');
				//needs to return http://brianfalls.com/playground/email_inerface_sandbox/templates/00009/template_00009_03.png
				$.post("page_that_could_get_the_template_image.cfm", { 'template_number': ""+template_number+"" },
  					function(data){
     					$("#content_to_replace").html(data);
   				});							   
			});
			
            $("#featureCarousel").featureCarousel({
                carouselSpeed: 500,
                animationEasing: 'jswing',
                sidePadding: 7,
                topPadding: 21
            });
            
            var icons = {
                header: "ui-icon-circle-arrow-e",
                headerSelected: "ui-icon-circle-arrow-s"
            };
            
            $("#accordion").accordion({
                icons: icons,
                collapsible: true
            });
            
//            $('#target').click(function() {
//            var txtFile = new XMLHttpRequest();
//            txtFile.open("GET", "http://brianfalls.com/playground/email_inerface_sandbox/emailTemplate/dsp/dsp_emailTemplate_00001.cfm", true);
//            txtFile.onreadystatechange = function() {
//              if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
//                if (txtFile.status === 200) {  // Makes sure it's found the file.
//                 allText = txtFile.responseText;
//                 lines = txtFile.responseText.split("\n"); // Will separate each line into an array
//                }
//              }
//            }
//            txtFile.send(null);
//            alert(txtFile);
//            });
 
        });
    </script>

           
         