how to write a JavaScript function in c# in code behind? - javascript

I have to call things from code behind.I am able to call Html from code behind like this :
Which looks Like this
<h1>cubus outperform EV Analytics</h1>
<div style="margin:0px; position:absolute; top:12px; left:0px; bottom:0px; right:0px;" id="EVObject_xml">
<object id="EVObject" name="EVObject" lang="en-US"
width="100%" height="100%" CodeBase="http://kl12ACUC/EVServer/Client/Ctrl.cab#version=11,0,0,0"
ClassId="clsid:80AC1200-0BBE-499A-A9E9-5F334DBC8E89">
<param Name="Server" Value="kl12ACUC" />
<param Name="EnableTabBar" Value="True" />
<param Name="Theme" Value="Ribbon" />
</object>
</div>
<div id="ribbon" />
<div id="backstage-container" />
And Now It Looks Like this in Code Behind
string strHTMLGrid = "";
strHTMLGrid = strHTMLGrid + "<h1>" + sHeading + "</h1>";
strHTMLGrid = strHTMLGrid + "<div id='EVObject_xml' style='margin: 0px; position: absolute; top: 12px; left: 0px; bottom: 0px; right: 0px; '>";
strHTMLGrid = strHTMLGrid + "<object name='EVObject' width='100%' height='100%' id='EVObject' codebase='" + sUrlHtml + "' lang='en-US' classid='clsid:80AC1200-0BBE-499A-A9E9-5F334DBC8E89'>";
strHTMLGrid = strHTMLGrid + "<param name='Server' value='" + sServername1 + "'>";
strHTMLGrid = strHTMLGrid + "<param name='Server' value='" + sTheme1 + "'>";
strHTMLGrid = strHTMLGrid + "<param name='Server' value='" + sHeading + "'>";
strHTMLGrid = strHTMLGrid + "</object>";
strHTMLGrid = strHTMLGrid + "</div>";
strHTMLGrid = strHTMLGrid + "<div id='ribbon'>";
strHTMLGrid = strHTMLGrid + "<div id='backstage - container'> </div>";
strHTMLGrid = strHTMLGrid + "</div>";
Now I need to call the JavaScript Function on the load of the body of this html document.The code I do have with me looks like this
function OpenCube()
{
EVObject.Enable(UIAuthorisationType.UIAuthorisationToolbar, true);
EVObject.Enable(UIAuthorisationType.UIAuthorisationTabBar, true);
EVObject.TabBarPosition = TabBarPositionType.TabBarPositionBottom;
EVObject.Allow(ActionAuthorisationType.UIAuthorisationToolbarText, false);
EVObject.ToolBar.LargeButtons = false;
EVObject.Enable(UIAuthorisationType.UIAuthorisationLocalViews, false);
EVObject.Allow(ActionAuthorisationType.ActionAuthorisationDataEntry, false);
EVObject.Allow(ActionAuthorisationType.ActionAuthorisationSaveView, true);
EVObject.Allow(ActionAuthorisationType.ActionAuthorisationExport, true);
EVObject.Allow(ActionAuthorisationType.ActionAuthorisationExportToExcel, true);
EVObject.ViewLocations = "General=/";
EVObject.object.attachEvent("NeedDataSourceCredentials", DataSourceCredentials);
EVObject.object.attachEvent("NeedServerCredentials", ServerCredentials);
EVObject.Views.Open("/Outdb/mis");
LeaveBackstage();
ExpandRibbons(false);
ShowBackstage(false);
}
1)Problem No.1 ====Now How do I call the javascript Function in C#.
2)Problem No.2===== How to call the Javascript function the load of body in which I have written the html document.

You should use RegisterStartupScript
private void Page_Load(object sender, System.EventArgs e)
{
string jScriptValidator;
jScriptValidator="<script> function ReqFieldValidator()" +
" { if (document.forms[0].txtField.value == '') \n";
jScriptValidator+="{ alert('TextBox cannot be empty') \n ";
jScriptValidator+="return false; \n";
jScriptValidator+="} \n";
jScriptValidator+=" return true \n";
jScriptValidator+=" } </script>";
Page.RegisterStartupScript("regJSval",jScriptValidator);
btnSubmit.Attributes.Add("onclick","return ReqFieldValidator()");
}
For more you can refer this page :
http://www.codeproject.com/Articles/11098/Use-Call-RegisterStartUpScript-RegisterClientScrip

As I heard from an interviewer Before visual studio 2013,people had this problem,they wanted to call javascript in code behind file.So below is one of the way using runat="server" tag.
<script runat="server">
//your java script code
</script>
Above code will be called after client side i.e it will be executed at server side

Related

dynamic form fields with javascript, php & mysql: strange error

I get an really strange error with my dynamic form field script. It is not so easy to explain, but I will do my best.
I have a HTML form with java script to add
1 select field
2 text-fields &
9 checkboxes
dynamically by clicking a link.
Every dynamic form-set create a own entry in my mysql db.
The one select field and the two text-fields are insert correctly the data into my db.
But with the 9 checkboxes, there is a mistake.
For Example: IF I create two form-sets AND i will check the each 1st check-boxes, the database entry is correctly
BUT
IF I create two form-sets AND i will check at the first form-set Checkbox 1 and on the second form-set Checkbox 2, my db-entry write the 1st and the 2nd checkbox-entry in the first (!!!) db-entry. There is no entry for the 2nd Checkbox in the second db-entry.
Maybe my screenshot will it make more understandable.
Here is my script. I really hope anybody can help me. Iam looking so long for a solution, but...
<?php
include('dbconnection.php');
?>
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src="theme/scripts/jquery.js"></script>
<script type="text/javascript" src="theme/scripts/jqueryui.js"></script>
<script type="text/javascript">
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'<strong>Artikel ' + counter + '</strong><br />'
+ '<select name="artikel[]' + '">'
+ '<option value="test1">' + 'test1' + '</option>'
+ '<option value="test2">' + 'test2' + '</option>'
+ '</select><br /><br />'
+ '<b>Beschreibung oder Anzahl:</b><br>'
+ '<input name="beschreibung[]' + '" type="text" class="login-username" /><br />'
+ '<b>Preis in €:</b><br>'
+ '<input id="preis_' + counter + '" name="preis[]' + '" type="text" class="login-username" /><br />'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Aus-/Einbau<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Aus und Einbauarbeiten<br>" id="1a_' + counter + '" name="ausein[]' + '" />'
+ '<label for="1a_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Instandsetzung<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Teil instand gesetzt<br>" id="2b_' + counter + '" name="instand[]' + '" />'
+ '<label for="2b_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Teillack<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Teillackierung<br>" id="3c_' + counter + '" name="rep[]' + '" />'
+ '<label for="3c_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Farbangleich<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Farbtonangleichung<br>" id="4d_' + counter + '" name="farb[]' + '" />'
+ '<label for="4d_' + counter + '"></label>'
+ '</div>'
+ '</span>'
// + '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Neuteil<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Neuteil wurde verbaut<br>" id="5e_' + counter + '" name="neu[]' + '" />'
+ '<label for="5e_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Beilack.<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Beilackierung<br>" id="6f_' + counter + '" name="spot[]' + '" />'
+ '<label for="6f_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Finisch<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Finischarbeit<br>" id="7g_' + counter + '" name="finisch[]' + '" />'
+ '<label for="7g_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Delle Rep.<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value=" Dellen instand gesetzt<br>" id="8h_' + counter + '" name="delle[]' + '" />'
+ '<label for="8h_' + counter + '"></label>'
+ '</div>'
+ '</span>'
// + '<div style="float: left; width: 20px;"> </div>'
+ '<span style="float: left; width: 70px; text-align: center;">'
+ 'Lederrep.<br>'
+ '<div class="roundedTwo">'
+ '<input type="checkbox" value="Lederreparatur<br>" id="9i_' + counter + '" name="leder[]' + '" />'
+ '<label for="9i_' + counter + '"></label>'
+ '</div>'
+ '</span>'
+ '<div class="decoration"></div>'
+ '<input id="renr_' + counter + '" name="renr[]' + '" type="hidden" value="' + '<?php echo $renr ?>' + '" />'
+ '<input id="datum_' + counter + '" name="datum[]' + '" type="hidden" value="' + '<?php echo $datum ?>' + '" />'
+ '<input id="jahr_' + counter + '" name="jahr[]' + '" type="hidden" value="' + '<?php echo $jahr ?>' + '" />'
+ '<input id="id1_' + counter + '" name="id1[]' + '" type="hidden" value="' + '<?php echo $id1 ?>' + '" />'
);
});
});
</script>
</head>
<body>
<?php
$id = $_GET['id'];
if (isset($_POST['submit_val'])) {
if ($_POST['artikel']) {
$post_count = count($_POST['artikel']);
for ($i=0;$i<$post_count;$i++) {
$values1 = mysql_real_escape_string($_POST['artikel'][$i]);
$values2 = mysql_real_escape_string($_POST['preis'][$i]);
$values3 = mysql_real_escape_string($_POST['beschreibung'][$i]);
$values4 = mysql_real_escape_string($_POST['ausein'][$i]);
$values5 = mysql_real_escape_string($_POST['instand'][$i]);
$values6 = mysql_real_escape_string($_POST['rep'][$i]);
$values7 = mysql_real_escape_string($_POST['farb'][$i]);
$values8 = mysql_real_escape_string($_POST['neu'][$i]);
$values9 = mysql_real_escape_string($_POST['spot'][$i]);
$values10 = mysql_real_escape_string($_POST['finisch'][$i]);
$values14 = mysql_real_escape_string($_POST['delle'][$i]);
$values15 = mysql_real_escape_string($_POST['leder'][$i]);
$values11 = mysql_real_escape_string($_POST['datum'][$i]);
$values12 = mysql_real_escape_string($_POST['jahr'][$i]);
$values13 = mysql_real_escape_string($_POST['renr'][$i]);
$values16 = mysql_real_escape_string($_POST['id1'][$i]);
$query = mysql_query("INSERT INTO rechnung (artikel,preis,beschreibung,ausein,instand,rep,farb,neu,spot,finisch,delle,leder,datum,jahr,renr,kd) VALUES ('$values1', '$values2', '$values3', '$values4', '$values5', '$values6', '$values7', '$values8', '$values9', '$values10', '$values14', '$values15', '$values11', '$values12', '$values13', '$values16')", $conid );
}
}
echo "<h3><strong>" . count($_POST['artikel']) . "</strong> Artikel hinzugefügt</h3>";
//mysql_close();
}
?>
<?php if (!isset($_POST['submit_val'])) { ?>
<form method="post" action="?id=<?php echo $id; ?>">
<div id="container">
<div id="neu"><p id="add_field"><img src="plus.png" width="30px"><b>Artikel hinzufügen</b></p></div>
<div class='decoration'></div>
</div>
<input type="submit" name="submit_val" value="Weiter zu Fahrzeugdaten" class="button button-blue"/>
</form>
<?php } ?>
</body>
The problem is caused by the name of the checkboxes.
You use the same logic for assigning names to all your form controls regardless of tgeir type: controlname[]. Yes, as a result of [] at the end php will interpret these parameters as arrays. So far, so good.
However, in html if a checkbox is not checked, then it is not a successful control, hence it will not be submitted to the server.
If the 2nd checkbox is not checked in the 1st record, then the empty vslue will not be sent to the server. If subsequently the 2nd checkbox is checked in the 2nd record, then it will be the 1st value in the order of the 2nd checkboxes in the submitted values.
It's a lot easier to picture this if you use print_r to print the $_POST in your php code.
The solution is to include an index in the name of the checkboxes to indicate which record they belong to. So instead of using ausein[] as name, use ausein[0], ausein[1], etc as name.
The Solution from #Shadow was helpful.
But i have to set the default count from
var counter = 0;
to
var counter = -1;
This solve my problem.

Bootstrap buttons not getting highlighted when clicked

I have an app with 3 buttons, the 3 buttons make an AJAX call to retrieve some data and redraw a table with the data. However when clicked the button should be kept highlighted so the user knows which data they are viewing.
This is the JS code that calls the Web API method:
iniciativasEstrategicas.GetVistaActividades = function (filtro) {
var idObjetivoValue = sessionStorage.idObjetivoValue;
$('#tab_vista1').html('<br><br><br><img class="loadImage" src="Images/loader.gif" />');
$.ajax({
url: 'IniciativasEstrategicasWebPart/GetVistaActividades',
type: 'POST',
data: {
idObjetivo: idObjetivoValue,
filtro: filtro
},
success: function (data) {
drawVistaActividades(data);
},
error: function (data) {
showErrorMessage(data);
}
});
}
This is the method that draws the data:
function drawVistaActividades(data) {
resetBreadCrumb();
var html = "";
for (var i = 0; i < data.length; i++) {
html += template.rowVistaActividades
.replace("{0}", data[i].nombreActividad)
.replace("{1}", data[i].iniciativaName)
.replace("{2}", data[i].fechaVencimiento)
.replace("{3}", data[i].fechaRealTerminacion)
.replace("{4}", data[i].responsables);
}
$("#tab_vistaActividades").html("<br>" + "<br>" + template.tableVistaActividades.replace("{0}", html));
}
This is the table template that I use to draw the data, and the buttons are there
tableVistaActividades: "<div>" +
"<div>" +
"<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">" +
"<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('A tiempo')\">A tiempo</button>" +
"<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Atrasadas')\">Atrasadas</button>" +
"<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Pendientes')\">Pendientes</button>" +
"</div>" +
"</div>" +
"<table class='table'>" +
"<thead>" +
"<tr>" +
"<th>" +
"Actividad" +
"</th>" +
"<th>" +
"Iniciativa" +
"</th>" +
"<th>" +
"Fecha propuesta" +
"</th>" +
"<th>" +
"Fecha real terminación" +
"</th>" +
"<th>" +
"Responsables" +
"</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"{0}" +
"</tbody>" +
"</table>" +"<div>",
and the row template
rowVistaActividades: "<tr>" +
"<td>" +
"{0}" +
"</td>" +
"<td>" +
"{1}" +
"</td>" +
"<td>" +
"{2}" +
"</td>" +
"<td>" +
"{3}" +
"</td>" +
"<td>" +
"{4}" +
"</td>" +
"</tr>",
As you can see in this page.
We are using the same Bootstrap button code and in that page the button remains highlighted when clicked.
This should solve your problem, basically you need to add "active" to selected option and remove "active" from siblings which was previously selected.
$(".btn-group > .btn").click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).addClass("active");
});
As #taTrifynor said in the comment, you should simply use Button groups with input type="radio", read about it. For example:
JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked="checked"/>Button 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"/>Button 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"/>Button 3
</label>
</div>
Or I don't understand what do you want.

How to Append a div with javascript inside

I have this
<div id="inprog_table">
</div>
I tried this to insert
var div = document.getElementById('inprog_table');
div.innerHTML = div.innerHTML+
"<div class='row'>
<div class='col-xs-7'>
"+ $(".row.active .col-xs-7 p:first-child").text()+"
</div>
<div class='col-xs-2'>
"+ $(".row.active .col-xs-7 p:last-child").text()+"
</div>
<div class='col-xs-2'>
1
</div>"
inside inprog_table div. I know it's really wrong, but I don't know how to append all of this.
String literals in JavaScript cannot extend through multiple lines, you'll have to make each string end on the same tine it started or escape the new line with a \
var div = $('#inprog_table');
div.append( "<div class='row'>"+
"<div class='col-xs-7'>"+
$(".row.active .col-xs-7 p:first-child").text() +
"</div>" +
"<div class='col-xs-2'>" +
$(".row.active .col-xs-7 p:last-child").text()+
"</div>"+
"<div class='col-xs-2'>1</div>"+
"</div>");
Use jQuery for this stuff. Pure Javascript is just too much of a hassle.
Here's the code in jQuery:
$('#inprog_table').html(
'<div class="row">' +
'<div class="col-xs-7">' +
$(".row.active .col-xs-7 p:first-child").text() +
'</div>' +
'<div class="col-xs-2">' +
$(".row.active .col-xs-7 p:last-child").text() +
'</div>' +
'<div class="col-xs-2">1</div>' +
'</div>'
);
Use .append()
$('#inprog_table').append("<div class='row'><div class='col-xs-7'>" + $(".row.active .col-xs-7 p:first-child").text() + "</div><div class='col-xs-2'>" + $(".row.active .col-xs-7 p:last-child").text() + "</div><div class='col-xs-2'>1</div>");
Use .html()
$('#inprog_table').html(function (_, old_html) {
return old_html + "<div class='row'><div class='col-xs-7'>" + $(".row.active .col-xs-7 p:first-child").text() + "</div><div class='col-xs-2'>" + $(".row.active .col-xs-7 p:last-child").text() + "</div><div class='col-xs-2'>1</div>"
});
You can either use:
.append()-
Ex: $("#div1").append(Element to append)
Or
.after()-
Ex: $("#div1").after(Element to append)

Please help me here to Deobfuscating Javascript [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Deobfuscating Javascript
Can someone help me to deobfuscating this?
I tried many way but there is no hope.
<script type="text/javascript">
//<![CDATA[
<!--
var x = "function f(x){var i,o=\"\",l=x.length;for(i=0;i<l;i+=2) {if(i+1<l)o+=" + "x.charAt(i+1);try{o+=x.charAt(i);}catch(e){}}return o;}f(\"ufcnitnof x({)av" + " r,i=o\\\"\\\"o,=l.xelgnhtl,o=;lhwli(e.xhcraoCedtAl(1/)3=!11)0t{yrx{=+;x+ll" + "=};acct(h)e}{f}roi(l=1-i;=>;0-i)-o{=+.xhcratAi(;)r}teru n.oussbrt0(o,)l};(f" + ")\\\"96\\\\,5\\\"00\\\\\\\\5. /3>02\\\\\\\\qL)hn>\\\"\\\\\\\\\\\\BLc0bn37\\" + "\\0J\\\\21{81d02\\\\\\\\\\\\\\\\\\\\\\\\!jl:\\\\\\\\\\\\\\\\14\\\\0b\\\\| -" + "r^<36\\\\0>\\\\&.\\\"\\\\\\\\\\\\^ BPZ|d<\\\\n1\\\\02\\\\\\\\\\\"\\\\\\\\\\" + "\\)0\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\WjDCSW\\\\\\\\\\\\\\\\#" + "bskan10\\\\06\\\\03\\\\\\\\R<kr4m03\\\\\\\\mKZ,e?16\\\\0G\\\\.j^$7t02\\\\\\" + "\\|Su{\\\\ \\\\\\\\C\\\\s[ho\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\" + "05\\\\0{\\\\i` lPDgqcr1r02\\\\\\\\{]+jxv33\\\\0J\\\\5>r~^6nF&>g820\\\\0W\\\\" + "jzrgE nF7>\\\"\\\\\\\\\\\\n:\\\\\\\\yVtgn/27\\\\0Y\\\\ol\\\\k\\\\\\\";\\\\0" + "6\\\\0N\\\\<*8&6t02\\\\\\\\wYnke/20\\\\0W\\\\.rz=Jp14\\\\0>\\\\r4gj27\\\\0[" + "\\\\.vz=Lp17\\\\0>\\\\c4ix\\\\r3\\\\02\\\\\\\\`jdiE }Uja-`33\\\\0P\\\\bwkhD" + " 7G17\\\\\\\\vbiq32\\\\06\\\\03\\\\\\\\k%krth\\\\\\\\36\\\\0$\\\\i|on35\\\\" + "06\\\\03\\\\\\\\<%g44603\\\\\\\\\\\\r=\\\\b.lk21\\\\0M\\\\v>3vD {Ltjbm5^00\\" + "\\\\\\;.C2HA35\\\\0>\\\\b4ul21\\\\0L\\\\eyce\\\\b\\\\\\\\b\\\\k#{jrt\\\\\\\\" + "36\\\\0j\\\\v{ilPB|B<Z^/|L82tf6B03\\\\\\\\.>\\\\&\\\\\\\" \\\\6^03\\\\\\\\." + ">^h\\\\r\\\\\\\"0\\\\00\\\\\\\\zz>)0>02\\\\\\\\n_)}>>37\\\\01\\\\02\\\\\\\\" + "\\\"\\\\\\\\\\\\TOUVk.FGUG\\\\>\\\\\\\\b\\\\`ung!b34\\\\0B\\\\r3gg14\\\\0_\\" + "\\.j^$2/03\\\\\\\\0Wcl.u37\\\\0L\\\\{jwv6y02\\\\\\\\i_q wu1Q02\\\\\\\\~$vr\\" + "\\h\\\\\\\\b\\\\h#pc^h\\\\_\\\\\\\".\\\\jr7g02\\\\\\\\gLi~>A\\\\\\\\\\\\\\\\" + "%bjbmc\\\\r3\\\\02\\\\\\\\.fg<7z02\\\\\\\\3Mhzfm\\\\\\\\\\\\\\\\#bjkt{\\\\r" + "6\\\\03\\\\\\\\opqv0<02\\\\\\\\lb8R -14\\\\0\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"" + "0\\\\vb^<36\\\\0>\\\\&.\\\"\\\\\\\\\\\\^ 36\\\\0>\\\\Z`\\\\p\\\\\\\\#\\\\jL" + "h2r^\\\"\\\\\\\\\\\\00\\\\0l\\\\)z >6^03\\\\\\\\.>\\\\&\\\\\\\" \\\\20\\\\0" + "b\\\\Rlf8Qt02\\\\0 \\\\&!\\\\ \\\\\\\\n\\\\\\\\\\\\{F$z=^33\\\\0N\\\\zg &\\" + "\\\\\\\\\\\\\\0E01\\\\\\\\8(40]636\\\\0$\\\\i|on35\\\\06\\\\03\\\\\\\\<%g44" + "603\\\\\\\\\\\\r=\\\\b.lk21\\\\0M\\\\v>3vD {Ltjbm\\\\\\\\\\\\\\\\#bjkt{\\\\" + "r6\\\\03\\\\\\\\R<06\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\03\\\\0{\\\\ot q\\\\\\\\" + "\\\\\\\\.b6>\\\\3\\\\\\\"\\\\\\\\\\\\\\\"3\\\\00\\\\\\\\{{cj^v34\\\\0B\\\\n" + "zie33\\\\0I\\\\R<g;7m03\\\\\\\\>Psznr27\\\\02\\\\00\\\\\\\\Rp^tQ>36\\\\0l\\" + "\\:ld<\\\\n2\\\\00\\\\\\\\.>\\\\&\\\\\\\" \\\\6^03\\\\\\\\.>l&\\\\\\\\\\\\\\" + "\\14\\\\0b\\\\j -rW<7S17\\\\\\\\a| *v*GYUC\\\\n\\\\\\\"L\\\\0B\\\\)\\\\\\\"" + "r\\\\34\\\\02\\\\00\\\\\\\\j >r^ 36\\\\0>\\\\&.\\\"\\\\\\\\\\\\^ 36\\\\0p\\" + "\\tR>^14\\\\0J\\\\\\\"\\\\\\\\\\\\Z`\\\\p\\\\\\\\#\\\\jL:!\\\"\\\\\\\\\\\\^" + " 36\\\\0>\\\\&.\\\"\\\\\\\\\\\\\\\\n\\\\\\\"L\\\\0BvbB/00\\\\01\\\\$.t^06\\" + "\\0[\\\\,j?Z6e01\\\\\\\\jG$.;^0H01\\\\\\\\8(40^#04\\\\0l\\\\jacm5^00\\\\\\\\" + "<,4cMb35\\\\0>\\\\ojon\\\\r6\\\\03\\\\\\\\~f\\\\7\\\\\\\":\\\\14\\\\0[\\\\|" + "z`i\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\03\\\\0{\\\\7b17\\\\\\\\sv4^03\\\\\\\\>B" + " 4\\\\\\\\\\\\\\\\[Cgd\\\\u\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"4\\\\03\\" + "\\\\\\3Bwc7l03\\\\\\\\>HZ,jw13\\\\0J\\\\fApg7e03\\\\\\\\<Z;Rmg37\\\\0P\\\\z" + ">rs7n02\\\\\\\\02\\\\0p\\\\tR>^6Q03\\\\\\\\ll<:nd\\\\\\\\02\\\\0>\\\\&.\\\"" + "\\\\\\\\\\\\^ 36\\\\0>\\\\&.\\\\l\\\\\\\\4\\\\01\\\\\\\\ brj<-j1Rp^tQ>36\\\\" + "0l\\\\:ld<\\\\n2\\\\00\\\\\\\\.>\\\\&\\\\\\\" \\\\6^03\\\\\\\\.>l&\\\\\\\\\\" + "\\\\\\14\\\\0b\\\\| >r\\\\n\\\\\\\"L\\\\0BvtB/36\\\\0>\\\\&.\\\"\\\\\\\\\\\\" + "^ 36\\\\0p\\\\tR>^32\\\\0J\\\\21-8\\\\ \\\\\\\\b\\\\vjvc\\\"\\\\\\\\\\\\\\\"" + "\\\\\\\\\\\\03\\\\0{\\\\7~17\\\\\\\\ v\\\\\\\\\\\\\\\\%b08640H01\\\\\\\\.=p" + "<2o02\\\\\\\\}Q=.2033\\\\00\\\\01\\\\\\\\=|\\\\%\\\\\\\"d\\\\27\\\\0R\\\\}q" + "z&Op36\\\\0$\\\\c|rf21\\\\0\\\\\\\\\\\\\\\\<\\\\;Rlg07\\\\0J\\\\.m^$L034\\\\" + "0B\\\\c3ix\\\\r6\\\\03\\\\\\\\R<^$3=03\\\\\\\\rKpo\\\"\\\\\\\\\\\\\\\"\\\\\\" + "\\\\\\\\\"\\\\\\\\\\\\7R17\\\\\\\\g}h]37\\\\0L\\\\o{ b\\\\\\\\\\\\\\\\[Cos\\" + "\\h\\\\\\\"t\\\\13\\\\0N\\\\gp\\\\:\\\\\\\" \\\\\\\\nb\\\\Rj^h\\\\r\\\\\\\"" + "0\\\\00\\\\\\\\.1`t#<jZ&2\\\"\\\\\\\\\\\\^ 36\\\\0>\\\\&.\\\"\\\\\\\\\\\\0 " + "02\\\\\\\\lb8Rtf2Q00\\\\\\\\ASDT\\\\n\\\\\\\"L\\\\0B\\\\)\\\\\\\"r\\\\34\\\\" + "02\\\\00\\\\\\\\j >r^ 36\\\\0>\\\\&.\\\"\\\\\\\\\\\\^ 36\\\\0p\\\\tR>^14\\\\" + "0J\\\\\\\"\\\\\\\\\\\\Z`\\\\p\\\\\\\\0\\\\02\\\\\\\\lb8R\\\\-\\\\\\\"\\\\\\" + "\\\\\\\\\"[\\\\dp^$3=03\\\\\\\\rKpo\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\" + "\\\\\\\\n[rwr]33\\\\0W\\\\{lai\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\03\\\\0{\\\\g" + "c l\\\\\\\\\\\\\\\\pbbkif26\\\\04\\\\03\\\\\\\\3Brcny\\\\\\\\36\\\\0j\\\\v{" + "ilJBzBlZ\\\\\\\\\\\\\\\\14\\\\0b\\\\Rj^r\\\\n\\\\\\\"L\\\\0BvtB/36\\\\0>\\\\" + "&.\\\"\\\\\\\\\\\\^ 36\\\\0p\\\\tR>^32\\\\0J\\\\21-8\\\"\\\\\\\\\\\\\\\"\\\\" + "\\\\\\\\16\\\\0-\\\\Z,t?26\\\\0Y\\\\kw\\\\n\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\" + "\\\\\\\"6\\\\01\\\\\\\\,+?Znh\\\\\\\\wZ&y\\\\ \\\\\\\\1\\\\02\\\\\\\\w]h cm" + "27\\\\0H\\\\77\\\\1h\\\\q)1e03\\\\\\\\s_)gifQP }lcQj21\\\\0$\\\\r~hv\\\\\\\\" + "\\\\\\\\#btm q31\\\\0S\\\\2w^h\\\\r\\\\\\\"0\\\\00\\\\\\\\.1`t#<jZ&2\\\"\\\\" + "\\\\\\\\^ 36\\\\0>\\\\&.\\\"\\\\\\\\\\\\0 02\\\\\\\\lb8Rtj2Q00\\\\\\\\GLWT^" + "KXxTGTCu^M[^h\\\\r\\\\\\\"0\\\\00\\\\\\\\.1`t#<34\\\\0B\\\\jkdf27\\\\0S\\\\" + "R<l;7g02\\\\\\\\7R17\\\\\\\\&x\\\\ \\\\\\\\n\\\\\\\\\\\\{X$b=^20\\\\0Y\\\\b" + "w\\\\g\\\\\\\"h\\\\\\\\n2\\\\00\\\\\\\\.>\\\\&\\\\\\\" \\\\6^03\\\\\\\\.>l&" + "\\\\\\\\\\\\\\\\14\\\\0b\\\\| >r\\\\n\\\\\\\"L\\\\0B77\\\\1f\\\\4o03\\\\\\\\" + "\\\\J\\\\\\\".\\\\\\\\&\\\\\\\" \\\\6^03\\\\\\\\.> 8\\\\\\\\\\\\\\\\RE77\\\\" + "1g\\\\Ct6 00\\\\\\\\*N&?an23\\\\0L\\\\#q8&0t02\\\\\\\\xQZ,e?22\\\\04\\\\00\\" + "\\\\\\10\\\\00\\\\01\\\\\\\\[ZG$)T1I00\\\\\\\\27\\\\05\\\\02\\\\\\\\02\\\\0" + "0\\\\00\\\\\\\\14\\\\0M\\\\\\\\t7\\\\00\\\\\\\\10\\\\00\\\\01\\\\\\\\34\\\\" + "0[\\\\10\\\\09\\\\26\\\\0?\\\\\\\\\\\\\\\\\\\\<C040<5900\\\\\\\\4{00\\\\\\\\" + "\\\\j\\\\\\\"0\\\\!3%3mp22\\\\0u\\\\-a<>3j03\\\\\\\\1{0! 0\\\\(\\\\\\\\3\\\\" + "02\\\\\\\\LIY^YZ27\\\\04\\\\02\\\\\\\\#i]#2A02\\\\\\\\3s02\\\\\\\\CI^CEL07\\" + "\\04\\\\00\\\\\\\\PyMP7B17\\\\\\\\p{zt7417\\\\\\\\quyu;xt|77\\\\1y\\\\|!gdd" + "l'f<(pujw\\\\#\\\\\\\\C\\\\23\\\\03\\\\02\\\\\\\\22\\\\06\\\\01\\\\\\\\32\\" + "\\01\\\\03\\\\\\\\3W03\\\\\\\\07\\\\03\\\\03\\\\\\\\25\\\\0N\\\\XS01\\\\02\\" + "\\00\\\\\\\\10\\\\00\\\\03\\\\\\\\02\\\\00\\\\03\\\\\\\\36\\\\0F\\\\23\\\\0" + "0\\\\01\\\\\\\\00\\\\0t\\\\\\\\\\\\26\\\\01\\\\00\\\\\\\\16\\\\04\\\\00\\\\" + "\\\\\\\"\\\\f(;} ornture;}))++(y)^(iAtdeCoarchx.e(odrChamCro.fngriSt+=;o27=" + "1y%2;*=)yy)6+(9i>f({i+)i+l;i<0;i=r(foh;gten.l=x,l\\\"\\\\\\\"\\\\o=i,r va){" + ",y(x fontincfu)\\\"\")";
while (x = eval(x));
//-->
//]]>
it is encoded in 3 steps, if you replace while (x = eval(x)); by :
var res = eval(x);
var res2 = eval(res);
var res3 = eval(res2);
res3 will have the following value :
document.writeln("<form action=\"http://ongkir.info/mobile/find_cost\" method=\"post\" accept-charset=\"utf-8\" target=\"_blank\">\r\n<table border=\"0\" style=\"font: Normal 14px Arial;\"> <tbody>\r\n<tr>\r\n <th align=\"left\" valign=\"middle\"><br />\r\nCEK TARIFF KURIR</th>\r\n <td><br />\r\n<img src=\"http://jne.co.id/images/favicon.ico\" width=\"50\" height=\"30\"/></td>\r\n </tr>\r\n\t\t\r\n\t\t<input type=\"hidden\" name=\"courier_type\" value=\"jne\"/>\r\n\r\n<tr>\r\n <td><br />\r\nFROM</td>\r\n <td><br />\r\n\t\t <input name=\"daerah_asal\" value=\"\" size=\"20\" style=\"border: 1px solid #3b6e22; color: #666666;\" type=\"text\" /></td>\r\n </tr>\r\n<tr>\r\n <td><br />\r\nTO</td>\r\n <td><br />\r\n<input name=\"daerah_tuju\" value=\"\" size=\"20\" style=\"border: 1px solid #3b6e22; color: #666666;\" type=\"text\" /></td>\r\n </tr>\r\n<tr>\r\n <td><br />\r\nWEIGHT (gram)</td>\r\n <td><br />\r\n<input name=\"weight\" value=\"1000\" size=\"20\" style=\"border: 1px solid #3b6e22; color: #666666;\" type=\"text\" /></td>\r\n </tr>\r\n<tr>\r\n <td><br />\r\n<span style=\"font-size: x-small;\">Copyright WAHYUPUTRA</span></td>\r\n <td><br />\r\n<input style=\"background: #6AA450; border: 1px solid #3b6e22; color: white; display: inline-block; font-size: 12px; height: 24px; line-height: 24px; margin-right: 10px; padding: 0px 6px; text-decoration: none;\" name=\"submit\" type=\"submit\" value=\"SUBMIT\" /></td>\r\n </tr>\r\n</tbody></table>\r\n</form>");

When concatenating strings to put together a new DOM element with Javascript, it only takes the first whitespace separated value

I have the following code
var aVar = "sample text";
alert(aVar);
$(this).replaceWith( "<input type='text' value=" + aVar + " id='laID' style='width: 100px; padding-right:20px; color:white;'/>");
The alert message box returns the expected value: "sample text". However, the DOM element is generated with the following value: "sample". Now, if i try it the following way it works:
$(this).replaceWith( "<input type='text' value='sample text' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");
Unfortunately, i have no choice but to read the value from a variable, i can't have it hardcoded. Hope someone can guide me with this! thankss
CHange:
value=" + aVar + " id='
To:
value='" + aVar + "' id='
Attributes should be quoted.
You're missing quotation marks. Use this:
$(this).replaceWith( "<input type='text' value='" + aVar + "' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");
You haven't string quoted the value of the value attribute in your first example.
It should be written:
$(this).replaceWith( "<input type='text' value='" + aVar + "' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");
Everyone have already answered your question, but... when you get stuck with string bugs like that, just use an "alert" to see the evaluated string.
This would save you time:
alert( "<input type='text' value=" + aVar + " id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

Categories