Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

One person on the site wrote a function, but I do not know why it works. This function displays a random quote. The functions implemented the ability to download new quotes via AJAX (link New Quote), and it just does not work. Help please understand why. I myself can not understand this.

Sorry for my bad English.

The PHP

/wp-content/themes/%your_theme%/js/ajax-load-quote.php

 <?php
 /* uncomment the below, if you want to use native WP functions in this file */
// require_once('../../../../wp-load.php');

 $array = file( $_POST['file_path'] ); // file path in $_POST, as from the js
 $r = rand( 0, count($array) - 1 );

 return '<p>' . $array[$r] . '</p>';
 ?>

The jQuery

/wp-content/themes/%your_theme%/js/ajax-load-quote.js

function ajaxQuote() {
    var theQuote = jQuery.ajax({
        type: 'POST',
        url: ajaxParams.themeURI+'js/ajax-load-quote.php',
        /* supplying the file path to the ajax loaded php as a $_POST variable */
        data: { file_path: ajaxParams.filePath },
        beforeSend: function() {
            ajaxLoadingScreen(true,'#randomquotes');
        },
        success: function(data) {
            jQuery('#randomquotes').find('p').remove();
            jQuery('#randomquotes').prepend(data);
        },
        complete: function() {
            ajaxLoadingScreen(false,'#randomquotes');
        }
    });
    return theQuote;
}
/* Loading screen to be displayed during the process, optional */
function ajaxLoadingScreen(switchOn,element) {
    /* show loading screen */
    if (switchOn) {
        jQuery(''+element).css({
            'position': 'relative'
        });
        var appendHTML = '<div class="ajax-loading-screen appended">
            <img src="'+ajaxParams.themeURI+'images/ajax-loader.gif"
                alt="Loading ..." width="16" height="16" /></div>';
        if( jQuery(''+element).children('.ajax-loading-screen').length === 0 ) {
            jQuery(''+element).append(appendHTML);
        }
        jQuery(''+element).children('.ajax-loading-screen').first().css({
            'display': 'block',
            'visibility': 'visible',
            'filter': 'alpha(opacity=100)',
            '-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"',
            'opacity': '1'
        });
    } else {
        /* hide the loading screen */
        jQuery(''+element).children('.ajax-loading-screen').css({
            'display': '',
            'visibility': '',
            'filter': '',
            '-ms-filter': '',
            'opacity': ''
        });
        jQuery(''+element).css({
            'position': ''
        });
    }
}
/* triggering the above via the click event */
jQuery('#newquotes').click( function() {
    var theQuote = ajaxQuote();
    return false;
});

functions.php

/wp-content/themes/%your_theme%/functions.php

function random_quote( $atts ) {
    /* extracts the value of shortcode argument path */
    extract( shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt' // default, if not set
    ), $atts ) );
    $array = file( $path );
    $r = rand(0,count($array)-1);
    $output = '<div id="randomquotes">' .
            '<p>' . $array[rand(0,count($array)-1)] . '</p>' .
        '</div>' .
        '<a id="newquotes" class="button" href="#" title="Gimme a new one!">New Quote</a>';

    /* supplying the file path to the script */
    wp_localize_script(
       'ajax-quote',
        'ajaxParams',
        array( 'filePath' => $path, 'themeURI' => get_template_directory_uri() . '/' )
    );
    return $output;
}
add_shortcode( 'randomquotes', 'random_quote');
/* loads the js */
function wpse72974_load_scripts() {
    if ( ! is_admin() ) {
        wp_register_script(
           'ajax-quote', get_template_directory_uri() . '/js/ajax-load-quote.js',
            array( 'jquery' ),
            '1.0',
            true
        );
        wp_enqueue_script( 'ajax-quote' );
        /* supplying the theme URI to the script */
        wp_localize_script(
            'ajax-quote',
            'ajaxParams',
             array( 'themeURI' => get_template_directory_uri() . '/' )
        );
    }
}
add_action ( 'init', 'wpse72974_load_scripts' );
share|improve this question

closed as too localized by toscho Nov 24 '12 at 16:45

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Lots of potential point of failure... can you provide a link to the site? Also, this may end being closed as "too specific", or migrated to another site. Be aware. –  s_ha_dum Nov 24 '12 at 15:48
    
Link where this function is used lex111.dotgeek.org/wordpress/rquote/# you do not know why it does not work? –  user23769 Nov 24 '12 at 15:55
add comment

1 Answer 1

You have an error on this line: var appendHTML = '<div class="ajax-loading-screen appended"> Be careful with multi-line string in Javascript. It doesn't work the way it does in PHP.

http://stackoverflow.com/questions/805107/how-to-create-multiline-strings

share|improve this answer
    
Thanks for the note, I was corrected by adding slashes, but the result has not changed. Rather, the problem here in WordPress .. `var appendHTML = '<div class="ajax-loading-screen appended"> \ <img src="'+ajaxParams.themeURI+'images/ajax-loader.gif" ` –  user23769 Nov 24 '12 at 16:24
    
The problem has not been corrected. Install FireBug and use the console to debug your Javascript. This is a Javascript question anyway and should probably be on stackoverflow proper. –  s_ha_dum Nov 24 '12 at 16:28
    
What a pity that FireBug for Firefox. I have Google Chrome. All hope for those in the know, maybe they know the key to solving the problem. –  user23769 Nov 24 '12 at 16:35
    
You can debug Javascript with Chrome. It has developer tools, pretty good ones if you learn to use them. –  s_ha_dum Nov 24 '12 at 16:37
    
In fact of the matter is that I am a novice in Javascript. While looking into the console, the way prescribed correctly. They say that in WordPress since version 3+ AJAX need to register in your theme. –  user23769 Nov 24 '12 at 16:58
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.