1

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

It returns an amazon product.

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?

0
<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' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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