Solved

AJAX Toggle expand content in div

Posted on 2008-10-29
12
4,295 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
  • 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now