php - How can I post data through a form with ajax and get it working? -
this question has answer here:
- jquery ajax submit form 14 answers
i have piece of ajax script trying post form me. without ajax form post , send data. want ajax post not refresh page , posts data too. there multiple forms on 1 page.
my js script looks this:
function post_form(action) { var token = $('.forms').attr('id'); var itemid = $('.forms').find('input.id').val(); var instaurl = 'https://api.instagram.com/v1/media/'+itemid+'/likes?access_token='+token+''; console.log(token); console.log(itemid); console.log(instaurl); var datastring = token; $.ajax({ type: "post", url: instaurl, data: datastring, crossdomain: true, datatype: 'jsonp', beforesend: function() { $("#loading").fadein("slow"); if ( action == "like" ) { $("#open"+comment_id).hide(); $("#loading_like_or_unlike"+comment_id).html('<img src="loader.gif" align="absmiddle" alt="loading...">'); } else if ( action == "unlike" ) { $("#close"+comment_id).hide(); $("#loading_like_or_unlike"+comment_id).html('<img src="loader.gif" align="absmiddle" alt="loading...">'); } else {} }, success: function(response) { if ( action == "like" ) { $("#close"+comment_id).show(); } else if ( action == "unlike" ) { $("#open"+comment_id).show(); } else {} $("#loading").fadeout("slow"); } }); event.preventdefault(); } $(document).ready(function() { $('button.like').each(function() { $(this).on('click', function(){ post_form(); }); }); });
now in markup have form has id in hidden input value. form once posted looks id , uses case switcher ans unlike switch. uses instagram php library connect , data images able see:
try { $instagram = new instagram\instagram; $instagram->setaccesstoken($_session['instagram_access_token']); $token = $_session['instagram_access_token']; //$clientid = $_session['client_id']; $current_user = $instagram->getcurrentuser(); $tag = $instagram->gettag('folkclothing'); $media = $tag->getmedia(isset($_get['max_tag_id']) ? array( 'max_tag_id' => $_get['max_tag_id'] ) : null); $liked_media = $current_user->getlikedmedia(); /* echo 'https://api.instagram.com/v1/media/'. $item->getid() .'/likes?access_token='.$token.''; */ if ( isset( $_post['action'] ) ) { echo '<br/>form submitted, inspect sent'; print_r($_post); $id = $_post['id']; switch( strtolower( $_post['action'] ) ) { case 'like': $current_user->addlike( $id ); break; case 'unlike': $current_user->deletelike( $id ); break; } } } catch ( exception $e ) { // yes there error $error = $e->getmessage(); } // view rendering stuff // display error if ( $error != '' ) { echo "<h2>error: ".$error."</h2>"; } echo '<section id="images">'; foreach ( $media $item ) { echo '<article class="instagram-image">'; // define form , set action post send data script echo '<form id="'. $token .'" class="forms" action="'; echo url::current(); echo '" method="post">'; $id = $item->getid(); echo '<a title="' . $item->getcaption() .'" class="fancybox" href="' . $item->link . '"><img alt="' . $item->getcaption() .'" src="' . $item->images->standard_resolution->url . '" /></a>'; echo '<div class="formsubmit-feedback"></div>'; //echo '<img src="/public/img/377.gif" alt="loader"/>'; if ( $current_user->likes($item) ){ echo '<button class="ajax instabtn unlike icon-heart" type="submit" name="action" value="unlike"></button>'; } else { echo '<button class="ajax instabtn icon-heart" type="submit" name="action" value="like"></button>'; } echo '<input class="id" type="hidden" name="id" value="'; echo $id; echo '">'; echo '<p>'; echo $item->likes->count; echo '</p>'; //echo '<p>'.$item->getid().'</p>'; //echo '<p>by: <em>' . $item->user->username . '</em> </p>'; //echo '<p>date: ' . date('d m y h:i:s', $item->created_time) . '</p>'; //echo '<p>$item->comments->count . ' comment(s). ' . $item->likes->count . ' likes. '; echo '</form>'; echo '</article>'; } echo '</section>';
the form works know sure need know how can post right place , switch likes/unlikes image.
does know way around @ all?
thanks
so database changes happen page doesn't reflect change properly?
i'm not sure if ajax success has action in scope...try echoing action in php script , using ajax response var control images.
Comments
Post a Comment