[jQuery]Adding shortcode

Question

I have been struggling with this the entire night, with no hope of ever reaching my goals. I have browsed through several books worth of support pages, but I can't get this to work.

I am trying to implement a feedback button to my website that, when clicked, shows a Ninja Form. Due to the dynamic nature I have implemented the html using jQuery (which I am new to) and now I am trying to get the PHP shortcode into it.

I have tried using AJAX in Plugins, which basically does nothing.

feedback_button.php:

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
    if( 'index.php' != $hook ) {
        return;
    }

    wp_enqueue_script( 'feedback-script', plugins_url( 'feedback-script.js', __FILE__ ), array('jquery') );

    wp_localize_script( 'feedback-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}   

add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
    global $wpdb;
    $whatever = intval( $_POST['whatever'] );
    $whatever += 10;
    echo $whatever;
    wp_die();

feedback-script.js:

var $buttonDiv = $( "<div id='feedback-button' style='display:none;'>feedback</div>" );
var $formDiv = $( "<div id='feedback-form' style='display:none;'></div>" );

$( document ).ready(function() {
    $( "#content .container" ).append( $buttonDiv );
    $( "#feedback-button" ).css("top", ( $( window ).height() - $( "#feedback-button" ).height() - $( "#main-nav" ).height() ) / 2 + "px" );
    $( "#content .container" ).append( $formDiv );
    $( "#feedback-form" ).css("top", ( $(window ).height() - $( "#feedback-form" ).height() - $( "#main-nav" ).height() ) / 2 + "px" );


    if ( ($(window).width() > 824) && $(window).height() > 289 ) {
        $( "#feedback-button").show('slow');

        $( "#feedback-button" ).click(function() {
            $( "#feedback-button" ).hide('slow');

            var data = {
                'action': 'my_action',
                'whatever': ajax_object.we_value      // We pass php values differently!
            };
            // We can also pass the url value separately from ajaxurl for front end AJAX implementations
            jQuery.post(ajax_object.ajax_url, data, function(response) {
                console.log('Got this from the server: ' + response);
            });

            $( "#content .container" ).append( $formDiv );
            $( "#feedback-form").show();
        });
    };
});

$( window ).resize(function() {
    if ( ($(this).width() < 825) || $(this).height() < 290 ){
        $( '#feedback-button' ).hide();
        $( '#feedback-form' ).hide();
    };

    if ( ($(this).width() > 824) && $(this).height() > 289 ){
        $( '#feedback-button' ).show( 'slow' );
    };

    $( "#feedback-button" ).css("top", ( $( window ).height() - $( "#feedback-button" ).height() ) / 2 + "px" );
    $( "#feedback-form" ).css("top", ( $(window ).height() - $( "#feedback-form" ).height() ) / 2 + "px" );
});

And I have tried using this page as well, after which the working #feedback-button even disappears.

(JS script is the same) feedback_button.php:

wp_enqueue_style( 'feedback-style', plugins_url( '/feedback-style.css' , __FILE__ ) );

// Register the script
wp_register_script( 'feedback-script', plugins_url( 'feedback-script.js' , __FILE__ ) );

// Localize the script with new data
$done_form_shortcode = do_shortcode( '[ninja_forms id=6]' );
wp_localize_script( 'feedback_script_handle', 'feedback_object', $done_form_shortcode );

// Enqueued script with localized data.
wp_enqueue_script( 'feedback_script_handle' );
?>
<script>
    $( document ).ready( function() {
        if ($( "#feedback-form" ).length){
            alert( feedback_object.$done_form_shortcode);
        };
    });
</script>

Can anyone help me?

well first of all, if you're using WordPress' jQuery, you have to use jQuery as the object reference, not $. It would help if you added what errors you are receiving in the javascript console. However, I think this whole effort may ultimately suffer from a critical flaw- presumably the form shortcode has some javascript that enables it, which is not going to be bound to anything you insert in a page via ajax. This is probably something you should ask on their support forums. — Milo
– Milo, Commented Sep 13, 2015 at 23:02
If you are using AJAX on the front end of the site, for users that are not logged in, you also need add_action('wp_ajax_nopriv_my_action', '....'); — Chris
– Chris, Commented Sep 14, 2015 at 1:39
@Milo could you helpt me a little bit? I am not sure how to use the debug in jQuery. — Sjors Hijgenaar
– Sjors Hijgenaar, Commented Sep 14, 2015 at 7:42
@Chris I am using it on the front end but only for logged in users, do I also need nopriv? — Sjors Hijgenaar
– Sjors Hijgenaar, Commented Sep 14, 2015 at 7:42
If you are only using for logged in users, then you do not need the nopriv addition. — Chris
– Chris, Commented Sep 14, 2015 at 14:51

Sjors Hijgenaar · Accepted Answer · 2017-02-07 12:11:01Z

Seeing the form was for feedback purposes and not a lot was need I implemented a simple form of my own.

jQuery:

<form method='post' id='feedback-form'>\
    <textarea name='feedback-message' id='feedback-message' rows='10' cols='10' required />\
    <input type='submit' name='feedback-submit' id='feedback-submit' class='ninja-forms-field  btn btn-primary custom-button red-btn' value='Thanks!' \
    placeholder='Type your comments/suggestions/functionality requests' />\
</form>\

PHP

add_action( 'init', 'feedback_form_submit' );

function feedback_form_submit() {
    if(isset($_POST['feedback-submit'])) {
        //here you'll have your form data in a $_POST array, you can check it using a print_r. parse the form and insert the post
        $message = $_POST['feedback-message'];
        $user = wp_get_current_user();
        $from_first_name = $user->user_firstname;
        $from_last_name = $user->user_lastname;
        $from_email = $user->user_email;
        $headers = 'From: "' . $from_first_name . ' ' . $from_last_name . '" <' . $from_email . '>';



        // mail message to admin
        $to = '[email protected]';
        $subject = '[SRC Thor] New feedback';
        mail( $to, $subject, $message, $headers);

        wp_redirect(home_url('/index.php/nl/thank-you'));
        exit;

    }
}

Stack Exchange Network

[jQuery]Adding shortcode

1 Answer 1

Your Answer

Hot Network Questions

[jQuery]Adding shortcode

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions