Convert AJAX PHP code to Wordpress WordPress
- SOLVED
I have the following code working in a PHP prototype and now I'm in the process of converting this code to Wordpress... Haven't used AJAX in Wordpress before (and really haven't used much AJAX, in general)... Your help would be greatly appreciated...
<script type="text/javascript">
/* ------ Setup Tab Functionality ------ **/
// Setup First Tab
jQuery('#tabs ul li a:first').addClass('active');
// Click
jQuery('#tabs ul li a').click(function(event){
// Load Content
event.preventDefault();
var a_href = jQuery(this).attr('href');
jQuery.ajax({
url: a_href,
dataType: 'text',
success: function(data){
jQuery('#whitepapersshow').fadeTo(300, 0.05, function($){
$(this).load(a_href, function(){
$(this).cycle({
fx: 'scrollHorz',
easing: 'easeOutQuad',
speed: 800,
timeout: 8000,
pause: 1,
next: '#nextPapers',
prev: '#prevPapers',
slideResize: false,
}).fadeTo(900, 1.0);
$(".tabpopup").fadeOut(0);
// Global Process
$(".mediumgraybutton").mouseenter(function(){
$("#po"+this.id).fadeIn(400);
});
$(".tabpopup").mouseleave(function(){
$(this).fadeOut(600);
});
});
});
}
});
// Update Nav Status
jQuery('#tabs ul li a').removeClass('active');
jQuery(this).addClass('active');
});
</script>
Thanks.
Answers (2)
Christianto answers:
Hi Michael,
What type of content that you need to retrieve?
Is it page hierarchy (parent/child), all posts on certain category (parent/child), or Custom Post type?
Depend on what content you need to retrieve by ajax,
best practice of ajax in wordpress is wrap it inside 2 hook (for login and non-login user) and with "my_action" passing as action data:
for example on functions.php:
add_action('wp_ajax_my_action', 'your_callback_to_return_content');
add_action('wp_ajax_nopriv_my_action', 'your_callback_to_return_content');
and set up some function to return data, for example custom HTML:
[[LINK href="http://pastebin.com/m7aVjW5u"]]http://pastebin.com/m7aVjW5u[[/LINK]]
Or running wp_query, based on submitted category data, for example:
[[LINK href="http://pastebin.com/Lkj0cfvR"]]http://pastebin.com/Lkj0cfvR[[/LINK]]
as you can see, at the bottom of above code, we include custom-script.js, and define ajaxurl to process the ajax request
// enqueue our ajax script and passing ajaxurl value
function my_ajax_load_scripts() {
// get our custom-script.js
wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/custom-script.js');
// globalize admin-ajax.php url for ajax processing page
wp_localize_script('my-custom-script', 'my_wp', array(
'ajaxurl' => admin_url('admin-ajax.php')
)
);
}
add_action('wp_enqueue_scripts', 'my_ajax_load_scripts');
so we can place our js script on file theme/js/custom-script.js
this is my js code revision for custom HTML version above :
[[LINK href="http://pastebin.com/FkcZkfnm"]]http://pastebin.com/FkcZkfnm[[/LINK]]
the ajax url my_wp.ajaxurl pointing to wordpress admin-ajax.php
while <em>data: { action: 'my_action', data_one = a_href }</em> contain all data we need to use..
Michael Brumm comments:
I think this is looking like the right direction... Wrapping my head around it right now.
To answer your question regarding the content, I'm trying to retrieve a custom post type called "whitepaper"... This "whitepaper" whitepaper has a hierarchical taxonomy...
For instance, in the demo (link below), the navigation (Sales Performance, Customer Loyalty, Leadership & Management, Project Management, Human Resource & Training) represents the parent level taxonomies...
On initial page load, this section would highlight the first parent (Sales Performance) and then load in it's children into the slider... For each child (Sell Solutions & Value, Inside Sales & Referral Selling, etc), it's pulling in the title and a link (from a metabox)...
There is a catch, for users not logged in, the links for the content would point them to another page to gather info and offer up the registration process.
<strong>Demo Link:</strong>
[[LINK href="http://swept.co/_dev/ajax-demo/"]]http://swept.co/_dev/ajax-demo/[[/LINK]]
Looking into files you've pastebinned... Let me know if you have any additional questions regarding the information I've provided.
Thanks.
Michael Brumm comments:
Ideally, I would like to run wp_query for this feature, so this option is closer to what I envisioned:
http://pastebin.com/Lkj0cfvR
Christianto comments:
sorry for the delay,
Is custom post type 'whitepaper' has registered taxonomy also with named 'whitepaper' or something else?
so your example of term:
( Sales Performance, Customer Loyalty, Leadership & Management, Project Management, Human Resource & Training),
contain child that represent each box on the slider?
for example on Sales Performance => SELL SOLUTIONS & VALUE, INSIDE SALES & REFERRAL SELLING, NEGOTIATE etc
Michael Brumm comments:
No worries...
Custom post type:
<strong>whitepaper</strong>
Taxonomy for "whitepaper":
<strong>wpcategories</strong>
<blockquote>so your example of term:
( Sales Performance, Customer Loyalty, Leadership & Management, Project Management, Human Resource & Training),
contain child that represent each box on the slider?
for example on Sales Performance => SELL SOLUTIONS & VALUE, INSIDE SALES & REFERRAL SELLING, NEGOTIATE etc</blockquote>
Yes, that is correct.
Michael Brumm comments:
Here's a screensnap of the "Sales Performance" taxonomy showing parent/child from within the admin... Note: I still have to fill in content for the other sections, that's why they're at zero.