We Keep Coding

Error trying to overlay and remove elements with removeChild

i have a problem in the following code snippet.
for (var i=0;i<data.parlist.length;i++){
var inp = document.createElement("input")
var label = document.createElement("label")
var labelValue = document.createElement("label")
var subDiv = document.createElement("div")
var br = document.createElement("br")
try{
var dBtn = document.getElementById(data.parlist[i].id);
var dLabel = document.getElementById(data.parlist[i].id + " label")
var dDiv = document.getElementById(data.parlist[i].id +" div");
var inprad = document.getElementById(data.parlist[i].id+" inp_rad");
var dLabelRad = document.getElementById(data.parlist[i].id + " label_rad")
var dSubDiv = document.getElementById(data.parlist[i].id +" div_rad");
dSubDiv.replaceChild(inprad);
dSubDiv.removeChild(dLabelRad);
dDiv.removeChild(dSubDiv);
dDiv.removeChild(dBtn);
dDiv.removeChild(dLabel);
myDiv.removeChild(dDiv);
}catch{
console.log("no")
}
This for loop is inside a function that when clicking on a button of a station shows the parameters.in this way:
What you see in the images works, but the problem that I have come to try to clarify is that when I press the button for example as station 1 appears in the image and then I press the button for example of station 2 the try that is supposed to you must remove the previous parameters with removeChild does not work, the parameters of station 1 remain in the div and the parameters of station 2 are added below these instead of being removed
Within the try there is a problem but I do not know what it is, I say this because when I check the page and open the console I get the message that I left in the catch a "no"
Thanks for reading my problem and any suggestions are welcome as I am desperate to find a solution.

You need to pass 2 inputs to the replaceChild function.
parentNode.replaceChild(newChild, oldChild);
For more info refer Mozilla docs here.
Here is some additional advice
When you log for debugging, use some meaningful messages. In your case you could do
try {
...
} catch (err) {
console.log(err);
}
From the questions nothing is clear about what is there in data.parlist and whether that is implemented properly.

Moving the cursor to the end of line after a find and replace in CKEditor

I have written my own plugin for an auto-correct feature in CKEditor 4, it allows you to type #abc for instance and it will replace this with "as easy as one two three" plus a space character and put the cursor after the space.
This is the javascript code from the plugin that updates the string:
var s = editor.getSelection();
var bookmarks = s.createBookmarks(true);
var data = editor.getData();
var replaced_text = data.replace(typedchars, Suggestions + ' ');
editor.setData(replaced_text);
var range = s.getRanges()[0];
range.moveToBookmark(bookmarks[0]);
range.select();
It works perfectly on my local machine but as soon as I put this code into production I get an error on the line - range.moveToBookmark(bookmarks[0]); and the cursor goes to the start of the line.
The error is:
Uncaught TypeError: Cannot read property 'getParent' of null
and points to this line in the ckeditor.js file
setStartBefore: function(a) {
this.setStart(a.getParent(), a.getIndex())
},
From what i can see both versions of ckedtor.js are the same and no other files have changed.
There is nothing on Google to suggest a reason, so hoping someone here might have an idea.
Cheers

modified above to this and now it works perfectly
editor.focus();
var storeCursorLocation = function( editor ) {
bookmark = editor.getSelection().createBookmarks( true );
};
var restoreCursorLocation = function( editor ) {
editor.getSelection().selectBookmarks( bookmark );
};
storeCursorLocation( editor );
var data = editor.document.getBody().getHtml();
var replaced_text = data.replace(typedchars, Suggestions + ' ');
editor.document.getBody().setHtml( replaced_text );
typedchars = '';
restoreCursorLocation( editor );

Getting current selected text from wysihtml5 editor

Recently, I have worked with wysihtml5 Editor but I am not able to get the selected text of the Editor. Using JQuery I have written this code snippet but it is not working.
var len = $("#ticketmessage").val().length;
var start = $("#ticketmessage")[0].selectionStart;
var end = $("#ticketmessage")[0].selectionEnd;
var sel = $("#ticketmessage").val().substring(start, end);
Thanks & Regards
Manisha Biswas

Have you tried to use the getSelection method of the global window object? This is used to get the currently selected (highlighted) text on the page, e.g:
var text = window.getSelection().toString();
Alternatively, you might need to use the Range interface to get the selected text, e.g:
var text = document.selection.createRange().text;
See this SO answer for some examples of use

Try this example:
self.editor = new wysihtml5.Editor("my-editor", {
parserRules: wysihtml5ParserRules,
useLineBreaks: true,
stylesheets: [self.editorCss]
});
var selection = new wysihtml5.Selection(self.editor);
var selectedText = selection.editor.composer.selection.getText();

Accessing textarea value inside td on iframe

I'm freaking out with an issue I cannot solve.
I don't have so much experience with iFrames and jQuery but it's needed to solve this asap because it's a big problem in an app.
I've an iFrame with a div and some rows. I've a textarea and a button whos calling a javascript method who's recovering the value inserted in textarea
But it's not working, either of options I tried have worked.
This is the code, could you help me?
Thank you!
http://pastebin.com/xsWzG2VH
EDIT:
I'm trying to recover the value of TEXTOAYUNTAMIENTO, a textarea inside td structure with that function.
When I press the button to recover it, all of them are empty or null.
This is the method:
function checkayuntamiento(value)
{
alert(value);
alert('Hola');
alert($('#TEXTOAYUNTAMIENTO', window.parent.document).html());
alert('<%=indice%>');
alert('<%=TEXTOAYUNTAMIENTO%>');
alert('<%=DESCMODOENVIO%>');
var valor = document.getElementById("TEXTOAYUNTAMIENTO");
var valor5 = document.getElementsByName('TEXTOAYUNTAMIENTO')[0].value
var valor2 = document.getElementById("TEXTOAYUNTAMIENTO").innerHTML;
//var elem = $('#salida_'+id);
var idi = $("#TEXTOAYUNTAMIENTO").val();
var asdf = $(this).closest('tr').next().find(".AYUNTAMIENTOS").val();
var valor3 = document.getElementById("PRUEBA");
var valor4 = document.getElementById("PRUEBA").innerHTML;
//var elem = $('#salida_'+id);
var idi2 = $("#PRUEBA").val();
var asdf2 = $(this).closest('td').next().find(".PRUEBA").val();
alert(asdf);
alert(idi);
alert(valor);
alert(valor2);
alert(asdf2);
alert(idi2);
alert(valor3);
alert(valor4);
alert(valor5);
}

Dynamicaly creating and removing a div

I have been strugling with this for a while and I am sure there is a simple answer to this. What happens is I remove a div called "payment" then dynamicaly create it again so I can add to it. That then gets repeated as the infomation that needs to be added to it changes.
I have mangaged to get this so far.
function clearPage()
{
var d = document.getElementById("contain");
var d_nested = document.getElementById("payment");
var deleteNode = d.removeChild(d_nested);
}
function createPayment()
{
payment = document.createElement("div");
payment.id = "mine";
document.getElementById("contain").appendChild(payment);
}
function printOnPage()
{
var x = names.length;
for( var i = 0 ; i < x ; i++ )
{
var para = document.createElement("p");
var paymentDiv = document.getElementById("payment");
paymentDiv.appendChild(para);
var txtName = document.createTextNode("Item: ");
para.appendChild(txtName);
var txtNameArray = document.createTextNode(names[i]);
para.appendChild(txtNameArray);
var txtQty = document.createTextNode(" Qty: ");
para.appendChild(txtQty);
var txtQtyArray = document.createTextNode(qty[i]);
para.appendChild(txtQtyArray);
var txtCost = document.createTextNode(" Cost: ");
para.appendChild(txtCost);
var txtCostArray = document.createTextNode(prices[i]);
para.appendChild(txtCostArray);
}
}
Related HTML
<div id="contain">
<p>Payment</p>
<div id="payment">
<br />
</div>
</div>
It needs the ID of payment for both my CSS rules and for my creating the text that goes in it.
This is the error I get in FireFox
Error: paymentDiv is null Source File:
http://itsuite.it.brighton.ac.uk/ks339/sem2/javascript/js.js Line: 76
Hope someone can provide some insight in to this and please tell me if I am completly off!
Thanks
Edit: Is it easior to clear the div rather than delete it, how would I go about doing such a thing?

In create_payment(), you set the ID to 'mine'. Shouldn't it be 'payment'?

I do not understand your requirements very well, but anyway you cannot create multiple items in the page using the same id attribute, if you want to duplicate an item and still have control over it, you should be using class instead.
Try switching your code into jquery it will be cleaner and easier to understand for you & me.

Your problem is the fact that in createPayment() you're setting the id to 'mine':
payment.id = "mine";
while later on in printOnPage() you're looking for the element using id 'payment':
var paymentDiv = document.getElementById("payment");

As you mention in your edit, it is far easier just to clear the div than to remove it, specially if you still need it later.
To clear a DIV-block just set it's content to empty:
document.getElementById('payment').innerHTML = "";
I hope you find a solution! Good luck!