How to resize jQuery accordion once content is loaded?
Question
I've got a jQuery UI accordion which will eventually contain several forms. To keep my HTML file from becoming insanely unreadable, I want to toss each form into a separate file and load them. From another Stack Overflow question/answer I got this, which works well:
...
<head>
...
<script>
$(function(){
$("#form1").load("form1.html");
$("#form2").load("form2.html");
$("#form3").load("form3.html");
});
</script>
...
</head>
<body>
...
<div id="accordion">
<h3>Form 1</h3><div id="form1"></div>
<h3>Form 2</h3><div id="form2"></div>
<h3>Form 3</h3><div id="form3"></div>
</div>
...
</body>
Unfortunately, the accordion's size appears to be computed before the various formN.html files are loaded. How do I force it to recompute the accordion's size after those files have been loaded?
1 answers
solution1
1 2014-07-21 15:50:46
You can use refresh method. Since you have 3 separate ajax requests I would do something like:
var f1=$("#form1").load("form1.html");
var f2=$("#form2").load("form2.html");
var f3=$("#form3").load("form3.html");
$.when(f1,f2,f3).then(function(){
/* all forms loaded now we can refresh accordion */
$('#accordion').accordion('refresh');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.