I have a piece of ajax script that is trying to post a form for me. Currently without ajax the form will post properly and it will send the data. What I want is an ajax post so it does not refresh the page and it posts the data too. There are multiple forms on one page.
My js script looks like 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 my markup I have a form that has an id in a hidden input value. The form once posted looks for the id and uses a case switcher with a like ans unlike switch. It uses the instagram php library to connect and get the data for the images as you will be able to 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 IS SUBMITTED, INSPECT WHAT WAS 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 is an error
$error = $e->getMessage();
}
// view rendering stuff
// display the error
if ( $error != '' )
{
echo "<h2>Error: ".$error."</h2>";
}
echo '<section id="images">';
foreach ( $media as $item ) {
echo '<article class="instagram-image">';
// define the form and set the action to POST to send the data to this 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 like 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 I know that for sure but I really need to know how I can get this to post to the right place and do the switch so it likes/unlikes the image.
Does anyone know a way around this at all?
Thanks
