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

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.

  • avatar
    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.

  • avatar
    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..

    Previous versions of this answer: 02/06/13 at 5:22am

  • avatar
    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.

  • avatar
    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.

  • avatar
    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.

  • avatar
    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

  • avatar
    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

  • avatar
    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.

  • avatar
    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.

    attachment image expert uploaded image

  • avatar
    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'

  • avatar
    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

  • avatar
    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.

  • avatar
    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.

  • avatar
    Last edited:
    02/07/13
    9:05pm
    Michael Brumm says:

    Still no luck... I can explain more when you're awake... Thanks.

  • avatar
    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

  • avatar
    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.

  • avatar
    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?

  • avatar
    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

  • avatar
    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.

  • avatar
    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

    attachment image expert uploaded image

  • avatar
    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.

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.