1) in your main page change this:
$(document).ready(function() {
$("#accordion").accordion();
});
to this:
doAccordion = function() { $("#accordion").accordion(); });
2) make html code in your test.cfm standards-compliant (add doctype,
html, head, body, etc tags) and then add this as the last line before
the closing </body> tag:
<cfset ajaxonload('doAccordion')>
Azadi
On 13/04/2011 11:09 , Steve Sequenzia wrote:
> Thanks guys. Any idea how to make this jquery work in cflayout?
>
> <!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=utf-8" />
> <title>MAMBA - Martial Arts Management& Business Automation</title>
> <link href="style.css" rel="stylesheet" type="text/css" />
>
> <link
> href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css";
> rel="stylesheet" type="text/css"/>
> <script
> src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js";></script>
> <script
> src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js";></script>
>
> <script>
> $(document).ready(function() {
> $("#accordion").accordion();
> });
> </script>
>
> </head>
>
> <body>
>
> <cfajaximport tags="cflayout-accordion, cfdiv, cfpod, cfinput-autosuggest,
> cfwindow, cfform, cfgrid, cflayout-border, cftree, cfinput-datefield">
>
> <cflayout type="border" fittowindow="yes">
>
> <cflayoutarea name="top" position="top" style="background:##414144;
> height:90px;" source="top.cfm"></cflayoutarea>
> <cflayoutarea name="left" position="left" style="width:200px;"
> splitter="false" collapsible="false" source="test.cfm"></cflayoutarea>
> <cflayoutarea name="main" position="center" style="background:##E8E8E8;
> height:100%;" source="main.cfm"></cflayoutarea>
>
> </cflayout>
>
>
> </body>
> </html>
>
>
> Test.cfm
>
> <div id="accordion">
> <h3><a href="#">Section 1</a></h3>
> <div>
> <p>
> </p>
> </div>
> <h3><a href="#">Section 2</a></h3>
> <div>
> <p>
>
> </p>
> </div>
> <h3><a href="#">Section 3</a></h3>
> <div>
> <p>
>
> </p>
> <ul>
> <li>List item one</li>
> <li>List item two</li>
> <li>List item three</li>
> </ul>
> </div>
>
> </div>
>
>
>
>
>
>> Steve
>>
>> <cfajaximport scriptsrc="..."> is only for cf's built-in scripts - you
>> do not use it to load anything else. and you only need to use it if you
>> do not have access to default cf's scripts folder or if you have moved
>> the default cf scripts to another folder.
>>
>> to load jquery or any other js scripts, you just use your regular
>> <script> tags in the<head> section of your page.
>>
>> specifically for dealing with scripts in pages loaded into cf's ajax
>> containers i found this approach working best:
>>
>> - include your js library (jquery) in the main page (the one that has
>> cflayout tags in you case)
>> - include any js code that needs to run after pages have been loaded
>> into ajax containers as separate js functions in the main page's<head>
>> section as well.
>> - in the pages loaded inside ajax containers add<cfset
>> ajaxonload('name-of-your-js-function-to-execute-here')> as the last line
>> before the closing</body> tag: this will run the specified js function
>> after the page has been loaded inside the container
>>
>> Azadi
>>
>> On 11/04/2011 22:31 , Steve Sequenzia wrote:
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:343692
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
