

monacaにて  
ボタンクリックでフォームのダイアログを出す  
↓  
入力  
↓  
新しくボタンが出来る  
これを３回ほど繰り返したいと思っています。

<http://codepen.io/anon/pen/KpNVNr>

[code]

    $(function() {
    
      var dialogTable = $('#jquery-ui-dialog-table');
      var nextIndex = 0;
      var params = [
        {
          tag: 1,
          nextLbl: '飲み終わり予定時刻は？',
          nextTag: 2
        },
        {
          tag: 2,
          nextLbl: '分解完了の予定時刻は？'
        },
        {
          tag: 3
          
        },
       
      ]
      
      // クリックイベント追加
      function addClickEvent(obj, param) {
        obj.click(function() {
          $('#jquery-ui-dialog').data('opener', param).dialog('open');
        });
      }
    
      $('button', '.jquery-ui-button').button();
      // ボタン1
      addClickEvent($('#jquery-ui-dialog-opener'), params[nextIndex]);
      nextIndex++;
    
      $('#jquery-ui-dialog').dialog({
        autoOpen: false,
        width: 350,
        show: 'explode',
        hide: 'explode',
        modal: true,
        open: function(event, ui) {
            
          var obj = $('li#id' + $.data(this, 'opener').tag, dialogTable);
          if ($(obj).attr('id') !== void(0)) {
            $('#datetimepicker').val($('span', obj).first().text());
            $('#jquery-ui-dialog-form-comment').val($('span', obj).last().text());
          }
          
      });
        },
        close: function() {
          $('#datetimepicker').val('');
          $('#jquery-ui-dialog-form-comment').val('');
        },
        buttons: {
          '追加': function(event, ui) {
            var name = $('#datetimepicker');
            var comment = $('#jquery-ui-dialog-form-comment');
            var text = $("name").val();
            var pr = {
            name:text,   
        }
        
            if (name.val() || comment.val()) {
              var opener = $.data(this, 'opener');
              var li = $('li#id' + opener.tag, dialogTable);
              if ($(li).attr('id') !== void(0)) {
                $('span', li).first().text(name.val());
                $('span', li).last().text(comment.val());
              } else {
                dialogTable.append($('<li>').attr('id', 'id' + opener.tag).append('<span>' + name.val() + '</span>  <span>' + comment.val()));
                if (opener.nextLbl !== void(0)) {
                  dialogTable.append('<li>' + opener.nextLbl);
                  var btn = $('<button id="jquery-ui-dialog-opener">追加</button>');
                  addClickEvent(btn, params[nextIndex]);
                  nextIndex++;
                  $('li:last', dialogTable).append(btn);
                }
              }
              $(this).dialog('close');
            }
            $(this).dialog('close');
          },
          'キャンセル': function() {
            $(this).dialog('close');
          }
        }
      });
    });
[/code]

[code]

    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
    
    </head>
    
    <body>
      <div data-role="page" id="home">
        <div data-role="header">
          <h1>ホーム</h1>
        </div>
        <div data-role="content">
    
          <ul id="jquery-ui-dialog-table" class="ui-widget ui-widget-content">
            <li id="table-th-name">朝？
              <button id="jquery-ui-dialog-opener">追加</button>
            </li>
    
          </ul>
          <div id="result"></div>
          <div id="result2"></div>
          <div id="result3"></div>
    
          <button id="kekka">確認</button>
        </div>
        <div data-role="content">
    
        </div>
    
        <div id="jquery-ui-dialog" title="追加">
          <form>
            <fieldset>
              <p>入力して追加ボタンを押してください。</p>
              <p>
                <label for="jquery-ui-dialog-form-name"></label>
                <input type="date" name="jquery-ui-dialog-form-name" id="datetimepicker" class="text ui-widget-content ui-corner-all" />
              </p>
              <p>
                <label for="jquery-ui-dialog-form-comment"></label>
                <input type="time" name="jquery-ui-dialog-form-comment" id="jquery-ui-dialog-form-comment" class="text ui-widget-content ui-corner-all" />
              </p>
            </fieldset>
          </form>
        </div>
      </div>
    </body>
[/code]

コードは上記になります

一度フォームを入力してappendで新たにボタンを出すところまでは出来たのですが  
このボタンをクリックで再度フォームを出すことができません。  
どうすればいいでしょうか。  
また一度入力したフォームに関しては再度入力すると上書きされるようにしたいです。

よろしくお願い致します。


CC BY-SA 4.0
2015-05-25T10:38:03.147
10592
2019-12-13T19:42:15.047
2019-12-13T19:42:15.047
32986
9869
question
monaca jquery jquery-ui
monacaでフォームのダイアログを繰り返し出したい


> 一度フォームを入力してappendで新たにボタンを出すところまでは出来たのですが  
>  このボタンをクリックで再度フォームを出すことができません。

ここの部分ついての回答としては、新たに追加したボタンにクリックイベントを設定していなかったのが原因だと思います。

> また一度入力したフォームに関しては再度入力すると上書きされるようにしたいです。

こちらについては、  
・何個めのボタンが押されたか  
・そのボタンに対応している表示位置はどこか  
を取得する必要がありそうです。

一応、サンプルを作成してみました。  
途中の判定やボタン追加の処理がだいぶ苦しいですが、その辺はご容赦ください。

[code]

    $(function() {
    
      var dialogTable = $('#jquery-ui-dialog-table');
      var nextIndex = 0;
      var params = [
        {
          tag: 1,
          nextLbl: '昼？'
        },
        {
          tag: 2,
          nextLbl: '夜？'
        },
        {
          tag: 3,
          nextLbl: '翌朝？'
        },
        {
          tag: 4
        },
      ]
      
      // クリックイベント追加
      function addClickEvent(obj, param) {
        obj.click(function() {
          $('#jquery-ui-dialog').data('opener', param).dialog('open');
        });
      }
    
      $('button', '.jquery-ui-button').button();
      // ボタン1
      addClickEvent($('#jquery-ui-dialog-opener'), params[nextIndex]);
      nextIndex++;
    
      $('#jquery-ui-dialog').dialog({
        autoOpen: false,
        width: 350,
        show: 'explode',
        hide: 'explode',
        modal: true,
        open: function(event, ui) {
          var obj = $('li#id' + $.data(this, 'opener').tag, dialogTable);
          if ($(obj).attr('id') !== void(0)) {
            $('#datetimepicker').val($('span', obj).first().text());
            $('#jquery-ui-dialog-form-comment').val($('span', obj).last().text());
          }
        },
        close: function() {
          $('#datetimepicker').val('');
          $('#jquery-ui-dialog-form-comment').val('');
        },
        buttons: {
          '追加': function(event, ui) {
            var name = $('#datetimepicker');
            var comment = $('#jquery-ui-dialog-form-comment');
            if (name.val() || comment.val()) {
              var opener = $.data(this, 'opener');
              var li = $('li#id' + opener.tag, dialogTable);
              if ($(li).attr('id') !== void(0)) {
                $('span', li).first().text(name.val());
                $('span', li).last().text(comment.val());
              } else {
                dialogTable.append($('<li>').attr('id', 'id' + opener.tag).append('<span>' + name.val() + '</span> : <span>' + comment.val()));
                if (opener.nextLbl !== void(0)) {
                  dialogTable.append('<li>' + opener.nextLbl);
                  var btn = $('<button id="jquery-ui-dialog-opener">追加</button>');
                  addClickEvent(btn, params[nextIndex]);
                  nextIndex++;
                  $('li:last', dialogTable).append(btn);
                }
              }
              $(this).dialog('close');
            }
            $(this).dialog('close');
          },
          'キャンセル': function() {
            $(this).dialog('close');
          }
        }
      });
    });
[/code]

[code]

    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
        <div data-role="header">
          <h1>ホーム</h1>
        </div>
        <div data-role="content">
          <ul id="jquery-ui-dialog-table" class="ui-widget ui-widget-content">
            <li id="table-th-name">朝？
              <button id="jquery-ui-dialog-opener">追加</button>
            </li>
          </ul>
        </div>
        <div data-role="content">
          <div data-role="footer">
            <h4>Copyright </h4>
          </div>
        </div>
    
        <div id="jquery-ui-dialog" title="追加">
          <form>
            <fieldset>
              <p>入力して追加ボタンを押してください。</p>
              <p>
              <label for="jquery-ui-dialog-form-name"></label>
              <input type="date" name="jquery-ui-dialog-form-name" id="datetimepicker" class="text ui-widget-content ui-corner-all" />
              </p>
              <p>
                <label for="jquery-ui-dialog-form-comment"></label>
                <input type="time" name="jquery-ui-dialog-form-comment" id="jquery-ui-dialog-form-comment" class="text ui-widget-content ui-corner-all" />
              </p>
            </fieldset>
          </form>
        </div>
      </div>
    </body>
[/code]


CC BY-SA 3.0
2015-05-25T13:50:17.597
10607
2015-06-03T05:39:42.630
2015-06-03T05:39:42.630
3516
3516
10592
answer