javascript - how to edit the text of row in jQuery +JQM -
this question has answer here:
- binding click event of row jquery 1 answer
i creating demo in make row in button click .i want edit it's text when click generated row "it generate row inside container".can give option change text of row while clicking edit button .it thing open pop when press done save 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'); // scroll down line elem.scrolltop = elem.scrollheight; }
please find below sample code replicate scenario want achieve in code using jqm.save below code html , click on add text case , click on change text button
<!doctype html> <html> <head> <title>my page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role=" content "> <div class="contentsubbox" id="testcasecontainer"> <div class="testcaselist_row"><ul id="testcaselists" data-role="listview" data-theme="a"></ul></div> </div> </div> <footer id="firstpagefooter"> <button class="addtestbtn" id="addtestcase" data-theme="a" style="color: #ffffff!important;">add test case</button> </footer> </div> <script> $( document ).ready(function() { console.log( "ready!" ); }); $('#addtestcase').click(function () { createtestcase("trdt",false,null); }); $('#testcaselists').delegate('li', 'tap', function () { console.log('put text changing logic here'); $(this).find('a:first').text('text u want change');//text function shud contain text }); function createtestcase(testcasename,iscreatedfromscript,jsonobject) { console.log("create test case"); var id; if ($("div.contentsubbox").find("ul li").length == 0){ id = "tc_1"; } else { id = $("#testcasecontainer").find("ul 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 = "<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'>change text</button ></li>"; $('#testcaselists').append(html); $('#testcaselists').listview('refresh'); var elem = document.getelementbyid('testcasecontainer'); // scroll down line elem.scrolltop = elem.scrollheight; } </script> </body> </html>
add comments if need further help.
Comments
Post a Comment