javascript - 从 Jquery UI 对话框中检索输入值

我正在开发一个小项目(只是一个练习示例 - 不用于实际使用)。它是一个非常简单的 CRUD 应用程序，我不会大声更改index.html。还必须使用 JQuery UI 对话框而不是 Prompt()。

我开始使用 ADD 功能，但我陷入了困境。我创建了一个附加表单的 Jquery UI 对话框 - 单击“添加项目”时会触发该对话框。然后，在表单中单击"is"的操作需要返回输入中的内容。我无法检索该值，并且不涉及服务器端技术(如 php)。 answers.js 中的 function add_item() 是我现在工作的地方。

我也不知道为什么，但点击“添加项目”后，我的 html 页面底部会出现一个额外的输入框(它应该只附加到表单中)

*注意:CRUD 函数在页面下方的 document.ready... 之后开始。此外，除了index.html 中的一个默认项之外，列表项最初来自 json 文件 *

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>

最佳答案

提供一些我认为可能有帮助的更新:

工作示例: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");
      }
    }
  });
}

删除项目时，您需要传递 <li>到你的函数。这样它就从 <ul> 中删除了。 .

添加项目时，我没有附加 <div>到body 。我注意到当你附加 <div> 时，由于页面加载时它不在 DOM 中，因此它不会被初始化为 .dialog()并因此呈现为 HTML。我的方法避免了这种情况。

创建按钮的方式没有问题，但这更具体，并且是 UI API 的描述方式: http://api.jqueryui.com/dialog/#option-buttons

希望这有帮助。

关于javascript - 从 Jquery UI 对话框中检索输入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35436003/

javascript - 从 Jquery UI 对话框中检索输入值

answer.js

INDEX.HTML

上一篇：javascript - 如何在 ThreeJS 中从路径或二维数组绘制墙壁？

下一篇：javascript - Ng-repeat 和 Ng-show 以 Angular 显示