Retrieve input value from jQuery UI dialog box

Question

I am working on a small project (just a practice example - not for real use). Its a very simple CRUD application, and I am not allowed to alter the index.html. Also have to use jQuery UI Dialog and not prompt().

I got up to ADD functionality and I'm stuck. I've created a jQuery UI dialog that appends a form - its triggered when 'Add item' is clicked. Then The action for clicking 'yes' in the form needs to return what was in the input. I am unable to retrieve the value and there is no server side technology (like PHP) involved. function add_item() in answers.js is where I am working now.

I also don't know why, but an additional input box appears on the bottom of my html page after clicking 'Add item' (it should only append to the form )

*Note: CRUD functions begin after document.ready...lower on the page. Also, besides the one default item in index.html list items are originally from a JSON file *

answer.js

   $(document).ready(function()
    {

///////// REMOVE ALL  ////////////
    $(document).on("click", "div a:nth-of-type(3)", function(e)
    {
        e.preventDefault();
        remove_all();
    });
    $("div a:nth-of-type(3)").click(remove_all);

    ///////// ADD ITEM  ////////////
    $(document).on("click", "#add_item", function(e)
    {
          e.preventDefault();
          add_item();
    });
    $("#add_item").click(add_item);

///////// LOAD ALL ////////////
        $(document).on("click", "div a:nth-of-type(2)", function(e)
        {
            e.preventDefault();
            load_all();
        });

///////// REMOVE ITEM  ////////////
        $(document).on("click", "#my_list a", function(e)
        {
            e.preventDefault();
            var current_item = $(this).parent();
            remove_item(current_item);
        });
        $("#my_list a").click(remove_item(current_item));

///////// EDITABLE ITEM  ////////////

});

/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item()
{

$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');

//  JQUERY UI DIALOG
  $( "#dialog-form" ).dialog({
    resizable: false,
    title:'Add new item',
    height:240,
    width:260,
    modal: true,
    buttons: {
      "Yes": function() {
        var test = $('#new_item').val();
         alert(test);

        $( this ).dialog( "close" );
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });

}

function remove_all()
{
      $('#my_list li').hide();
}

function load_all()
{
        $.getJSON( "myLists/myList.json", function( json )
        {
            var items = json;
            $('#my_list li').remove();

            $.each(items, function(index,the_item)
            {
              $('#my_list').append('<li>'+the_item+'<a href="#">x</a></li>')
            });
        });
}

function remove_item(current_item)
{
        // APPEND DIALOG BOX DIV
        $('<div id="dialog-confirm">').appendTo('body');

        // JQUERY UI DIALOG
        $( "#dialog-confirm" ).dialog({
          resizable: false,
          title:'Remove this item?',
          height:140,
          width:260,
          modal: true,
          buttons: {
            "Yes": function() {
              $(current_item).hide();
              $( this ).dialog( "close" );
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });
  }

INDEX.HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="answer.js"></script>
    <title>jQuery Test</title>
</head>
<body>
    <div>
        <h1>My Shopping List</h1>
        <a href="#" id="add_item">Add Item</a> | <a href="#">Load List</a> | <a href="#">Clear List</a>
        <ul id="my_list">
            <li>Brand New Shoes <a href="#">x</a></li>
        </ul>
    </div>
</body>
</html>

I don't see a restriction on calling add_item() more than once, which means you could potentially have more than one element with the same id (and that's not valid). This probably isn't causing your problem (although it could result in unexpected behavior), but you should re-work your structure and use classes instead. — devlin carnate
– devlin carnate, Commented Feb 16, 2016 at 15:40
Also, the basic premise of getting the value from your dialog is working fine. See here: JS Fiddle Demo — devlin carnate
– devlin carnate, Commented Feb 16, 2016 at 15:46

Twisty · Accepted Answer · 2016-02-16 19:08:09Z

Offering a few updates that I think might help:

Working Example: https://jsfiddle.net/Twisty/5g72nncw/

$(document).ready(function() {

  ///////// REMOVE ALL  ////////////
  $(document).on("click", "div a:nth-of-type(3)", function(e) {
    e.preventDefault();
    remove_all();
  });
  $("div a:nth-of-type(3)").click(remove_all);

  ///////// ADD ITEM  ////////////
  $(document).on("click", "#add_item", function(e) {
    e.preventDefault();
    console.log("Running Add Item.");
    add_item();
  });
  $("#add_item").click(add_item);

  ///////// LOAD ALL ////////////
  $(document).on("click", "div a:nth-of-type(2)", function(e) {
    e.preventDefault();
    load_all();
  });

  ///////// REMOVE ITEM  ////////////
  $(document).on("click", "#my_list a", function(e) {
    e.preventDefault();
    var current_item = $(this).parent("li");
    remove_item(current_item);
  });
  //$("#my_list a").click(remove_item(current_item));

  ///////// EDITABLE ITEM  ////////////

});

/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item() {
  if ($("#dialog-form").length == 0) {
  console.log("Dialog not found, creating new Dialog.");
    var newDialog = $("<div>", {
      id: "dialog-form"
    });
  } else {
  console.log("Dialog Found.");
    var newDialog = $("#dialog-form");
    newDialog.dialog("open");
    return true;
  }
  newDialog.append("<label style='display: block;'>Add your item:</label><input type='text' id='new_item' />");
  //$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');

  //  JQUERY UI DIALOG
  newDialog.dialog({
    resizable: false,
    title: 'Add new item',
    height: 240,
    width: 260,
    modal: true,
    autoOpen: false,
    buttons: [{
      text: "Yes",
      click: function() {
        var test = $('#new_item').val();
        console.log(test);
        $("#my_list").append("<li>" + test + " <a href='#'>x</a></li>");
        $(this).dialog("close");
        $('#new_item').val("");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
        $('#new_item').val("");
      }
    }]
  });
  //$("body").append(newDialog);
  newDialog.dialog("open");
}

function remove_all() {
  $('#my_list li').remove();
}

function load_all() {
  $.getJSON("myLists/myList.json", function(json) {
    var items = json;
    $('#my_list li').remove();

    $.each(items, function(index, the_item) {
      $('#my_list').append('<li>' + the_item + '<a href="#">x</a></li>')
    });
  });
}

function remove_item(current_item) {
  // APPEND DIALOG BOX DIV
  $('<div id="dialog-confirm">').appendTo('body');

  // JQUERY UI DIALOG
  $("#dialog-confirm").dialog({
    resizable: false,
    title: 'Remove this item?',
    height: 140,
    width: 260,
    modal: true,
    buttons: {
      "Yes": function() {
        $(current_item).hide();
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
}

When removing an item, you want to pass the <li> to your function. This way it is removed from the <ul>.

When adding the item, I did not append the <div> to the body. I noticed when you appended the <div>, since it was not in the DOM when the page loaded, it does not get initialized as a .dialog() and thus is rendered into the HTML. My method avoids this.

Nothing wrong with the way you create the buttons, yet this is more specific and is how it is described by the UI API: http://api.jqueryui.com/dialog/#option-buttons

Hope this helps.

I wound up re-writing the program since I was having issues, but thank you for sharing this fix.

Collectives™ on Stack Overflow

Retrieve input value from jQuery UI dialog box

answer.js

INDEX.HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

answer.js

INDEX.HTML

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related