jquery - Image not updating without refresh after upload, using PHP and ajaxform

821

My problem is that I upload an image, which works without leaving the page, and it is all successful. In the success callback of the ajaxForm plugin, I'm changing the src of the image, but it doesn't update. But I know the image has finished uploading when the success callback is reached. I'm even requerying for it.

Still, I have to reload the page in order to see it. It worked perfectly when I was using pure JS and no PHP. I've tried a lot of different rearranging but still nothing. I've tried using the attr function to change the src, but I still have to reload. The image src is correctly changed according to the page source.

Can anyone help? Why am I still having to reload the page?

My upload form:

f($whoseprofile == $currentUser->get("username"))
        {
echo '<form id = "upform" action="/upload.php" method="post" enctype="multipart/form-data"><label for="uploadpicture"><img class="overlayImage" src="/img/newplus.png"><input type="file" id="uploadpicture" name="picture" /></label></form>';

        }

Next is the ajaxForm.

<script type="text/javascript">
        $(document).ready(function() {
            $('#uploadpicture').change(function() {

                $('#upform').ajaxForm({

                    beforeSubmit: function() {

                    },
                    success: function() { 
                        <? php $query = ParseUser::query();
                        $query - > equalTo("username", $whoseprofile);
                        $results = $query - > find();
                        $picurl = $results[0] - > get("profilePicture") - > getUrl(); ?>
                        $('#profilepic').html("");
                        $('#profilepic').html("<img id='profilepic' class='profilepic' src='<?php echo $picurl;?>'>");
                    }
                }).submit();




            });

        });
    </script>

Here is upload.php

    <?php 

require 'autoload.php';

$app_id = ;
$rest_key = ;
$master_key = ;

use Parse\ParseClient;
use Parse\ParseObject;
use Parse\ParseQuery;
use Parse\ParseACL;
use Parse\ParsePush;
use Parse\ParseUser;
use Parse\ParseInstallation;
use Parse\ParseException;
use Parse\ParseAnalytics;
use Parse\ParseFile;
use Parse\ParseCloud;
use Parse\ParseRelation;
use Parse\ParseSessionStorage;

session_start();
ParseClient::initialize( $app_id, $rest_key, $master_key );

$currentUser = ParseUser::getCurrentUser();

if ($currentUser) {

 $file = ParseFile::createFromData( file_get_contents( $_FILES['picture']['tmp_name'] ), $_FILES['picture']['name'] );
  $file->save();

$currentUser->set("profilePicture", $file);
$currentUser->save();


} else {

header("Location: blahlblahblah");
exit();

}

?>

People are also looking for solutions to the problem: php - Laravel Eloquent ORM filtering with appended attribute

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.