Jump to content

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


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

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

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
}
})
}

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');
});

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?

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>

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>

  • 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

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?

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.