Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$75
Convert AJAX PHP code to Wordpress

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.

This question has been answered.

Michael Brumm | 02/05/13 at 1:36am Edit
Tutorial: How to assign prize money

Previous versions of this question: 02/07/13 at 7:22pm | 02/07/13 at 7:28pm | 02/07/13 at 7:29pm | 02/13/13 at 4:59pm

(21) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
02/05/13
5:22am

Arnav Joy says:
can you please tell me what are you trying to achieve ?

show me url or any screenshot whatever you prefer.

Post reply
Last edited:
02/06/13
5:22am
Christianto says:
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:
http://pastebin.com/m7aVjW5u

Or running wp_query, based on submitted category data, for example:
http://pastebin.com/Lkj0cfvR

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 :
http://pastebin.com/FkcZkfnm

the ajax url my_wp.ajaxurl pointing to wordpress admin-ajax.php
while data: { action: 'my_action', data_one = a_href } contain all data we need to use..

Post reply

Previous versions of this answer: 02/06/13 at 5:22am
Last edited:
02/05/13
6:22am

Michael Brumm says:
Yeah, I was suffering from lack of sleep when I posted that... Doesn't quite paint the whole picture...

Let me create a demo based on what I'm trying to accomplish, as I can't share the URL right now due to a NDA... Hope to have it up by tomorrow morning, possibly tonight.

Post reply
Last edited:
02/05/13
7:35am

Michael Brumm says:
Here's a demo showing the functionality with a bit more description there:
http://swept.co/_dev/ajax-demo/

I'm having a hard time wrapping my head around the ajax call to pull in and display the data from wordpress... determine the number of children, then for each child, create a loop and build the content for the slideshow...

This demo is hard-coded and just pulling in external php files with the content ready to be displayed.

Post reply
Last edited:
02/07/13
1:21am

Michael Brumm says:
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.

Demo Link:
http://swept.co/_dev/ajax-demo/

Looking into files you've pastebinned... Let me know if you have any additional questions regarding the information I've provided.

Thanks.

Post reply
Last edited:
02/07/13
1:26am

Michael Brumm says:
Ideally, I would like to run wp_query for this feature, so this option is closer to what I envisioned:
http://pastebin.com/Lkj0cfvR

Post reply
Last edited:
02/07/13
5:49pm

Christianto says:
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

Post reply
Last edited:
02/07/13
6:03pm

Michael Brumm says:
No worries...

Custom post type:
whitepaper

Taxonomy for "whitepaper":
wpcategories

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

Yes, that is correct.

Post reply
Last edited:
02/07/13
6:08pm

Michael Brumm says:
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.

Post reply
Last edited:
02/07/13
7:20pm
Michael Brumm says:
I'm having some issues implementing the above...
The bolded text in the code below is causing an error, what should that that be? Thanks.
```
data: { action: 'my_action', data_one = a_href }, // action data should match hook for example 'my_action' match with 'wp_ajax_my_action' and 'wp_ajax_nopriv_my_action'
```
Post reply
Last edited:
02/07/13
7:25pm

Christianto says:
Please try this code,

on functions.php
http://pastebin.com/rkkeMjhf

you need to edit $register_url inside function my_nonlogin_wpcategories() for non login user to point to your register page.

and our custom-script.js (placed on directory /yourtheme/js/custom-script.js)
http://pastebin.com/FkcZkfnm

Because this questions will expire within few hour, could you please extend this question by a day, so I could answer on this question and help you with this.
Let me know if its not working.

I will sleep for few hours since its 2.23 AM here :)

Thanks

Post reply
Last edited:
02/07/13
7:31pm
Christianto says:
yup, that is error need to use ':' instead of '=' inside the object..
I've fixed it on
http://pastebin.com/FkcZkfnm

I forgot something,
you need to use your term slug for each link that retrieved when user click
```
jQuery('#tabs ul li a').click(function(event){

        event.preventDefault();

        // Load Content

        var myterm = jQuery(this).attr('href');
```
For each link on #tabs ul li a.

Post reply
Last edited:
02/07/13
7:32pm

Michael Brumm says:
I extended the question by 1 day via the link provided ... Will give this a shot and see if I can get it working... Get some sleep.

Post reply
Last edited:
02/07/13
9:05pm

Michael Brumm says:
Still no luck... I can explain more when you're awake... Thanks.

Post reply

Last edited:
02/08/13
6:53am

Christianto says:

Ok, I run it on my local installation,

I forgot couple thing like $wpdb and etc..
this should be work
http://pastebin.com/rkkeMjhf

On custom-script.js
http://pastebin.com/FkcZkfnm

the link format on your tabs menu look like this:



   <div id="tabs">

       <ul>

         <li><a href="#term_one">Sales Performance</a></li>

	 <li><a href="#term_two">Customer Loyalty</a></li>

	 <li><a href="#term_three">Leadership &amp; Management</a></li>

	 <li><a href="#term_four">Project Management</a></li>

	 <li><a href="#term_five">Human Resource &amp; Training</a></li>

       </ul>

    </div>

where term_one, term_two etc is your parent term slug (with hash added)..

Please try it, Thanks

Post reply

Last edited:
02/09/13
11:57am

Michael Brumm says:
Thanks for the reply... I have to head out of town this weekend and won't be able to try this code out until Monday evening... Looking forward to trying it out... Thanks.

Post reply
Last edited:
02/12/13
6:39pm

Michael Brumm says:
It appears to be working... I need to fill in content to make sure all's good...

How do I call the first tab when the page loads? Right now, when I load the page, the first tab is selected, but the content is empty?

Post reply
Last edited:
02/13/13
11:28am
Christianto says:
Hi Michael,

You can call the first tab with
```
jQuery('#tabs ul li a:first').click();
```
right after we set click event for each tab on this code,

Or in different event for example when page finished to load
```
jQuery(window).load(function(){

    jQuery('#tabs ul li a:first').click();

});
```
Hope this help

Post reply
Last edited:
02/13/13
4:58pm

Michael Brumm says:
This was a huge help... Thank you for all of your assistance! Really do appreciate it.

Post reply
Last edited:
02/13/13
10:09pm
Michael Brumm says:
Hello,

I received content from the client and began the process of filling it in... Upon doing so, I noticed a problem... The content is not resetting for each child after completing each div within the slide(s)...

Div 1 = 1
Div 2 = 1 + 2
Div 3 = 1 + 2 + 3
Div 4 = 1 + 2 + 3 + 4

I've attached an image to show the issue I'm running into...

It appears the following code is not resetting the content:
```
$tabpopup = $slidebase = '';
```
Any insight into this issue would be greatly appreciated.

Thanks,
Mike

Post reply
Last edited:
02/13/13
11:02pm
Michael Brumm says:
```
$tabpopup = $slidebase = '';
```
That code is actually working just fine.

Looks like each new query is calling the former child(ren) along with the present child into the loop each time it cycles through... hmmm.

Post reply

This question has expired.

Michael Brumm voted on this question.

Current status of this question: Completed

Please log in to add additional discourse to this page.

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$75 Convert AJAX PHP code to Wordpress

(21) Responses

$75
Convert AJAX PHP code to Wordpress