Execute a function using ajax

4 Views

I have a function called function getSingleAmazonProduct($asin='').

It returns an amazon product.

Read More

I have a form field to enter the $asin. 

    <div id="asinform">
        <form id="productpreview" action="#">
        <input type="text" id="asin" name="asin" value="" placeholder="Enter ASIN"/>
        <input type="hidden" name="asin_form_post" value="1"/>              
        <input type="submit" value="Preview"/>
    </div>
    <div id="asinpreview">
    <!--  Preview goes here -->
    </div>

if ( isset($_POST['asin_form_post']) && $_POST['asin_form_post'] == '1') {
    $asin = $_POST['asin'];
    $preview = getSingleAmazonProduct($asin);
}

Can someone tell me how to use ajax to display the returned data within asinpreview div?

Post Views: 4

Related posts

Leave a Reply

1 comment 

  1. <div id="asinform">
        <form id="productpreview" action="#">
        <input type="text" id="asin" name="asin" value="" placeholder="Enter ASIN"/>
        <input type="hidden" name="asin_form_post" value="1"/>              
        <input type="submit" value="Preview"/>
</div>
    <div id="asinpreview">
    <!--  Preview goes here -->
    </div>
<script type="text/javascript">
if ( typeof jq == "undefined" )
    var jq = jQuery;

jq(document).ready( function() {
    jq("#productpreview").submit(function() {
        var asin =   jq("#asin").val();
        jq.post( ajaxurl, {
            action: 'amazon_product_preview',
            'asin': asin
        },
        function(response) {
        jq('#asinpreview').html(response);
        });
        return false;
    } );
} );

</script>

function amazonajax() {
if ( isset($_POST['asin'])) {
    $asin = $_POST['asin'];
    $preview = getSingleAmazonProduct($asin);
    echo $preview;
    die();
    }
}
add_action('wp_ajax_amazon_product_preview', 'amazonajax' );
add_action('wp_ajax_nopriv_amazon_product_preview', 'amazonajax' );