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

[Q695]

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

[fastsol]

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?

[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.

[scootstah]

Show us the AJAX call and the server response.

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

[scootstah]

And the server response?

[Q695]

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

[scootstah]

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?

[Q695]

if it's correct, why doesn't it run every time you click the load statement, and has static html in it?

[Q695]

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>

[Q695]

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>

[scootstah]

Are you getting any Javascript errors?

 

If I'm understanding you correctly, the accordion works until you run swapContent(), is that correct?

[Q695]

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.

[scootstah]

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?

[Q695]

swapcontent() is a page content swapper like in frames, which are now dead.