Jump to content

has anyone ever experienced an ajax load causing a jquery accordion failure, but not a real refresh?


Q695
Go to solution Solved by Q695,

Recommended Posts

How do you solve an error where a soft refresh of data causes an accordion to fail, but on a hard refresh it works just fine?

example:

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
    console.log('ran');
});
Edited by Q695
Link to comment
Share on other sites

What exactly is a "soft refresh" in your mind?  If it stops working after an ajax load are you sure there isn't a javascript error in the console after the ajax?

soft refresh (ajax call) is like a soft start on a computer (software reset)

hard refresh (f5) is like a hard refresh on a computer (shut down, and power on again)

 

The error is the accordion breaks, so it's an id10t error, not a syntax error.

Edited by Q695
Link to comment
Share on other sites

I use this for my ajax ATM:

function swapContent(href, url_data, target) {
$.ajax({
type: 'GET',
cache: false,
url: href+'?' + url_data, //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data
success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request
//load more data to "target" value div
target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below
}
})
}
Link to comment
Share on other sites

It responds with the proper html, which I knew from part 1 it was the proper from going down this path.  I know narrowed it down to the accordion call of:
 

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
    console.log('ran');
});
Link to comment
Share on other sites

How have you narrowed it to that? There's nothing wrong with that snippet. And if it's working before your AJAX call, one would think the problem is with whatever the AJAX call is doing. Are you modifying HTML that the accordion depends on or conflicts with?

Link to comment
Share on other sites

Here's the example of what I have for compliant code:
 

<div id="accordion">
    <h3></h3>
    <div>
    </div>

    <h3></h3>
    <div>
    </div>

    <h3></h3>
    <div>
    </div>

    <h3></h3>
    <div>
    </div>

    <h3></h3>
    <div>
    </div>
</div>
Link to comment
Share on other sites

this is my jquery imports:
 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Link to comment
Share on other sites

  • Solution

Yes, it works until I run swapContent().

 

No, just a single run, not whenever found on the page through soft refresh.

 

I solved it temporarily with a hard refresh just for that page.

 

I'm asking why it only triggers once on the page in the jquery forum: https://forum.jquery.com/topic/errors-between-ajax-and-accordian

 

It could be a bigger problem than just accordion.

Edited by Q695
Link to comment
Share on other sites

If it works until you run swapContent(), then the problem is with whatever swapContent() is doing. You are boogering the HTML up that accordion wants, or something like this. Or, your script is encountering an error. Again, are you seeing errors in the developer console?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.