I want to repeat the form dialog in monaca

At monaca
button-click to launch a form dialog
↓
Enter
↓
A new button is created
I would like to repeat this about three times.

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

$(function(){

  vardialogTable=$('#jquery-ui-dialog-table');
  var nextIndex=0;
  var params = [
    {
      tag: 1,
      NextLbl: 'What's the estimated time to finish drinking?',
      nextTag:2
    },
    {
      tag —2,
      nextLbl: 'What is the estimated time to complete the decomposition?'
    },
    {
      tag:3
      
    },
   
  ]
  
  // Add Click Event
  function addClickEvent(obj,param){
    obj.click(function(){
      $('#jquery-ui-dialog') .data('opener',param).dialog('open');
    });
  }

  $('button','.jquery-ui-button') .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){
        
      varobj=$('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: {
      'Add': function(event,ui){
        var name = $('#datetimepicker');
        var comment=$('#jquery-ui-dialog-form-comment');
        vartext=$("name").val();
        varpr = {
        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>'+comment.val()));
            if(opener.nextLbl!==void(0)){
              dialogTable.append('<li>'+opener.nextLbl);
              varbtn=$('<button id="jquery-ui-dialog-opener">add</button>');
              addClickEvent(btn, params [nextIndex]);
              nextIndex++;
              $('li:last',dialogTable).append(btn);
            }
          }
          $(this).dialog('close');
        }
        $(this).dialog('close');
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  });
});

<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>Home</h1>
    </div>
    <div data-role="content">

      <ulid="jquery-ui-dialog-table" class="ui-widgetui-widget-content">
        <liid="table-th-name"> Morning?
          <button id="jquery-ui-dialog-opener">Add</button>
        </li>

      </ul>
      <divid="result"></div>
      <divid="result2"></div>
      <divid="result3"></div>

      <button id="kekka">Verify</button>
    </div>
    <div data-role="content">

    </div>

    <divid="jquery-ui-dialog" title="Add">
      <form>
        <fieldset>
          <p> Type and press the Add button.</p>
          <p>
            <label for="jquery-ui-dialog-form-name">/label>
            <input type="date" name="jquery-ui-dialog-form-name" id="datetimepicker" class="textui-wide-contentui-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="textui-wide-contentui-corner-all"/>
          </p>
        </fieldset>
      </form>
    </div>
  </div>
</body>

The code is as above

I was able to fill in the form once and put out a new button on the append, but
You cannot submit the form again by clicking this button.
What should I do?
Also, I would like to overwrite the form I filled in once if I fill it out again.

Thank you for your cooperation.

monaca jquery jquery-ui

2022-09-29 22:44

1 Answers

I was able to fill in the form once and put out a new button on the append, but
You cannot submit the form again by clicking this button.

I think the answer to this part is that I didn't set the click event to the newly added button.

Also, I would like to overwrite the form I filled in once if I fill it out again.

See
·How many buttons were pressed
·Which display location corresponds to the button?
You may need to retrieve the .

I made a sample just in case.
Please forgive me for making decisions and adding buttons in the middle.

$(function(){

  vardialogTable=$('#jquery-ui-dialog-table');
  var nextIndex=0;
  var params = [
    {
      tag: 1,
      nextLbl: 'Daytime?'
    },
    {
      tag —2,
      nextLbl: 'Night?'
    },
    {
      tag : 3,
      nextLbl: 'Next morning?'
    },
    {
      tag —4
    },
  ]
  
  // Add Click Event
  function addClickEvent(obj,param){
    obj.click(function(){
      $('#jquery-ui-dialog') .data('opener',param).dialog('open');
    });
  }

  $('button','.jquery-ui-button') .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){
      varobj=$('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: {
      'Add': 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);
              varbtn=$('<button id="jquery-ui-dialog-opener">add</button>');
              addClickEvent(btn, params [nextIndex]);
              nextIndex++;
              $('li:last',dialogTable).append(btn);
            }
          }
          $(this).dialog('close');
        }
        $(this).dialog('close');
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  });
});

<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>Home</h1>
    </div>
    <div data-role="content">
      <ulid="jquery-ui-dialog-table" class="ui-widgetui-widget-content">
        <liid="table-th-name"> Morning?
          <button id="jquery-ui-dialog-opener">Add</button>
        </li>
      </ul>
    </div>
    <div data-role="content">
      <div data-role="footer">
        <h4>Copyright</h4>
      </div>
    </div>

    <divid="jquery-ui-dialog" title="Add">
      <form>
        <fieldset>
          <p> Type and press the Add button.</p>
          <p>
          <label for="jquery-ui-dialog-form-name">/label>
          <input type="date" name="jquery-ui-dialog-form-name" id="datetimepicker" class="textui-wide-contentui-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="textui-wide-contentui-corner-all"/>
          </p>
        </fieldset>
      </form>
    </div>
  </div>
</body>

2022-09-29 22:44

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656