Update img with jquery and php

Question

i'm trying to update img cover without refresh the page using ajax and php but it does not work at all

HTML

  <div class="cover" >
  <img  id="b1"  src="<?php echo $user->picture_path();>"class="cover"/>          
                <div id="modal-cover" class="cov-lo">        </div>
   </div>

js

$('#b2').on({
    'click': function(){ 
     $('#b1').attr('src', <?php echo $user->picture_path();?> + '?' + new Date().getTime());}
});

the input and form

   <form  action="profile.php" method="POST" enctype="multipart/form-data"  > 
            <div class="hio"> 
                                        Upload                                   <input  type="file" onchange="this.form.submit()" name="cover" id="bla2"class="custom-file-input" /> 
 </div> 
             </form>

it's old id in input bla2 is right one even with right one will not work my friend — Hossam Elddin Magdy, Jan 05 '16 at 02:27
@HossamElddinMagdy Please update your question and make it clear. What does "not working" mean? Have you checked the JS console? — Mike, Jan 05 '16 at 02:27

score 2 · Answer 1 · edited May 23 '17 at 11:44

Ajax would look more like this:

js/jQuery:

$(document).on({'click', '#b2', function(){ 
    $.ajax({
        type: 'post',
         url: 'my_ajax_processor_file.php',
        data: '',
        success: function(data){
            $('#b1').attr('src', data);
        }
    }); //END ajax

}); //END #b2.click

my_ajax_processor_file.php:

<?php 
    $dt = new Date().getTime();
    $pp = 'get user picture path here';
    echo $pp .' - '. $pp;

Note that you need to have an external PHP file, which I've called my_ajax_processor_file.php, that does some additional PHP processing and ECHOs back a value.

This value is received in the AJAX code block's success function, and called data (call it what you like - the name is set here: function(data).

Note that the contents of data variable are only available within that success function.

Here are some more basic examples of what AJAX looks like:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

care to see where the OP used your code? [In a new question...](http://stackoverflow.com/questions/34624394/how-to-call-back-img-src-oop-php) which I closed as an exact duplicate. — Funk Forty Niner, Jan 06 '16 at 01:56

score 0 · Answer 2 · answered Jan 05 '16 at 02:26

I think you have a fundamental misunderstanding of where the PHP and HTML are interpreted:

PHP is a server-side scripting language designed for web development (see this Wikipedia article). That means that the PHP code is executed on the server before arriving in the browser.
HTML is interpreted as plain text by the browser. No PHP is executed in the browser.

Therefore, once the JS gets to the browser, echo $user->picture_path(); has already been executed and is interpreted as plain text by the browser.

Your JS will look like this once it hits the browser:

$('#b2').on({
    'click': function() {
        $('#b1').attr('src', '/the/path/to/the/picture' + '?' + new Date().getTime());
    }
});

Even though you're right, I have a feeling this isn't the case here because of the `+ '?' + new Date().getTime()` at the end. I'm assuming that's some way to guarantee a new image. Then again, I could be wrong and that part is just pointless. — Mike, Jan 05 '16 at 02:29

Update img with jquery and php

2 Answers2