IE is giving me an error (Error: Invalid target element for this operation.) when trying to execute this code:
var d1 = document.getElementById( name + '-body');
d1.insertAdjacentHTML('beforeend', html );
Without having to put the entire function in here, the point of it is to add some text inputs dynamically when a user clicks a button. I did a bit of searching and found many statements that insertAdjacentHTML doesn't work right within tables, which is what I need it to do.
Is there a workaround for this?
Edit: Here is the html I am trying to insert. If you want I can post the generated html from Chrome also.
"<tr id=\"node-" + counter + "\">
<td>
<textarea onclick=\"Common.removeInstructions(id)\" name=\"on\" id=\"action-" + counter + "\" wrap=\"soft\" cols=\"35\" rows=\"4\" style=\"resize: none; overflow: hidden;\">
Please limit responses to 150 characters. Blank fields will be ignored.
</textarea>
</td>
<td>
<input classname=\"TextInput\" id=\"actionDate-" + counter + "\" newline=\"1\" style=\"width: 100px;\" class=\"TextInput\" assemblers=\"jaba.ui.input.TextInput\" jaba-pagerowindex=\"1\"/>
</td>
</tr>"
IE often doesn't allow you to dynamically add table rows/cells.
Pre-creating the rows/cells which you want added with display:none, then changing their innerHTML and display when needed is an useful workaround for that.
Adding FabrÃcio Matté as an answer so I can accept it.
If you'd show us the generated HTML and what you're trying to do, it'd be much easier to reply. Anyway, I've had a problem inserting rows/cells in a table on IE before, my solution was pre-creating the rows/cells with display:none when the table is created, then changing the 's innerHTML together with their display.
Related
I want to use the currently selected text in the office document to be replaced by the same selected text but surrounded with html. Effectively adding a hyperlink to the current selection.
I first read the text property of the selection
var objRange = objContext.document.getSelection();
objRange.load('text');
followed by
return objContext.sync().then(function(){
var strSelection = objRange.text;
objRange.insertHtml(
"<a href='" + decodeURIComponent(strHyperlink) + "'>" + strSelection + "</a>",
Word.InsertLocation.replace
);
return objContext.sync().then(function(){
objDialog.close();
});
});
I need a sync to read the text and then another one to write the updated text back into the document after that I close a dialog. But this sometimes causes the html to get written into the document twice. Is there a better way of doing this instead of with double context syncs?
To answer your question, if you need to read the text and then write into a different context, you'll need two syncs.
But you might take a look at the Range.hyperlink property, which is writeable. I don't know if it'll give you a way to avoid two syncs, but is intended for what you seem to be using insertHtml to do.
The code below sets up an edit interface from the data that is already on the form, which works fine. Except that according to this msdn article, any tag that is self closed (ex: <div />) does not have an innerhtml property. This makes it so my personal jscript calendar library chokes on the innerHTML assignment to the div that is being created.
fields.find("p[item][type='Calendar']").each(function() {
index++;
var currentText = $(this).html();
$(this).html("<input id=\"calInput" + index + "\" type=\"text\" value=\"" + currentText + "\" /><div id=\"cal" + index + "\"></div>");
myFactory.newCalendar("cal" + index, "calInput" + index);
});
How can I force jQuery to use the html I've outlined below instead of creating the self-closed div?
Edit: The html code that results from the above is:
<div id="cal2" style="" class="jcalStyle hide"/>
I need it to be:
<div id="cal2" style="" class="jcalStyle hide"></div>
Edit 2:
Firefox is generating the HTML properly. I don't know why IE8 is self-closing (voiding?) the div.
The article isn't saying that self-closing tags have no innerHTML. It's saying that tags with the empty content model (void elements, in spec-speak, like img) don't have it.
Note also that in HTML, div cannot be written <div/> (reference). It must be written <div></div>. Many, many tools (jQuery, for instance) let you play fast and loose with the rules, but don't worry, jQuery isn't actually adding that tag to your page markup (it's adding the element to the DOM, which is a different thing entirely). That <element/> syntax is only allowed on void elements (like img) and foreign elements (like SVG stuff).
I have the following function:
<script type="text/javascript">
function changeText(elem){
var oldHTML = document.getElementById(elem).innerHTML;
var newHTML = "<span style='color:red'>" + oldHTML + "</span>";
document.getElementById(elem).innerHTML = newHTML;
}
</script>
And the following HTML:
<table>
<tr>
<td id = "foo">bar</td>
</tr>
</table>
This throws a "unknown runtime error" (just in IE) which googling has since taught me that table elements are read-only in IE with innerHTML.
I've tried finding workarounds but they don't target my specific problem, which is just that I want to make the word "bar" red. I don't want to change the word "bar" to something else. Purely a color change.
Is there any way to do this without a complex and slow DOM function and without having to change any of the other HTML markup on the page? This is a table with a form in it, and if the surfer submits the form with an error, the "errored" fields should turn red. It has to be able to execute multiple times because it's possible for a surfer to mess up more than one field.
Thanks for any advice.
Why not just change the cell to have color:'red' :
var td = document.getElementById(elem);
td.style.color = 'red';
Couple ways to go about it. Here are some quick ones to get you going -- or until someone else comes with a cleaner/better method.
I prefer the following: define an error class in css:
.errorHighlight { color:red;}
Then for the javascript:
function changeText(elem){
document.getElementById(elem).className="errorHighlight";
}
function changeTextBack(elem){
document.getElementById(elem).className="";
}
This assumes that you don't have any classes set already. If you do you may need to read the name, and append the error class with a space.
Again, there are a lot of ways to approach this and you want to pick the one best suited for your application.
The idea: I'm setting the value of an input with type="hidden" via regular Javascript or jQuery.
The issue: neither jQuery nor document.getElementById will find the hidden input, even though I'm absolutely sure the selector is correct and there are no conflicting elements.
The code:
I can't really post much of it, because it's full of rather complicated PHP that confuses me when I just look at it.
Here's the javascript:
$("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total);
Note: there's nothing wrong with the selector, and the "input" is a different element that I'm using to reference the hidden.
Here's the HTML:
<input type="hidden" name="s<?=$step_counter?>_budget_hidden"
id="s<?=$step_counter?>_budget_hidden" value="0" />
The code is kind of out of context, but it's more of a general problem with Javascript than a syntactical error. Thoughts?
In $("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total); you take two chars before the first underscore in your hidden id. However your hidden id have only one char 's'
EDIT
Ok the <?= ?> was hidden before the question edit.
Do you call your script after the body onload event?
EX:
$(document).ready(function(){
$("#" + input.id.substr(0,2) + "_budget_hidden").bind("keyPressed",function(){
$("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total);
}
});
FYI: We can get the hidden input value using jQuery, even we can also edit any hidden input value using jQuery.
I think your way of getting the hidden value using 'substr' method is causing some problem. You are using like substr(0, 2) so are sure that the variable $step_variable is a single digit number, otherwise your code will not return correct result.
I am giving some sample code below, check it once.
Here's the javascript:
var input_id = $("hidden_val").attr("id").substr(1);
$("#" + input_id + "_budget_hidden").val(budg_total);
Here's the HTML:
input type="hidden" class="hidden_val" name="s_budget_hidden" id="s" value="0"
I think this will help you. Let me know if you are not following this flow to solve your issue.
I think that input.id.substr(0,2) says to start at the start of the string, take 2 characters and use that.
http://www.w3schools.com/jsref/jsref_substr.asp
Try using Firebug to see what the result of that method call is.
I have created a small application written in XHTML, JavaScript/JQuery and PHP.
The PHP reads and writes to a small SQLite database.
How would I go about inserting <td> cells into a pre-scripted table. The cells would need to be configured using some information from my database. For example, below are two cells with their data retrieved from my database:
Cell One
Starts: 120px;
Finishes: 180px;
Background: Blue;
Cell Two
Starts: 240px;
Finishes: 300px;
Background: Green;
On my table row, it is 500px in width. How would I insert the cells above into the row. In this example, the first cell would start 120px into the row and have a width of 180px. The second cell would start 240px into the row and have a width of 300px.
I just can't seem to work out a way of doing this, any ideas would be very helpful.
Thank you for any input, all is appreciated.
Hunter.
forgive me if this answer is too simplistic but it sounds like you just need to loop through a variable that stores the cells that need to be inserted into a table that already exists.
Then you can dynamically generate the styles of whatever tag you need to edit such as style="<?= background-color:green; ?>"
I'm not exactly sure what you mean by starts and finishes. If your trying do placements then it will be a lot more complicated and you need some sort of position element in your db that can be referenced. But if you just mean height and width then you can also add these elements to the dynamically generate style
Not entirely sure what you're asking, but I'll give it a shot.
var c1 = 'stuff, stuff stuff.' // Your data for cell1
, c2 = 'more stuff.' // Data for cell2
$('table tr:first').append(
// Ugly multiline string
'<td width=120></td>
<td width=60 style="background-color: blue">' + c + '</td>
<td width=60></td>
<td width=60 style="background-color: green">' + c2 + '</td>
<td width=200></td>' // Filler
);
When building the tables, Put html comment tags with parameters so you can scan pre created output and insert where and how you like.
<table>
<!--|str1|2|60|100|--><tr>
<!--|str1td1|--><td width='60'>content row 1</td><!--|etr1td1|-->
<!--|str1td2|--><td width='100'>content row 2</td><!--|etr1td2|-->
</tr><!--|etr1|-->
<!--|str2|2|60|100|--><tr>
<!--|str2td1|--><td width='60'>content row 1</td><!--|etr2td1|-->
<!--|str2td2|--><td width='100'>content row 2</td><!--|etr2td2|-->
</tr><!--|etr2|-->
</table>
Then if you want to go back into your output and insert stuff, just strrpos (php) to the tr you want to edit and gather between comment tags, pharse the pipe seperated fields, you know the first is the id tag, the second is how many td's and the next two can be added to figure the width so far. Then find the tag for the end of the td you want to insert into after. Do your insert (include new tags!). Then go back and re comment the tr info you just read and include new row and information.
After all done and ready to output, go back and remove and the comment tag stuff from output. Or leave it in if you are lazy, it is just html comment stuff that will not be seen but kinda heavy on the text size side.
Sounds more complicated than it is, kind hard to explain but you should know exactly what i mean and the process can be more elaborate or simple to meet your needs.
If this is close to what you need, then hope this helps or ask me more, if not then i am sleepy so please excuse me.