0

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' );
  • 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
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.

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

  • 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

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