Jquery function not executing properly

Question

Okay, so here is my code:

//Other Jquery codes


// show_popup_crop : show the crop popup
function show_popup_crop(url) {
    alert("Called show_popup_crop!");
    // change the photo source
    $('#cropbox').attr('src', url);
    // destroy the Jcrop object to create a new one
    try {
        jcrop_api.destroy();
    } catch (e) {
        // object not defined
    }
    // Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
    $('#cropbox').Jcrop({
        aspectRatio: 1,
        setSelect: [ 100, 100, TARGET_W, TARGET_H ],
        onSelect: updateCoords
    },function(){
        jcrop_api = this;
    });

    // store the current uploaded photo url in a hidden input to use it later
    $('#photo_url').val(url);
    // hide and reset the upload popup
    $('#display_pic_input_first').val('');

    // show the crop popup
    $('#popup_crop').show();
}

// crop_photo :  
function crop_photo() {
    var x_ = $('#x').val();
    var y_ = $('#y').val();
    var w_ = $('#w').val();
    var h_ = $('#h').val();
    var photo_url_ = $('#photo_url').val();

    // hide thecrop  popup
    $('#popup_crop').hide();

    // display the loading texte
    $('.loading').css('display','inherit');
    // crop photo with a php file using ajax call
    $.ajax({
        url: 'crop_photo.php',
        type: 'POST',
        data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, targ_w:TARGET_W, targ_h:TARGET_H},
        success: function(data){
            // display the croped photo
        }
    });
}

// updateCoords : updates hidden input values after every crop selection
function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

//document.ready function calls

What is happening:

• The function show_popup_crop(url){} ain't working.
• Now the function is being called, because the alert("Called show _popup_crop!"); is being executed. But it isn't executing the rest of the code that is the part where it needs to change the attributes of the image tag and the divisions.
• I have tried changing the position of this script in the JS file but it doesn't help.

A PHP code automatically generates a script which is included in the body:

<script type="text/javascript">window.top.window.show_popup_crop("some url")</script>

PHP code within the script tag in the php page:

echo '<script type="text/javascript">window.top.window.show_popup_crop("'.$target_file.'")</script>';

• Now it does call the function when the page is loaded as the alert function
  alert("Called show_popup_crop!"); is executed. In fact it executes all the alert functions included but it doesn't execute anything else included in the method.

I have tried removing everything else and just executing the code below, but it still doesn't work:

function show_popup_crop(url) {
    alert("Called show_popup_crop!");
    $('#cropbox').attr('src', url); //change the photo source
    $('#popup_crop').show();
}

• However when I included $('#cropbox').attr('src', "some url"); in another document.ready method in the same JS file, it does execute the code. I don't understand what is the problem.

• All the other functions that are called in index.php page are executed.

• However one more weird thing is, it doesn't execute all the functions in $(document).ready(function(){...});.
  It just executes the first function and stops... but it executes all the other functions in all the other pages?

---

Console Error:

At first it gave me this console error:

Uncaught TypeError: undefined is not a function

but now it is giving me this:

Uncaught ReferenceError: jQuery is not defined

Files included in header (where position.js is the name of the file):

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/position.js"></script>

P.S: Often when chrome is refreshed and the js document is changed, the chrome loads old js document no matter how many times it is refreshed?

Answer 1

Change your PHP code to this:

echo '<script type="text/javascript">$(window).on("load",function(){window.top.window.show_popup_crop("'.$target_file.'");});</script>';

The result in JavaScript will be this:

<script type="text/javascript">
    $(window).on("load",function(){
        window.top.window.show_popup_crop("url/to/image.jpg");
    });
</script>

• What was happening in your code, was that show_popup_crop() was being called before the image-element #cropbox had been fully loaded on the page.
• Because of that, this line $('#cropbox').attr('src', url); tried to change the src tag of an element that didn't exist yet.
  And by the time the image-element had finally been loaded, the code had tried to execute that line long ago (in computer-time, this all happens within a second or less) without any success.
  So nothing happened.

What the $(window).on("load",function(){...}); does, is wait until all elements on the page are fully loaded, before executing the code within it's handler-function.
This happens after document.ready. Read here what the difference between the two is, and why it's important to use window.load especially for images (I always recommend it over document.ready).

So now, this line $('#cropbox').attr('src', url); is executed only after all elements - including the image - have been loaded on the page. So the image-element exists, and the source can be successfully changed.

Answer 2

did you wrap all your code around the

$(document).ready(function(){
  //jquery code here
});

I kind of have the feeling your problem is related to this. .ready is an event thrown by jquery when its API has loaded and is ready for use