I'm having a strange problem when trying to updated a div with a couple of paragrahs of text from AJAX.
Here are functions I'm using:
var receivePapers = getXmlHttpRequestObject();
function get_papers(myCat){
if (receivePapers.readyState == 4 || receivePapers.readyState == 0) {
receivePapers.open("GET", 'http://server/path/tocode/file.php?get_papers=1&student_id=1&category=' + myCat, true);
receivePapers.onreadystatechange = handlereceivePapers;
receivePapers.send(null);
}
}
function handlereceivePapers() {
if (receivePapers.readyState == 4) {
var container_div = document.getElementById('paper_container');
var xmldoc = receivePapers.responseXML;
var paper_nodes = xmldoc.getElementsByTagName("paper");
var n_papers = paper_nodes.length;
// Clear the whole container div.
container_div.innerHTML = "";
container_div.innerHTML = "<table class='categoryHeader' width='100%'><tr><th class ='categoryHeader' width='80%' ><br/> " + paper_nodes[1].getElementsByTagName("category")[0].firstChild.nodeValue + "</br> <br/><br/></th></tr>";
container_div.innerHTML += "<tr><td>";
for (i = 0; i < n_papers; i++) {
var paper_id = paper_nodes[i].getElementsByTagName("paper_id");
var paper_title = paper_nodes[i].getElementsByTagName("paper_title");
var paper_desc = paper_nodes[i].getElementsByTagName("paper_desc");
var paper_time = paper_nodes[i].getElementsByTagName("paper_time");
var user_real_name = paper_nodes[i].getElementsByTagName("user_real_name");
var summary_div = document.createElement('div');
summary_div.innerHTML += "<table class='paper'><tr><td class='paperLike' width=80px rowspan=2 valign='top'><div id='" + paper_id[0].firstChild.nodeValue + "'> <img src='images/Like.png' style='padding-top:5px' border='0' /></div></td><td><table width='100%'><tr><td class='paperTitle' style='background-color:white; text-align=left; '><a class='paperTitle' style='padding-left:0;' href='#" + paper_id[0].firstChild.nodeValue + "'>" + paper_title[0].firstChild.nodeValue + "</a></td><td class='paperName' style='margin-right:0; width:200px; background-color:white; text-align:right; vertical-align:text-top;'><span align='right' style='background-color:white; text-align:right; vertical-align:text-top; ' > " + user_real_name[0].firstChild.nodeValue + "</span></td></tr></table></td><td rowspan='2' class='paperLength' style='width:80px; text-align:right; padding-top:8px;' >" + paper_time[0].firstChild.nodeValue + " minutes</td></tr><tr><td class='paperDescription' align='left' colspan='1'>" + paper_desc[0].firstChild.nodeValue + "</td></tr></table>";
container_div.appendChild(summary_div);
}
container_div.innerHTML += "</tr></td></table";
}
}
Here is the XML that's getting returned:
<root>
<paper id="23">
<paper_id>23</paper_id>
<paper_title>title</paper_title>
<paper_desc>
First paragraph of desc
<br/>
<br/>
Second paragraph of desc
<br/>
<br/>
Third paragraph of desc
<br/>
</paper_desc>
<paper_time>45</paper_time>
<user_real_name>Bob Student</user_real_name>
<user_id>2322</user_id>
<category>Languages</category>
</paper>
...
When I push the content to container_div only the first paragraph is showing up. If I stick a Javascript alert() in to return paper_desc it only contains the first paragraph. I've tried looking for other nodes but this says there's only 1 node:
alert(paper_nodes[i].getElementsByTagName("paper_desc").length);
You use paper_desc[0].firstChild.nodeValue
paper_desc[0] is a set of nodes: text nodes and br nodes. You get only the first child of this set, so you get only the first text.
Your alert() call only shows you have only one paper_desc node, not how many nodes you have inside.
I also found strange that you used paper_nodes[1] but I don't know if there is a second node in your XML and if you really want to target it.
Related
I have only started js recently, so i hope this makes sense..
I have made a simple dynamic form which starts with a table of 4 rows. After the heading row, the remaining 3 rows have +/- symbols which are to add or delete rows as necessary.
The add row functionality is currently working, however, even after assigning the correct class to the new row, the event listener wont work for the new buttons (even thought i have re-assigned the number of buttons within that class).
After adding the row, i re-assign btnAddRows and when logged to the console it is increasing with each row added. I can't figure out why it wont get captured in the for loop?
Thanks
//select elements on DOM
let btnAddRows = document.querySelectorAll('.btnADD');
let myTable = document.querySelector('#SecProp');
let myTableRows = document.querySelector('.tableRows');
for (let i = 0; i < btnAddRows.length; i++) {
btnAddRows[i].addEventListener('click', function () {
console.log(btnAddRows.length);
btnAddRows = document.querySelectorAll('.btnADD');
const rowNum = Number(btnAddRows[i].id.slice(6));
// console.log(rowNum);
// if (rowNum === myTableRows.length - 1) {
// addTableRow(rowNum);
// } else {
addTableRow(rowNum);
// }
btnAddRows = document.querySelectorAll('.btnADD');
myTable = document.querySelector('#SecProp');
myTableRows = document.querySelector('.tableRows');
});
}
const addTableRow = function (rowNum) {
//insert row into table
const addRw = myTable.insertRow(rowNum + 1);
const newRow = myTable.rows[rowNum + 1];
newRow.className = 'tableRows';
console.log(myTable.rows[rowNum + 1], typeof myTable.rows[rowNum + 1]);
const cell1 = newRow.insertCell(0);
const cell2 = newRow.insertCell(1);
const cell3 = newRow.insertCell(2);
const cell4 = newRow.insertCell(3);
const cell5 = newRow.insertCell(4);
cell1.className = 'column1';
cell2.className = 'coordsColumn';
cell3.className = 'coordsColumn';
cell4.className = 'buttons';
cell5.className = 'buttons';
cell1.innerHTML = `<td> ${rowNum + 1}</td>`;
cell2.innerHTML = '<td ><input type = "text" name="" value = ""/><td>';
cell3.innerHTML = '<td ><input type = "text" name="" value = ""/><td>';
cell4.innerHTML = `<td ><button class="btnADD btn btn-success" id="btnADD${
rowNum + 1
}"> + </button>`;
cell5.innerHTML = `<td ><button id="btnDEL${
rowNum + 1
}" class="btnDEL btn btn-success"> -</button>`;
};
I'm trying to show alert message including click event on div element that are sought through a loop. The problem is that in any div I click, it is only displayed the alert of the last element. How can I solve? I do not understand the logic being performed.
for (var i = 0; i < this.legend.layerInfos.length; i++)
{
var sNomeDiv = "";
var sMensagem = "";
if (this.legend.layerInfos[i].layer.visible)
{
sNomeDiv = this.legend.id + "_" + this.legend.layerInfos[i].layer.id;
if (this.legend.layerInfos[i].layer.description == "" || this.legend.layerInfos[i].layer.description == "undefined" || this.legend.layerInfos[i].layer.description == "null")
{
sMensagem = "Nenhuma informação cadastrada para a camada " + this.legend.layerInfos[i].title;
}
else
{
sMensagem = this.legend.layerInfos[i].layer.description;
}
//Always display an alert with the text of the last element of the loop
dojo.connect
(
dojo.byId(sNomeDiv),
"onclick",
function()
{
alert(sMensagem + " --> " + sNomeDiv);
}
);
}
}
My problem is, I have the following function:
function change_tarif(param) {
var arrTarif = <% Response.Write(Session["Tarif"]); %>
.....
}
Session["Tarif"] - contains multidimensional array List and when I'm loading my page it's giving this Error that
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
When I delete <% Response.Write(Session["Tarif"]); %> it doesn't give this error. So, how can I replace this code to get array List from Session["Tarif"] without using the code blocks <% %>?
This is my Array List code in C#:
public void getTarifList()
{
int intRows = 0;
string strTarif = "null";
Session["Tarif"] = "null";
SqlCommand cmdTarif = new SqlCommand("sp_SIMPay_GetTarifList");
cmdTarif.CommandType = CommandType.StoredProcedure;
DataTable dtTarif = SQL.GetData(cmdTarif);
if (dtTarif.Rows.Count > 0)
{
intRows = dtTarif.Rows.Count;
strTarif = "new Array(" + intRows + ");";
int intIndex = 0;
foreach (DataRow dRows in dtTarif.Rows)
{
strTarif += "arrTarif[" + intIndex + "] = new Array('" + dRows["TarifName"] + "', '" + dRows["ProviderID"] + "', '" + dRows["CodeID"] + "');";
intIndex++;
}
}
else
{
strTarif = "null";
}
Session["Tarif"] = strTarif;
}
My full script:
function change_tarif(param) {
var arrTarif = <% Response.Write(Session["Tarif"]); %>
var select = document.getElementById('TarifList');
var i = 0;
if (arrTarif != null) {
for (i = 0; i < arrTarif.length; i++) {
if (arrTarif[i][1] == '98' && param == '98') {
clear_tarif();
select.options[select.options.length] = new Option('' + arrTarif[i][0] + '', '' + arrTarif[i][2] + '');
break;
}
else {
clear_tarif();
select.options[select.options.length] = new Option('Default Tarif', '');
}
}
}
}
This happens because somewhere in your page code you do something like (just an example - it doesn't matter that it's a Label here, any dynamically added/removed control would trigger the error):
Label lbl = new Label ();
lbl.Xxxx = ...;
Controls.Add ( lbl ); // this is what triggers your issue
When you have <%= ... %> in the same container where you also try to dynamically add controls through the use of the Controls collection of that container (Page, Panel, etc.), you'll get that error that you saw.
If you can, try to remove the code that dynamically adds/removes the control to the container (the same container where you have the <%= ... %> and then your <%= ... %> block will start working.
To remove the dynamic logic that adds/removes control(s), simply put those controls into the container like any other control, like
<asp:Label runat="server" id="lbl" ... />
and then simply show/hide the control when you need it. This way the control is always present in the page, you won't have to add/remove it during run-time and then you can have code blocks in the same container.
Here's a quick example that would create this error:
...
<div runat="server" id="div1">
<asp:Label runat="server" id="lbl1" /><br />
<span>Name: <%= Session["name"] %></span>
</div>
...
// in code-behind
protected override void OnLoad ( EventArgs e )
{
Label lbl2 = new Label ();
lbl2.Text = "Time: " + DateTime.Now.ToString ();
// Error: you cannot modify the Controls collection if
// the same control contains code blocks
div1.Controls.Add ( lbl2 );
}
You can use Expression (Equivalent to Response.Write()).
function change_tarif(param) {
var arrTarif = <%= Session["Tarif"] %>;
}
EDIT : I've customized your code,
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
getTarifList();
}
public void getTarifList()
{
Session["Tarif"] = "null";
StringBuilder sb = new StringBuilder();
sb.AppendLine("new Array(" + 3 + ");");
for(int i=0;i<3;i++)
{
sb.AppendLine("arrTarif[" + i + "] = new Array('A" + i + "', 'B" + i + "', 'C" + i + "');");
}
Session["Tarif"] = sb.ToString();
}
And markup,
<script type="text/javascript">
function change_tarif(param){
var arrTarif = <% Response.Write(Session["Tarif"]); %>
return arrTarif;
}
console.log(change_tarif('test'));
</script>
I have java script which create select box depend of ajax result.
For example, if result = 2x combo, i create 2x select box via javascript.
if (this.Type == "combo") {
var result = "<label>" + this.Name + "</label><select onChange='ProChange(this)' name='" + this.ID + "'>";
result += "<option value='0'>Please select</option>";
for (var i = 0; i < this.Values.length; i++) {
var resultId = this.Values[i].ID;
var resultName = this.Values[i].Name;
result += "<option value= " + resultId + ">" + resultName + "</option>";
}
result += "<option value='-1'>Other</option>";
result += "<input type='text' name='"+this.ID+"other' style='display:none;' id='"+this.ID+"' />";
result += "</select>";
So my main question is, can i apply telerik style on dynamic created select box?
You can use the Telerik RadFormDecorator
<telerik:RadFormDecorator ID="rfd_combo" runat="server" DecoratedControls="Select" />
and after creating your controls by javascript:
$find("<%= rfd_combo.ClientID %>").decorate();
More details: http://www.telerik.com/support/kb/aspnet-ajax/formdecorator/decorate-dynamically-added-controls-by-using-radformdecorator.aspx
In my cshtml i have defined a tag
I am creating a Image Upload Form, where On File Submit, i am saving the value in a Temp Table(SQL) and returning(GUID) the value thru a Ajax call and Binding the GUID inside Dynamically created DIV Tag(Jquery/Javascript)
<div id="dvDisplayImageParent" class="block clear" runat="server">
</div>
Now, using Javascript i am creating DIV Tags (Multiple) (Containing Images and Textbox) and appending it with dvDisplayImageParent.
I want to access the values in Controller
public ActionResult NewProject(ProjectEditViewModel model, String btnSave)
{// Want to values inside my dvDisplayImageParent }
How can i do this??
My Javascript is as follows :-
`var img = document.createElement("IMG");
var lbl = document.createElement("label");
var chk = document.createElement('input');
chk.type = 'checkbox';
//Assign image path to display the image
img.src = imgPath;
img.id = imageID;
img.style.height = "100px";
img.style.width = "100px";
//Appending it with Dynamic DIV
dynDiv.appendChild(img);
var input = document.createElement("input");
//input.setAttribute("type", "hidden");
input.setAttribute("type", "text");
input.setAttribute("name", "hdn" + imageID);
input.setAttribute("value", imageID);
//Image Link
var aElemImageLink = document.createElement('a');
//Move Up Link
var aElemUpLink = document.createElement('a');
//Move Down Link
var aElemDownLink = document.createElement('a');
var callOnImageclick = "DeleteImage('" + imageID + "','" + divDynamicID + "'); return false; ";
aElemImageLink.setAttribute("onclick", callOnImageclick);
aElemImageLink.childNodes = imageID;
var callOnMoveUpclick = "MoveImageUP('" + imageID + "','" + divDynamicID + "'); return false; ";
aElemUpLink.setAttribute("onclick", callOnMoveUpclick);
var callOnMoveDownclick = "MoveImageDOWN('" + imageID + "','" + divDynamicID + "'); return false; ";
aElemDownLink.setAttribute("onclick", callOnMoveDownclick);
//Create a text node to hold the text of the <a>
var aElemTN = document.createTextNode(' Delete Image ');
//Create a text node to hold the text of the <a>
var aElemTNUp = document.createTextNode(' Move UP ');
//Create a text node to hold the text of the <a>
var aElemTNDown = document.createTextNode(' Move DOWN ');
//Append the <a> text node to the <a> element
aElemImageLink.appendChild(aElemTN);
aElemUpLink.appendChild(aElemTNUp);
aElemDownLink.appendChild(aElemTNDown);
//Append the new link to the existing <div>
dynDiv.appendChild(aElemImageLink);
dynDiv.appendChild(aElemUpLink);
dynDiv.appendChild(aElemDownLink);
lbl.id = "lbl" + imageID;
var aElemTNTag = document.createTextNode(' Taggar ');
var aElemTNWantsToshare = document.createTextNode(' Dela? ');
var txtTag = document.createElement("input");
txtTag.id = "txt" + imageID;
txtTag.setAttribute('name', 'Tag');
dynDiv.appendChild(lbl);
dynDiv.appendChild(aElemTNTag);
dynDiv.appendChild(txtTag);
dynDiv.appendChild(chk);
dynDiv.appendChild(aElemTNWantsToshare);
dynDiv.appendChild(input);
//Appending Dynamic DIV with Parent DIV
var parentDiv = document.getElementById("dvDisplayImageParent");
parentDiv.appendChild(dynDiv);`
I Got one alternative :-
string NoOfImages = Convert.ToString(Request.Form["Your Control Name Which You Want To Access"]);
Now, using Request.Form[] use can get the value's present inside the CONTROL Created using JAVASCRIPT.
But still waiting for a better solution.
> Help Continues...
There is no runat or code behind in mvc. You can't access any elements from controller. I'd suggest watching some of these videos.