Posting from multiple dynamically created HTML textarea elements - javascript

Given the following snippet:
out.println("<form action=" + "./post" + " " + "method=" + "post" + " " + "id=" + "tweetForm" + ">");
for (int i = 1; i <= twParser.currentTweetIndex; i++) {
output = twParser.tweetArray[i] + newLine;
out.println("<p>");
out.println("<textarea" + " " + "name=text" + " " + "id=\"styled\"" + " " + "maxlength=140" + " " + "cols=" + "140" + " " + "rows=" + "1" + " " + "tag=" + "text_" + String.valueOf(i) + " " + "form=" + "tweetForm" + " " + "onfocus=\"setbg('#e5fff3');\" onblur=\"setbg('white')\"" + ">" + output + "</textarea>");
out.println("<span class=label-style-countdown" + " " + "id=" + "chars" + String.valueOf(i) + ">" + String.valueOf(140 - twParser.tweetArray[i].length()) + "</span> characters remaining");
out.println("<p>");
}
out.println("<input type=" + "submit" + " " + "name=" + "post" + " " + "value=" + "post" + " " + "style=\"float: left;\"" + "/>");
out.println("<button type=\"reset\" value=\"Reset\">Reset</button>"
...that creates HTML multiple textarea elements and posts them to a servlet. But since all the textareas have the same name, only the contents of the first textarea are posted.
Is there a way to post them all?
Thanks


To have multiple inputs from same name you can use name array like
<textarea name="text[]">You text here</textarea>
which will post all the values having same name as an array.
PS: This can be done with any input types expect radio buttons


On this line:
out.println("<textarea" + " " + "name=text" + " " ...
Append i to the name of the textarea, such that the names increase as text1, text2 etc.
out.println("<textarea" + " " + "name=text" + i.toString() + " " ...
Perform the same loop on the server when receiving the POST request to receive from each textarea.

Related

Android Lollipop WebView does not show <iframe> content

I receive from the server xhtml code which I want to show in Android app like ebook reader. For this the Monocle library was chosen.
Next I prepare webview with follow code:
contentView.addJavascriptInterface(new LectureJSInterface(), "Android");
contentView.getSettings().setAllowFileAccess(true);
contentView.getSettings().setJavaScriptEnabled(true);
contentView.setBackgroundColor(0xFFECECEC);
contentView.setWebChromeClient(new WebChromeClient());
contentView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Global.dismissProgressDialog();
}
});
After this I download the xhtml code from the server and add to it JS code for working with Monocle:
private String prepareCode(String code) {
if ((code == null) || code.equals("")) return "";
String newCode = code.substring(code.indexOf("<html"), code.indexOf("<head>")+6);
newCode = newCode.concat(
"<script src=\"file:///android_asset/monocore.js\"></script>\n" +
"<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/monocore.css\" />\n" +
"<style>\n" +
" #reader {\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" border: 0px solid #000;\n" +
" }\n" +
"</style>\n" +
"<script>\n" +
"\n" +
" var isNightMode = false;\n" +
" var isFirstLoading = false;\n" +
" var startPageNumber = 1;\n" +
"\n" +
" function setSettingsForFirstLoading(fontSize, pageNumber, nightMode) {\n" +
" Android.printLogInfo('setSettingsForFirstLoading()');\n" +
" isFirstLoading = true;\n" +
" isNightMode = nightMode;\n" +
" startPageNumber = pageNumber;\n" +
" window.changeFontSize(fontSize);\n" +
" }\n" +
"\n" +
" function changeFontSize(fontSize) {\n" +
" Android.printLogInfo('changeFontSize()');\n" +
" window.reader.formatting.setFontScale(fontSize);\n" +
" }\n" +
"\n" +
" function nightModeOn() {\n" +
" Android.printLogInfo('nightModeOn()');\n" +
" isNightMode = true;\n" +
" var i = 0;\n" +
" var frame;\n" +
" while (frame = window.reader.dom.find('component', i++)) {\n" +
" frame.contentDocument.body.style.backgroundColor = '#1F1F1F';\n" +
" frame.contentDocument.body.style.color = '#ECECEC';\n" +
" }\n" +
" }\n" +
"\n" +
" function nightModeOff() {\n" +
" Android.printLogInfo('nightModeOff()');\n" +
" isNightMode = false;\n" +
" var i = 0;\n" +
" var frame;\n" +
" while (frame = window.reader.dom.find('component', i++)) {\n" +
" frame.contentDocument.body.style.backgroundColor = '#ECECEC';\n" +
" frame.contentDocument.body.style.color = '#1F1F1F';\n" +
" }\n" +
" }\n" +
"\n" +
" function turnPage(pageNumber) {\n" +
" Android.printLogInfo('turnPage(' + pageNumber + ')');\n" +
" window.reader.moveTo({ page: pageNumber });\n" +
" }\n" +
"\n" +
" function savePercents() {\n" +
" Android.printLogInfo('savePercents()');\n" +
" Android.savePercents(window.reader.getPlace().percentAtTopOfPage());\n" +
" }\n" +
"\n" +
" function moveToPercents(percent) {\n" +
" Android.printLogInfo('moveToPercents(' + percent + ')');\n" +
" turnPage(window.reader.getPlace().pageAtPercentageThrough(percent));\n" +
" }\n" +
"\n" +
" function listenFor(evtName) {\n" +
" Monocle.Events.listen('reader', evtName, report);\n" +
" }\n" +
"\n" +
" function report(evt) {\n" +
" switch (evt.type) {\n" +
" case 'monocle:loaded':\n" +
" Android.calculateSeekBar(window.reader.getPlace().properties.component.lastPageNumber());\n" +
" break;\n" +
"\n" +
" case 'monocle:turn':\n" +
" Android.updatePagesCounter(window.reader.getPlace().pageNumber());\n" +
" break;\n" +
"\n" +
" case 'monocle:recalculated':\n" +
" if (isNightMode) nightModeOn();\n" +
" if (isFirstLoading) { isFirstLoading = false; turnPage(startPageNumber); }\n" +
" Android.calculateSeekBar(window.reader.getPlace().properties.component.lastPageNumber());\n" +
" Android.updatePagesCounter(window.reader.getPlace().pageNumber());\n" +
" break;\n" +
" }\n" +
" }\n" +
"\n" +
" function init() {\n" +
" var options = {\n" +
" flipper: Monocle.Flippers.Slider\n" +
" }\n" +
"\n" +
" listenFor('monocle:turn');\n" +
" listenFor('monocle:loaded');\n" +
" listenFor('monocle:recalculated');\n" +
"\n" +
" window.reader = Monocle.Reader('reader', null, options);\n" +
" }\n" +
"\n" +
" Monocle.Events.listen(window, 'load', init);\n" +
"</script>\n");
newCode = newCode.concat(code.substring(code.indexOf("<head>") + 6, code.indexOf("<body>") + 6));
newCode = newCode.concat("<div id=\"reader\">");
newCode = newCode.concat(code.substring(code.indexOf("<body>") + 6, code.indexOf("</body>")));
newCode = newCode.concat("</div>");
newCode = newCode.concat(code.substring(code.indexOf("</body>")));
return newCode;
}
After finishing this task the WebView loads it:
contentView.loadDataWithBaseURL(baseUrl, prepareCode(code), "text/html", "UTF-8", null);
What I have as results? I tested this app on six devices with Android 4.x and 5.x. On Android 4.x the entire content is shown correctly, but on Android 5.x I see a blank page. I should notice that the xhtml code was loaded because I can call JS-functions and get its results via JS Interface.
Are there any ideas about ways to fixing this bug?
Thanks in advance!

You can try uninstalling the webview system update.
or
Try monocle 2.3.1
or
https://github.com/joseph/Monocle/issues/259

Javascript method argument escape

The below span tag containing an onclick event is not working
var test="<span onClick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />"
the above escaped string has some problems with the method call.
How can I fix it?

If you're creating this in JavaScript to create an element, then the first single-quote needs to be escaped.
function gotoNode(name, xaxis, yaxis, detail, status) {
alert("name = " + name + "\r\nxaxis = " + xaxis + "\r\nyaxis = " + yaxis + "\r\ndetail = " + detail + "\r\nstatus = " + status);
}
var result = { name: "name", xaxis: "xaxis", yaxis: "yaxis", detail: "detail", status: "status" };
var htmlText = '<input value="Button" type="button" onclick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />';
$("#lonely").append(htmlText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lonely"></div>
Generally speaking, whatever quote type you begin with (out of ' or "), you need to escape the same type that you want to use within the string and not escape the same type to terminate the string. You can leave the other type without escapes.
For your edited version, this should work if you want those result variables to be replaced with their values.
var test = "<span onclick=\"gotoNode('" + result.name + "','" + result.xaxis + "','" + result.yaxis + "','" + result.detail + "','" + result.status + "')\" />";

Do you use php to generate the output?
Then you should try
echo "<input type=\"button\" onClick=\"gotoNode(\" + result.name + \",\" +
result.xaxis + \",\" + result.yaxis + \",\" + result.detail + \",\" +
result.status + \")\" />";

How to put a string in input type="text" with jQuery?

I don't understand why my code doesn't work: I try to put a string into input type="text" with jQuery and it doesn't work. It separates different elements of the string when there are space in properties for the input.
My jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$(".btnEditSerie").click(function (e) {
e.preventDefault();
var tr = $(this).closest('tr');
var $GroupingId = tr.find('#item_GroupingId').val()
localStorage['GroupingId'] = $GroupingId;
var $Title = tr.find('#item_Title').val();
var $Description = tr.find('#item_Description').val();
var $Image = tr.find('#item_Image').val();
$("#b").hide("slow");
$("#btnretour").show();
$('#SerieEdit').append("<label id=" + 'test2' + ">" + "Modification de :" + " " + $Title+ "</label>");
$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />"
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>"
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");
$("#SerieEdit").show();
$("#TextEdit").show();
})
$('#btnRet').click(function() {
$("#b").show("slow");
$("#SerieEdit").hide();
$("#TextEdit").hide();
$("#SerieEdit").empty();
$("#TextEdit").empty();
$("#btnretour").hide();
})
});
</script>
With val(), for instance $Title must be a string, and when i put $Title in the .Append() it returns a thing like that:
My sad html code:
<h2>EditRefSerie</h2>
<div id="SerieEdit">
<div id="TextEdit">
<label>Titre : </label>
<input id="SerieNewName" type="text" thrones="" of="" value="Games">
<label>Description : </label>
<input id="SerieNewDescription/" type="text" thrones="" of="" value="games">
<label>Image : </label>
<input id="SerieNewImage/" type="file" value="Dessin1.jpg">
</div>
<div id="btnretour" style="">
For the string "Games of thrones" it returns:
<input id="SerieNewName" type="text" thrones="" of="" value="Games">
Have you ideas how to fix it? Do I use jQuery correctly?

You're forgetting quotes:
Your JS:
$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />"
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>"
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");
Should be:
$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Title + "' id=" + 'SerieNewName' + " />"
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Description.toString() + "' id=" + 'SerieNewDescription' + "/>"
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value='"+$Image.toString()+ "' id=" +'SerieNewImage'+"/>");
Note the added quotes for the value attributes.
Bonus tip: there's no need to put input types in a concatenated string. It's much more readable if you do:
"<input type='text' value='" + val + "' />"
instead of:
"<input type='" + 'text' + "' value='" + val + "' />"
like you're doing.

You aren't using quotes around your attributes properly e.g.
$('#SerieEdit').append("<label id='" + test2 + "'>" + "Modification de :" + " " + $Title+ "</label>");

ID is unique in HTML page. So you don't need to "find" for retrieve your value.
Also, the variable don't need a "$"
Do something like:
$(document).ready(function () {
$(".btnEditSerie").click(function (e) {
e.preventDefault();
var GroupingId = $('#item_GroupingId').val(); // not need to find if you have a id.. id is unique in the HTML page.
localStorage['GroupingId'] = $GroupingId;
var Title = $('#item_Title').val();
var Description = $('#item_Description').val();
var Image = $('#item_Image').val();
$("#b").hide("slow");
$("#btnretour").show();
$('#SerieEdit').append("<label id='test2'>Modification de : " + Title + "</label>");
$('#TextEdit').html("<label>Titre : </label> <input type='text' value=" + Title + " id='SerieNewName' /> <label> Description : </label><input type='text' value=" + Description + " id='SerieNewDescription'/><label>Image : </label><input type='file' value="+ Image + " id='SerieNewImage'/>");
$("#SerieEdit").show();
$("#TextEdit").show();
});
$('#btnRet').click(function(){
$("#b").show("slow");
$("#SerieEdit").hide();
$("#TextEdit").hide();
$("#SerieEdit").empty();
$("#TextEdit").empty();
$("#btnretour").hide();
})
});

set background to dynamically created check box and text in div

I want to apply background to each check box and separated by some space. Is it possible to apply background to dynamically created check box in div
I have to set background to this line.
'<input type="checkbox" value="'+ ar2[i] + " " + " " + ar1[i] + '"/>'
+ ar1[i] + " " + " " + ar2[i] + '</br>' + '</br>' + '</br>'
for ( var i = 0; i < ar2.length; i++) {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input type="checkbox" value="'+ ar2[i] + " " + " " + ar1[i] + '"/>' + ar1[i] + " " + " " + ar2[i] + '</br>' + '</br>' + '</br>' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
}

Try;
classx="classname";
for ( var i = 0; i < ar2.length; i++) {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input class="'+classx+'" type="checkbox" value="'+ ar2[i] + " " + " " + ar1[i] + '"/>' + ar1[i] + " " + " " + ar2[i] + '</br>' + '</br>' + '</br>' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
}
You may create custom classes in css and assign one class name to classx and it will apply the class to the dynamically created checkbox. The checkbox will get styled accordingly.

Function in JavaScript that outputs concat url to YUI Chart Library Output

Trying to properly write a function in JavaScript that outputs a concat'd url to Chart Library Output (for chart re-rendering)... based on selected options in dropdown list.
Problem: I am not getting the chart to re-render with the concatenated url (which should be sent each time an option is selected in the dropdown).
JavaScript code in head:
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest(); // instantiate request
xmlHttp.open( "GET", theUrl, false ); // open url
xmlHttp.send( null ); // sending nothing
return xmlHttp.responseText; // return url's data as text
};
function selectFabric(){
var urlString = "http://localhost:8083/tbl/sparqlmotion?id=LiabilityChart&arg1=";
var fabrics = document.getElementById('fabrics');
var selectedFabric = fabrics.options[fabrics.selectedIndex];
var linkAddTogether = [urlString + selectedFabric.value];
var linkResult = linkAddTogether[0];
var result = httpGet(linkResult);
if (selectedFabric.value != "nothing"){
return linkResult; // update begins // document.write(linkAddTogether)
};
};
function revive (key, value) {
if (value.datatype == "http://www.w3.org/2001/XMLSchema#double" || // if datatype is this
value.datatype == "http://www.w3.org/2001/XMLSchema#integer" || // or, this
value.datatype == "http://www.w3.org/2001/XMLSchema#float") // or, this
{
return (parseInt(value.value)) // if '#double', '#integer', or '#schema', then: 'vars' label + convert the datatype's float value to integer
}
else if (value.type == 'literal')
{
return (value.value) // if datatype's value is a literal: 'vars' label + return as a string
}
else if (value.datatype == 'http://www.w3.org/2001/XMLSchema#date')
{
return value.value // if "XMLSchema#date's" value is a literal: 'vars' label + return as a string
}
else
{
return value // if datatype is anything else: 'vars' label + return value as a string
}
};
var scriptHead = ["YUI().use('charts',function(Y){var myDataValues=\n\n["];
var scriptTail = ["\n];\n\nvar styleDef={series:{Stock:{line:{color:'#EEB647'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#222',alpha:0,wmode:'transparent'},over:{fill:{color:'#eee'},border:{color:'#000'},width:9,height:9}}},Liability:{line:{color:'#171944'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#222',alpha:0,wmode:'transparent'},over:{fill:{color:'#eee'},border:{color:'#000'},width:9,height:9}}},Shipment:{line:{color:'#ff0000',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#ff0000',alpha:0,wmode:'transparent'},over:{fill:{color:'#ff0000',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}},Production:{line:{color:'#FFD700',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#FFD700',alpha:0,wmode:'transparent'},over:{fill:{color:'#FFD700',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}},Order:{line:{color:'#006400',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#006400',alpha:0,wmode:'transparent'},over:{fill:{color:'#006400',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}}}};var myAxes={dateRange:{keys:['date'],position:'bottom',type:'category',title:'Date Range',styles:{majorTicks:{display:'none'},label:{rotation:-45,margin:{top:5}},title:{fontSize:'90%'}}}};var mychart=new Y.Chart({dataProvider:myDataValues,interactionType:'planar',render:'#mychart',categoryKey:'Date',styles:styleDef,categoryType:'time',horizontalGridlines:{styles:{line:{color:'#fff'}}},verticalGridlines:{styles:{line:{color:'#fff'}}}})});\n\n"];
var simpleHead = [scriptHead];
var simpleTail = [scriptTail];
var oldData = JSON.parse(result, revive);
HTML code for form (in body):
form style="width:200px; color:#333; padding-right:5px; padding-bottom:2px; padding-left:55px; margin-top:0px; clear:none;" name="properties" id="properties">
select style="width:160px; color:#333; clear:none; display:block;" name="fabrics" id="fabrics" onChange="selectFabric()">
option value="nothing">Select Fabric END option
option value="KOD23-4074-LV">KOD23-4074-LV END option
option value="SGOD2-2858-LV">SGOD2-2858-LV END option
option value="W-897-LV">W-897-LV END option
option value="FF-4084-LV">FF-4084-LV END option
END select
END form
JavaScript code for chart (write script in body to render YUI chart plug-in):
document.write('\x3Cscript type="text/javascript" id="source">');
document.write(simpleHead[0] + '\n{Date: "' + oldData.results.bindings[0].date + '", Liability: ' + oldData.results.bindings[0].liability + ", Stock: " + oldData.results.bindings[0].stock + ", " + oldData.results.bindings[0].event + ": " + oldData.results.bindings[0].current + "}," + "\n\n");
document.write('\n{Date: "' + oldData.results.bindings[1].date + '", Liability: ' + oldData.results.bindings[1].liability + ", Stock: " + oldData.results.bindings[1].stock + ", " + oldData.results.bindings[1].event + ": " + oldData.results.bindings[1].current + "}," + "\n\n");
document.write('\n{Date: "' + oldData.results.bindings[2].date + '", Liability: ' + oldData.results.bindings[2].liability + ", Stock: " + oldData.results.bindings[2].stock + ", " + oldData.results.bindings[2].event + ": " + oldData.results.bindings[2].current + "}," + "\n\n");
document.write('\n{Date: "' + oldData.results.bindings[3].date + '", Liability: ' + oldData.results.bindings[3].liability + ", Stock: " + oldData.results.bindings[3].stock + ", " + oldData.results.bindings[3].event + ": " + oldData.results.bindings[3].current + "}," + "\n\n");
document.write('\n{Date: "' + oldData.results.bindings[4].date + '", Liability: ' + oldData.results.bindings[4].liability + ", Stock: " + oldData.results.bindings[4].stock + ", " + oldData.results.bindings[4].event + ": " + oldData.results.bindings[4].current + "}," + "\n\n");
document.write('\n{Date: "' + oldData.results.bindings[5].date + '", Liability: ' + oldData.results.bindings[5].liability + ", Stock: " + oldData.results.bindings[5].stock + ", " + oldData.results.bindings[5].event + ": " + oldData.results.bindings[5].current + "}," + "\n\n");
document.write('\n{Date: "' + oldData.results.bindings[6].date + '", Liability: ' + oldData.results.bindings[6].liability + ", Stock: " + oldData.results.bindings[6].stock + ", " + oldData.results.bindings[6].event + ": " + oldData.results.bindings[6].current + "}" + simpleTail[0] + "\n\n");
document.write('\x3C/script>');

Categories