michelleisconfused michelleisconfused - 5 months ago 38
jQuery Question

jump to anchor + execute ajax + open jquery-ui accordion tab in one function

I'm trying to make it so when the user clicks the hyperlink below it (1) anchors to #suggestions, (2) hits the url suggestions.php?appid=70&commentid=25961 and nothing more (arbitrary numbers used for this example -- this is not important), then (3) opens the jquery-ui accordion #suggestions.

I'm not sure why but when I click the URL the ajax function is not being executed nor is the accordion #suggestions opening. I tried adding an alert("foobar"); at the end of the function, but nothing happens and there must be a syntax error somewhere.

Edit: I checked the syntax and the warnings are:

Expected '"' and instead saw '''.
type: 'GET',
5.6Expected '"' and instead saw '''.
url: 'forumsetcomment.php',
9.35Unexpected trailing space.
window.location = "#suggestions"
18.9Expected '/'.
</script>


html:

<a href="#suggestions" class="readmore">Read More</a>


javascript:

<script>
$(document).ready(function(){
$(".readmore").click(function(event){
event.preventDefault();
$.ajax({
type: 'GET',
url: 'forumsetcomment.php',
data: {appid:70, commentid:25961},
complete: function(data){
refreshMyForum();
window.location = "#suggestions"
$( "#suggestions" ).accordion({
heightStyle: "content",
collapsible: true,
active: false
});
}
});
});
});
</script>

Answer

Wrap your jQuery code in a $(document).ready(function(){/* Your jQuery Code Here*/});

Here is a Plunker

To fix the last issue with the jQuery UI Accordion not opening.

Try this:

$( "#suggestions" ).accordion({
    heightStyle: "content",
    collapsible: true,
});