I have a code to display a random quote. One person wrote a function to implement all of this. But the update data via AJAX for some reason does not work. When you press the button &quot;New Quote&quot;, nothing happens. Maybe someone knows why? What needs to be fixed in the following code, so that when you click &quot;New quote&quot; a new quote is loaded?

The PHP
----
`/wp-content/themes/%your_theme%/js/ajax-load-quote.php`

     &lt;?php
     /* uncomment the below, if you want to use native WP functions in this file */
    // require_once(&#39;../../../../wp-load.php&#39;);

     $array = file( $_POST[&#39;file_path&#39;] ); // file path in $_POST, as from the js
     $r = rand( 0, count($array) - 1 );

     return &#39;&lt;p&gt;&#39; . $array[$r] . &#39;&lt;/p&gt;&#39;;
     ?&gt;

The HTML Structure
-----
In a page content, a widget or a template file:

    &lt;div id=&quot;randomquotes&quot;&gt;
        &lt;p&gt;I would rather have my ignorance than another man’s knowledge,
           because I have so much more of it.&lt;br /&gt;
           -- Mark Twain, American author &amp; Playwright&lt;/p&gt;
    &lt;/div&gt;
    &lt;a id=&quot;newquote&quot; class=&quot;button&quot; href=&quot;#&quot; title=&quot;Gimme a new one!&quot;&gt;New Quote&lt;/a&gt;
This you can obviously adjust to your liking, but for the sake of this example, this is what we&#39;re going with.&lt;br /&gt;
We will generate the above via a shortcode later.

The jQuery
-----
`/wp-content/themes/%your_theme%/js/ajax-load-quote.js`

    function ajaxQuote() {
        var theQuote = jQuery.ajax({
            type: &#39;POST&#39;,
            url: ajaxParams.themeURI+&#39;js/ajax-load-quote.php&#39;,
            /* supplying the file path to the ajax loaded php as a $_POST variable */
            data: { file_path: ajaxParams.filePath },
            beforeSend: function() {
                ajaxLoadingScreen(true,&#39;#randomquotes&#39;);
            },
            success: function(data) {
                jQuery(&#39;#randomquotes&#39;).find(&#39;p&#39;).remove();
                jQuery(&#39;#randomquotes&#39;).prepend(data);
            },
            complete: function() {
                ajaxLoadingScreen(false,&#39;#randomquotes&#39;);
            }
        });
        return theQuote;
    }
    /* Loading screen to be displayed during the process, optional */
    function ajaxLoadingScreen(switchOn,element) {
        /* show loading screen */
        if (switchOn) {
            jQuery(&#39;&#39;+element).css({
                &#39;position&#39;: &#39;relative&#39;
            });
            var appendHTML = &#39;&lt;div class=&quot;ajax-loading-screen appended&quot;&gt;
                &lt;img src=&quot;&#39;+ajaxParams.themeURI+&#39;images/ajax-loader.gif&quot;
                    alt=&quot;Loading ...&quot; width=&quot;16&quot; height=&quot;16&quot; /&gt;&lt;/div&gt;&#39;;
            if( jQuery(&#39;&#39;+element).children(&#39;.ajax-loading-screen&#39;).length === 0 ) {
                jQuery(&#39;&#39;+element).append(appendHTML);
            }
            jQuery(&#39;&#39;+element).children(&#39;.ajax-loading-screen&#39;).first().css({
                &#39;display&#39;: &#39;block&#39;,
                &#39;visibility&#39;: &#39;visible&#39;,
                &#39;filter&#39;: &#39;alpha(opacity=100)&#39;,
                &#39;-ms-filter&#39;: &#39;&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;&#39;,
                &#39;opacity&#39;: &#39;1&#39;
            });
        } else {
            /* hide the loading screen */
            jQuery(&#39;&#39;+element).children(&#39;.ajax-loading-screen&#39;).css({
                &#39;display&#39;: &#39;&#39;,
                &#39;visibility&#39;: &#39;&#39;,
                &#39;filter&#39;: &#39;&#39;,
                &#39;-ms-filter&#39;: &#39;&#39;,
                &#39;opacity&#39;: &#39;&#39;
            });
            jQuery(&#39;&#39;+element).css({
                &#39;position&#39;: &#39;&#39;
            });
        }
    }
    /* triggering the above via the click event */
    jQuery(&#39;#newquotes&#39;).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(
            &#39;path&#39; =&gt; get_template_directory_uri() . &#39;/quotes.txt&#39; // default, if not set
        ), $atts ) );
        $array = file( $path );
        $r = rand( 0, count($array) - 1 );
        $output = &#39;&lt;div id=&quot;randomquotes&quot;&gt;&#39; .
                &#39;&lt;p&gt;&#39; . $array[$r] . &#39;&lt;/p&gt;&#39; .
            &#39;&lt;/div&gt;&#39; .
            &#39;&lt;a id=&quot;newquote&quot; class=&quot;button&quot; href=&quot;#&quot; title=&quot;Gimme a new one!&quot;&gt;New Quote&lt;/a&gt;&#39;;
        /* enqueue the below registered script, if needed */
        wp_enqueue_script( &#39;ajax-quote&#39; );
        /* supplying the file path to the script */
        wp_localize_script(
            &#39;ajax-quote&#39;,
            &#39;ajaxParams&#39;,
            array(
                &#39;filePath&#39; =&gt; $path,
                &#39;themeURI&#39; =&gt; get_template_directory_uri() . &#39;/&#39;
            )
        );
        return $output;
    }
    add_shortcode( &#39;randomquotes&#39;, &#39;random_quote&#39;);
    /* register the js */
    function wpse72974_load_scripts() {
        if ( ! is_admin() ) {
            wp_register_script(
               &#39;ajax-quote&#39;, 
                get_template_directory_uri() . &#39;/js/ajax-load-quote.js&#39;,
                array( &#39;jquery&#39; ),
                &#39;1.0&#39;,
                true
            );
        }
    }
    add_action ( &#39;init&#39;, &#39;wpse72974_load_scripts&#39; );

How you can update the content on the page using AJAX in WordPress? 

All Shortcode Solutions on Gang of Coders

Total of 1 Shortcode Solutions

How to Use AJAX in a WordPress Shortcode?