Question

I have a JQuery Dialog, with a control inside containing textbox, I also have a ok button inside. On the ok click I get the value from the textbox and pass it to a function.

Problem:

Everytime I change the value in the textbox it only gets the old value,

so, if the original value is 3, i change it to 20, i click the button, it gets the value 3.

Anyone have any ideas as to why it does this?

thanks!

here is some code:

JQUERY:

$("#addtxt").click(function (e) {
  $("#dialog").show('slide');
  $("#dialog").html('<input id="my_txttext" name="my_txttext" title="Manoj" type="text" label="Add Text" />');
  $("#dialog").dialog({
      resizable: false,
      modal: true,
      position: {
          my: 'center',
          at: 'center',
          //    collision: 'fit',
          // ensure that the titlebar is never outside the document
          using: function (pos) {
              var topOffset = $(this).css(pos).offset().top;
              if (topOffset < 0) {
                  $(this).css('top', pos.top - topOffset);
              }
          }
      },
      width: 300,
      CloseText: '',
      title: 'Add Text',
      buttons: {
          'OK': function () {
              //to create dynamic div to contain data
              var div = document.createElement('div');
              $(div).attr("id", "dyndiv" + count);
              objid = "dyndiv" + count;
              count++;
              $('#sel_obj_text').val("Text");
              text_visibility();

              var $ctrl = $(div).text($('#my_txttext').get(0).value).addClass("draggable ui-widget-content HandleTopRowBorder").draggable({
                  containment: '#containment-wrapper',
                  cursor: 'move',
                  snap: '#containment-wrapper'
              });

              $("#containment-wrapper").append($ctrl);
              $('#' + objid).position({
                  of: $("#containment-wrapper"),
                  my: "center" + " " + "center",
                  at: "center" + " " + "center"
              });
              //    $('#my_txttext').val('')
              $(this).dialog("destroy");

          },
          'Cancel': function () {
              $(this).dialog("destroy");
              // I'm sorry, I changed my mind                 
          }
      }

  });

Answer 1

$("#addtxt").click(function (e) {
  var $input = $('<input title="Manoj" type="text" placeholder="Add Text" />');
  $("#dialog")
    .empty()
    .append($input)
    .show('slide')
    .dialog({
      resizable: false,
      modal: true,
      position: {
          my: 'center',
          at: 'center',
          //    collision: 'fit',
          // ensure that the titlebar is never outside the document
          using: function (pos) {
              var topOffset = $(this).css(pos).offset().top;
              if (topOffset < 0) {
                  $(this).css('top', pos.top - topOffset);
              }
          }
      },
      width: 300,
      CloseText: '',
      title: 'Add Text',
      buttons: {
          'OK': function () {

              $('#sel_obj_text').val("Text");
              text_visibility();

              $("<div>", { 'id' : "dyndiv" + count })
                .text($input.val())
                .addClass("draggable ui-widget-content HandleTopRowBorder")
                .draggable({
                  containment: '#containment-wrapper',
                  cursor: 'move',
                  snap: '#containment-wrapper'
                })
                .appendTo("#containment-wrapper")
                .position({
                  of: $("#containment-wrapper"),
                  my: "center" + " " + "center",
                  at: "center" + " " + "center"
                });

              $(this).dialog("destroy");

              count++;
          },
          'Cancel': function () {
              $(this).dialog("destroy");
          }
      }

  });