I am creating a demo in which button clicks trigger the creation of rows. I want to edit the row's text when I click the generated row "it generate another row inside container". Can we give a option to change the text of row while clicking the edit button? It some thing open pop up when your press done it save the text on same id?
function createTestCase(testCaseName, iscreatedFromScript, jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow"><a href="#" style="color: #ffffff!important;">' + testCaseName + '</a><a class="delete deleteTestCase_h"></a><button class="editclass" style="width:200px !important">edit</button ></li>' + '</ul>' + '</div>';
$('#testCaseContainer').append(html);
var elem = document.getElementById('testCaseContainer'); // just to scroll down the line
elem.scrollTop = elem.scrollHeight;
}
Working example: http://jsfiddle.net/Gajotres/k7zJ4/5/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<div class="contentsubbox" id="testCaseContainer">
</div>
<input type="button" class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;" value="Add Test Case"/>
<div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div data-role="fieldcontain">
<label for="testCaseIDValue">Text Case ID:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase"/>
</div>
<a href="#" data-role="button" id="donePopUp">Done</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#addTestCase', function (e) {
$("#testCaseId").popup("open");
//createTestCase("trdt",false,null);
});
$(document).on('click', '#donePopUp', function (e) {
$("#testCaseId").popup("close")
});
$( "#testCaseId" ).on({
popupafterclose: function() {
if($('#testCaseIDValue').val().length > 0) {
createTestCase($('#testCaseIDValue').val(),false,null);
}
}
});
});
function createTestCase(testCaseName,iscreatedFromScript,jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow"><a href="#" style="color: #ffffff!important;">' + testCaseName + '</a><a class="delete deleteTestCase_h"></a><button class="editclass" style="width:200px !important">edit</button ></li>' + '</ul>' + '</div>';
$('#testCaseContainer').append(html);
var elem = document.getElementById('testCaseContainer'); // just to scroll down the line
elem.scrollTop = elem.scrollHeight;
}
$(document).on('click', '.clickTestCaseRow', function (e) {
var clickId=this.id;
e.stopPropagation();
});
$(document).on('click', '.clickTestCaseRow', function (e) {
var clickId=this.id;
e.stopPropagation();
});
#testCaseId {
margin-top: 170px;
width: 400px !important;
margin-left: 150px !important;
}
Tell me if you need anything else.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.