Uncaught TypeError: Cannot read property 'position' of undefined

Question

I am working on draggable items. I am trying to store the final position of the draggable div once it is stopped from being dragged.It was working fine when I had the following javascript code.

function make_draggable(elements)
 {
  /* Elements is a jquery object: */
  elements.draggable({
    containment: 'parent',
    start: function (e, ui) {
      ui.helper.css('z-index', ++zIndex);
    },
    stop: function (e, ui) {
      /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
      $.get('ajax/update_position.php', {
        x: ui.position.left,
        y: ui.position.top,
        z: zIndex,
        id: parseInt(ui.helper.find('span.data').html())
      });
    }
  });
}

I did not want the database to be updated everytime the user stops dragging the div. So I wanted to add a confirm button(which appears when the users stops dragging) to make the AJAX call. So I tried the following code

var $button = $("#button");

function make_draggable(elements) {
    /* Elements is a jquery object: */
    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            ui.helper.css('z-index', ++zIndex);
            $("#button").animate({
                opacity: 0
            }, 1000);
        },
        stop: function (e, ui) {
            /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
            $('#chatAudio')[0].play();
            $("#button").animate({
                opacity: 1
            }, 1000);
            /*  $.get('ajax/update_position.php',{x : ui.position.left,y: ui.position.top,z: zIndex,id:parseInt(ui.helper.find('span.data').html())});*/
        } /*stop is ending */
    }); /* element.draggable is ending */

}

 function myFunction() {
    alert(1);
    /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
    $.get('ajax/update_position.php', {
        x: ui.position.left,
        y: ui.position.top,
        z: zIndex,
        id: parseInt(ui.helper.find('span.data').html())
    });

}

But when I click the confirm button, I am seeing the Uncaught ReferenceError: ui is not defined error on my javascript console.

I thought that ui was not defined. So I added (e,ui) as shown below

function myFunction(e,ui) {
        alert(1);
        /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
        $.get('ajax/update_position.php', {
            x: ui.position.left,
            y: ui.position.top,
            z: zIndex,
            id: parseInt(ui.helper.find('span.data').html())
        });

    }

But now I am getting Uncaught TypeError: Cannot read property 'position' of undefined

Here is my website

Solution 1

This is all about passing parameter and expose objects. You can't access the ui parameter in your "myFunction" because, if I guess right, it was invoked by the "click" event of the "#button" object. The click event have no idea about the "ui" helper object, so it doesn't get passed to your function.

So, basically, you have many draggable element, but only one confirm button. The easiest way to fix the problem you had is, like Mohit suggested, bind the data you need with the element through its 'data' function. However, don't bind the 'ui' helper object itself, just bind the data that you need.

In short, try this.

var $button = $("#button");

function make_draggable(elements) {
    /* Elements is a jquery object: */
    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            ui.helper.css('z-index', ++zIndex);
            $("#button").animate({
                opacity: 0
            }, 1000);
        },
        stop: function (e, ui) {

            // All those fancy objects are accessible here, so we get the snapshot of their values, as simple non-cyclic javascript object, and store it with data function.
            $("#button").data('position', {
                x: ui.position.left,
                y: ui.position.top,
                z: zIndex,
                id: parseInt(ui.helper.find('span.data').html())
            });

            $('#chatAudio')[0].play();
            $("#button").animate({
                opacity: 1
            }, 1000);

        } /*stop is ending */
    }); /* element.draggable is ending */
}

function myFunction() {
    alert(1);
    /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
    $.get('ajax/update_position.php', $("#button").data('position'));
}

Solution 2

You can use data atribute property to pass ui value to button.

Try this:

var $button = $("#button");

function make_draggable(elements) {
    /* Elements is a jquery object: */
    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            ui.helper.css('z-index', ++zIndex);
            $("#button").animate({
                opacity: 0
            }, 1000);
        },
        stop: function (e, ui) {
            /* adding ui to button data attribute */
            $("#button").data('ui', JSON.stringify(ui));
            /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
            $('#chatAudio')[0].play();
            $("#button").animate({
                opacity: 1
            }, 1000);
            /*  $.get('ajax/update_position.php',{x : ui.position.left,y: ui.position.top,z: zIndex,id:parseInt(ui.helper.find('span.data').html())});*/
        } /*stop is ending */
    }); /* element.draggable is ending */

}

function myFunction() {
    /* get data attribute for ui value */
    var ui = JSON.parse($("#button").data('ui'));
    /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
    $.get('ajax/update_position.php', {
        x: ui.position.left,
        y: ui.position.top,
        z: zIndex,
        id: parseInt(ui.helper.find('span.data').html())
    });
}