当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Open specific panel of a jQuery Accordion that is enqueue via WordPress

问题描述:

What I need to do:

My client needs a jQuery UI Accordion with 4 panels on his wordpress page. The first panel displays a search form, the second panel displays the results of the search form after a search has been carried out, the third panel contains detailed data concerning each search result and the forth panel contains general help/information about the search form.

The search is supposed to be done via an AJAX request.

How I am doing right now:

This is basic html outline (included in wordpress by the means of a page template):

<div class="sws-accordion">

<h2>...</h2>

<div>

<form id="ajax-request" action="javascript:requestForm('x12ldrty','ajax-request');">

...

<input class="button" type="submit" value="Submit" />

</form>

</div>

<h2>...</h2>

<div>...</div>

<h2>...</h2>

<div>...</div>

<h2>...</h2>

<div>...</div>

</div>

Enqueue the necessary javascript files in wordpress:

wp_enqueue_script( 'jquery-ui-accordion' );

wp_enqueue_script( 'initiate-jquery-accordion', ‘...', array('jquery-ui-accordion'));

wp_enqueue_script( 'ajax-script', '...', array('jquery', 'jquery-ui-accordion', 'initiate-jquery-accordion'));

The jQuery Accordion is then called the following way:

jQuery(document).ready(function($) {

$( ".sws-accordion" ).accordion({ ... });

});

The ajax file has the following outline:

var a;

var b;

var c;

var requestObject = opacRequestObject();

function requestObject(){

browser = navigator.appName;

if ( browser == "Microsoft Internet Explorer" )

requestObjectType = new ActiveXObject("Microsoft.XMLHTTP");

else

requestObjectType = new XMLHttpRequest();

return requestObjectType;

}

...

The problem that I am facing:

Everything is working fine, except that I cannot trigger the accordion to open the right panels. I first tried to open the right panels the following way:

jQuery( ".sws-accordion" ).accordion( 'activate' , 1 );

... however I receive the following error message:

Uncaught Error: cannot call methods on accordion prior to

initialization; attempted to call method 'activate'

My second idea was to trigger a click event on the desired accordion panel in order to avoid the error above. I did this the following way:

jQuery(".sws-accordion h2:nth-child(1)").trigger('click');

This method opens a panel however not the panel that it should. Long story short, I feel like I am doing something wrong but somehow the solution won’t come to my mind. Any ideas how to address the issue?

分享给朋友:
您可能感兴趣的文章:
随机阅读: