Search jQuery

jQuery Forum

refresh page accordion

in Using jQuery UI • 5 months ago

Hi every body
i have still a problem with my jquery accordion i would like to refresh my page each time that i click to open one div in my accordion. i texedt with this code , but don't work.
i don't know very well about jQuery ui.
well i testied with some code to gave some body in this forum.

$(function(){
$( ".accordion" ).accordion({ fillSpace: true });
$(".accordion").accordion({ header: "h3" , active: 4});

$('a[href*=#]').click(function() {
$( "body" ).accordion( "refresh" );
});

<body>

<div class="accordion">

<h3><a href="#menu1">menu1</a></h3>
<div><iframe src="index1.html"></iframe></div>
<h3><a href="#menu2">menu2</a></h3>
<div><iframe src="index2.html"></iframe></div>
<h3><a href="#menu3">menu3</a></h3>
<div><iframe src="index3.html"></iframe></div>

</div>

please help me

Replies(7)

jakecigar

Re: refresh page accordion

5 months ago

I see active:4 but you only have 3 (0-2) divs.

$( ".accordion" ).accordion({
header: "h3" ,
active: 2
});

Refreshing the page is the probably wrong thing to do. Do you want to refresh the iframe?

JΛ̊KE

jakecigar

Re: refresh page accordion

5 months ago

Here’s a working demo with iframes that load/refresh when displayed.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>accordion-iframe</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$( ".accordion" ).accordion({
header: "h3" ,
active: false,
beforeActivate: function( event, ui ) {
var iframe=ui.newPanel.find('iframe')[0]
iframe.src=$(iframe).data('src')
}
}).accordion( "option", "active", 1 );
})
</script>
<style type="text/css">
.accordian>div {height:300px}
</style>
</head>
<body>
<div class="accordion">
<h3><a href="#menu1">menu1</a></h3>
<div><iframe data-src="index1.html"></iframe></div>
<h3><a href="#menu2">menu2</a></h3>
<div><iframe data-src="index2.html"></iframe></div>
<h3><a href="#menu3">menu3</a></h3>
<div><iframe data-src="index3.html"></iframe></div>
</div>
</body>
</html>

JΛ̊KE

webernest

Re: refresh page accordion

5 months ago

Hi JAKE Thank you very much for your answer. I tested your code. and i understand that i need to refresh the iframe. and your code work. but the path for the iframe is not found. i will try to explain better that i need.
when i use your code the iframe is reloaded like i need but the iframe is redirect to one undefined page.
coz the iframe are into other file.

code html

<body>
<div class="accordion">
<h3><a href="#menu1">menu1</a></h3>
<div><iframe data-src="menu1/index1.html"></iframe></div>
<h3><a href="#menu2">menu2</a></h3>
<div><iframe data-src="menu2/index2.html"></iframe></div>
<h3><a href="#menu3">menu3</a></h3>
<div><iframe data-src="menu3/index3.html"></iframe></div>
</div>
</body>

and when i put your code the iframe reload one page in undefined page sorry for don't write correctly the code in my first question.
I think that is in this part of your code that i need to declare the file where is find the page of iframe

iframe.src=$(iframe).data('src') = your code

iframe.src=$(iframe).data('file/src') my question but don't work

what i can do thank you again

jakecigar