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
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>
© 2024 OneMinuteCode. All rights reserved.