Solved

AJAX Toggle expand content in div

Posted on 2008-10-29
12
4,318 Views
Last Modified: 2012-08-14
I'm trying to replicate this effect:

http://www.libraholidays.co.uk/forms/holidays1.asp?Action=Search&dbCode=L07&BrochureType=CY&depCode=LGW&HolidayType=IT%2ASH&FromDay=20&FromMonth=Dec+08&Accommodation=9402&arrCode=PFO&Resort=&Diff=0&NoAdults=2&NoChildren=0&NoInfants=0&Duration=7&Board=HB&SortBy=&PromoCode=

Click on the details and images button under the price, the box is then expanded and the details and images are loaded below.

I realise this is using AJAX, I just need a script where I can use a button to toggle viewing external content from another file.

Can anyone point me in the right direction??

Thanks

Chris
0
Comment
Question by:djfenom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 6

Expert Comment

by:LeeHenry
ID: 22830707
I suggest you check out the YUI library. http://developer.yahoo.com/yui/
Their library is easy to use, has great documentation, and some good examples. Here is an example of how you could apply that effect using YUI. The $('details-button).onclick would capture the onclick event of your button, and in my example I call a aspx page, as that is the server side language I chose to get the detail information. You could replace that with a php file if that is your language of choice. when the result of the query comes back, the success handler function will then receive your info, and you can do what you like with it on the client side. In my example I simply embed the content in the innerHTML of one of the divs in my page. Hope this helps.
$('details-button').onclick = function() {
  
   
    YAHOO.util.Connect.asyncRequest(
            'POST',
            'QuestionMain.aspx?action=getDetailsInfo',
            {
                success: function (o) {
                   
                    var detailsInfo = o.responseText;
                    $('mainContent').innerHTML = detailslsInfo;
                      
                }
            }
   );
   
   }

Open in new window

0
 

Author Comment

by:djfenom
ID: 22833502
I'm already using Jquery, so don't really want to use YUI.

How would I do this with Jquery?
0
 
LVL 6

Expert Comment

by:LeeHenry
ID: 22834273
Jquery - another great library: just as simple: Not tested but this should give you the idea:

Examples:
http://docs.jquery.com/Ajax
http://www.ibm.com/developerworks/library/x-ajaxjquery.html




$('details-button').click(function () { 
                  
    $.post('DetailsIno.aspx', 
 
        success: function (o) {
        var detailsInfo = o.responseText;
        $('mainContent').innerHTML = detailslsInfo;
 
    });
 
});

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:djfenom
ID: 22842120
Thanks for that. This is what I've got:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('detail').click(function () {
    $.post('lettings-detail.asp?id=<%=RS("propID")%>',
        success: function (o) {
        var detailsInfo = o.responseText;
        $('detail<%=RS("propID")%>').innerHTML = detailslsInfo;
    });
});
</script>

<a href="#" class="detail">view details</a>

<div id="detail<%=RS("propID")%>"></div>

Is this right? I'm currently getting an error - Line 13 - expected )

Also how would I do it so that it toggles on and off when the button is pressed?
0
 

Author Comment

by:djfenom
ID: 22893968
Anybody??
0
 
LVL 6

Expert Comment

by:LeeHenry
ID: 22895326
Sorry for the delayed Response - I had to set some fires out at work. Anyway, I am assuming you are doing something with asp when you wrote <%=RS("propID")%>, but I am not sure what you are trying to do there?

However the attached code snipped worked for me. I tested it out and worked fine.
<script type="text/javascript" src="js/jquery.js"></script>
	
<script type="text/javascript">
	   $(document).ready(
		   function(){				
                    $.post("Confirm.aspx?command=GetDetails",{
 
                    },function(txt){
                       
                       var element =  $('detailsInfo');
                       element.innerHTML = txt;
                    });
                  
		
	   });
      
</script>
 
//aspx code
protected void Page_Load(object sender, EventArgs e)
    {
       string command = Request.QueryString["command"];
        if (command == "GetDetails") {
            getDetails();
        }
    }
 
    private void getDetails()
    {
        string html = "<h1>This is the details info</h1>";
        Response.Expires = -1;
        Response.ContentType = "text/plain";
        Response.Write(html);
        Response.End();
    }

Open in new window

0
 

Author Comment

by:djfenom
ID: 22896853
I'm using classic ASP, the part were I refer to lettings-detail.asp?id=<%=RS("propID")%> is just a page that filters the content depending on the record.

I used <div id="detail<%=RS("propID")%>"></div> to get a unique div name each time.

I've tried your code and I'm still getting an error - Line 13 - expected )
0
 
LVL 6

Expert Comment

by:LeeHenry
ID: 22897176
Hmm.. For testing purposes remove the  <%=RS("propID")%> reference to see if that is causing the error.

<div id="detail"></div>

 $(document).ready(
                   var propID = document.getElementsByID('detail');
 
                   function(){                          
                    $.post("lettings-detail.asp?id=" + propID, {
 
                    },function(txt){
                       
                       var element =  $('detailsInfo');
                       element.innerHTML = txt;
                    });
                  
                
           });

Open in new window

0
 

Author Comment

by:djfenom
ID: 22897289
Ok, so now I've got this:

<script type="text/javascript">
 $(document).ready(
         var propID = document.getElementsByID('detail');

         function(){                          
            $.post("lettings-detail.asp?id=" + propID, {

            },function(txt){
               
               var element =  $('detailsInfo');
               element.innerHTML = txt;
            });
        
      
});

</script>

But I'm still getting an error, now on line 10?

The link to expand the text is <a href="#" class="detail">view details</a> and the div is <div id="detailsInfo"></div>, is this right? Where does the ID from the DB get passed?
0
 
LVL 6

Accepted Solution

by:
LeeHenry earned 500 total points
ID: 22897538
The expand text functionality was not included. Let me explain what I did:

// wait till DOM is ready:
$(document).ready(

//Request Details Information from my server side Confirm.aspx page
function(){                          
                    $.post("Confirm.aspx?command=GetDetails",{
 
                    },function(txt){
                       
                       var element =  $('detailsInfo');
                       element.innerHTML = txt;
                    });
           });

//In the above code the "function(txt)" method will capture the results of my server side method call containing the details info

function(txt){
                       
        var element =  $('detailsInfo'); //get reference to my div element where I want to put the results
         element.innerHTML = txt; //assign the text from server side page to my clientside element
});
       
//clientside asp code
<div id="detailsInfo"></div>

If you want to trigger this on a button click, then you will need to modify the above code to add a button click Event Capture after the dom is ready on a button element.  I really don't know why you are getting a syntax error in your javascript, as it worked fine for me on my end. Like I mentioned though, I am not using clasic asp, and am explicitely referencing my html dom elements. If you try to reference aspx dom elements, for instance, you have to be more careful because asp.net  changes the name so that can cause some unforeseen errors. If you want to send me your code i'll take a look at what you did.
0
 

Author Comment

by:djfenom
ID: 22897600
Ok, thanks, this is what I originally had:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('detail').click(function () {
                 
    $.post('lettings-detail.asp?id=<%=RS("propID")%>',
 
        success: function (o) {
        var detailsInfo = o.responseText;
        $('detail<%=RS("propID")%>').innerHTML = detailslsInfo;
 
    });
 
});

</script>

<div id="rightcol">
      <h2>Lettings</h2>
      <p>
        <% if RS.eof then %>
</p>
      <p class="firstpara">Sorry there are no properties available that meet your search criteria.</p>
      <p>Please <a href="javascript:history.back(1)">try again</a></p>
      <% else %>
      <% while not RS.eof %>
      <% if RS("offline") = 0 then %>
      <div class="propbox">
        <% if (RS("image1").Value) = "no-image.jpg" then %>
        <a href="lettings-display.asp?id=<%=RS("propID")%>"><img src="prop-images/thumb.jpg" width="138" height="108" border="0" alt="<%=RS("address")%>" /></a>
        <% else %>
        <a href="lettings-display.asp?id=<%=RS("propID")%>"><img src="prop-images/<%=RS("image1")%>" alt="<%=RS("address")%>" width="138" height="108" border="0" /></a>
        <% end if %>
        <h3><%=RS("address")%></h3>
        <p><%=left (RS("description"),80)%>....</p>
        <ul>
          <li><%=RS("beds")%> Bedroom</li>
          <li><%= FormatCurrency((RS("rent")), 0, -2, -2, -2) %>&nbsp;<%=RS("payTitle")%></li>
          <li class="nopad"><a href="#" class="detail">view details</a></li>
        </ul>
        <div class="cleaner"></div>
            <div id="detail<%=RS("propID")%>"></div>
      </div>
      <% end if %>
      <%  
                  RS.movenext
                  wend
            %>
      <p><a href="lettings.asp"><< search again</a></p>
      <% end if %>
    </div>

My lettings-detail.asp page is as follows:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/maltings.asp" -->
<%
Dim RSresults__MMColParam
RSresults__MMColParam = "1"
If (Request.QueryString("id") <> "") Then
  RSresults__MMColParam = Request.QueryString("id")
End If
%>
<%
Dim RSresults
Dim RSresults_numRows

Set RSresults = Server.CreateObject("ADODB.Recordset")
RSresults.ActiveConnection = MM_maltings_STRING
RSresults.Source = "SELECT * FROM qrylettings WHERE propID = " + Replace(RSresults__MMColParam, "'", "''") + ""
RSresults.CursorType = 0
RSresults.CursorLocation = 2
RSresults.LockType = 1
RSresults.Open()

RSresults_numRows = 0
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Property Sales</title>
<link href="maltings.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
      <h3><%=(RSresults.Fields.Item("address").Value)%></h3>
      <div id="propimg">
        <% if request.querystring("img") = "" then %>
        <p><img src="prop-images/<%=(RSresults.Fields.Item("image1").Value)%>" alt="<%=(RSresults.Fields.Item("address").Value)%>" width="264" /></p>
        <% else %>
        <p><img src="prop-images/<%=(RSresults.Fields.Item("image2").Value)%>" alt="<%=(RSresults.Fields.Item("address").Value)%>" width="264" /></p>
        <% end if %>
      </div>
      <div id="propdetails">
        <p><strong>Area: </strong><%=(RSresults.Fields.Item("regionName").Value)%> | <strong>Beds: </strong><%=(RSresults.Fields.Item("beds").Value)%></p>
        <p><strong>Property Type: </strong><%=(RSresults.Fields.Item("proptype").Value)%></p>
        <p><strong>Price:</strong> <%= FormatCurrency((RSresults.Fields.Item("rent").Value), 0, -2, -2, -2) %>&nbsp;<%=(RSresults.Fields.Item("payTitle").Value)%></p>
        <% if RSresults.Fields.Item("reference").Value <> "" then %>
        <p><strong>Property Reference: </strong>Property <%=(RSresults.Fields.Item("reference").Value)%></p>
        <% end if %>
        <% if RSresults.Fields.Item("image2").Value = "no-image.jpg" then %>
        <% else %>
        <% if request.querystring("img") = "" then %>
        <p><strong>Images:</strong> 1 | <a href="lettings-display.asp?id=<%=(RSresults.Fields.Item("propID").Value)%>&amp;img=<%=(RSresults.Fields.Item("image2").Value)%>" title="View Alternate Image">2</a></p>
        <% else %>
        <p><strong>Images:</strong> <a href="javascript:history.back(-1)" title="View Alternate Image">1</a> | 2</p>
        <% end if %>
        <% end if %>
        <% if request.querystring("img") = "" then %>
        <p><a href="mailto:info@mrc-property.co.uk?subject=MRC Property Request: <%=(RSresults.Fields.Item("address").Value)%>" class="request">Request Info</a> &nbsp;&nbsp;<a href="javascript:window.print()" class="print">Print Page</a></p>
        <% else %>
        <p><a href="mailto:info@mrc-property.co.uk?subject=MRC Property Request: <%=(RSresults.Fields.Item("address").Value)%>" class="request">Request Info</a> &nbsp;&nbsp;<a href="javascript:window.print()" class="print">Print Page</a></p>
        <% end if %>
      </div>
      <p>
        <% Response.Write Replace(RSresults.Fields.Item("description"), vbCrLf, "<br />")%>
      </p>
      <% if request.querystring("img") = "" then %>
      <p><a href="javascript:history.back(-1)"><< Back to Results</a></p>
      <% else %>
      <p><a href="javascript:history.go(-2)"><< Back to Results</a></p>
      <% end if %>
    </div>
</body>
</html>
<%
RSresults.Close()
Set RSresults = Nothing
%>
0
 
LVL 6

Expert Comment

by:LeeHenry
ID: 22897813
woooah.. First time looking at a classic asp page - geez its much different than asp.net he he. I can't even load this in my IDE so I won't be able to help out on that end.

Let me say that I don't believe your javascript is going to work. Reason is you are dynamically generating your id's on your asp page (d=<%=RS("propID")%), which doesn't work the same on the clientside. One think you could try is passing the propID that is clicked to javascript as a parameter.

$('detail').click(function (propID) {  


But this won't work..
    $.post('lettings-detail.asp?id=<%=RS("propID")%>',
    $('detail<%=RS("propID")%>').innerHTML = detailslsInfo;
 


0

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Node.js 11 82
how to use string functions to get particular string 3 52
JS to redirect to prev page 8 47
XJS:  how to throw error if no match found 8 60
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question