window.document.write - write html element and more - javascript

I have opened a new window, and now I have a button in this new window. Under this button there is a JavaScript function which should submit the form and insert some content into a <p>. This "to-add" content also has a html element (close button).
This inserting job is not working. Here is what I tried:
myWindow.document.write("<scrip" + "t>function closeme(){ document.getElementById('danke').innerHTML='thanks <input type=\'button\' onclick=\'window.close()\'/>'; } </sc" + "ript>");
Can someone please help me out?

As said in the comments there are better ways to insert scripts, but in the interests of answering the question, you have to escape the escape characters as well so that they will be present in the output.
myWindow.document.write("<scrip" + "t>function closeme(){ " +
"document.getElementById('danke').innerHTML='thanks <input type=\\\'button\\\' " +
"onclick=\\\'window.close()\\\'/>'; } </sc" + "ript>");
(line breaks added for readability)

I agree there are better ways of doing this, but regarding your specific question. There are escaping issues:
myWindow.document.write("<scrip" + "t>function closeme(){ document.getElementById('danke').innerHTML='thanks <input type=\"button\" onclick=\"window.close()\" />'; } </sc" + "ript>");
I'd honestly add text/javascript for consistency.

Related

Replacing apostrophe in string

I'm using phonegap to share an article via WhatsApp.
The code for the button is as follows:
shareArticle += '<li class="rrssb-whatsapp"><a href="javascript: void(1)" onclick="window.plugins.socialsharing.shareViaWhatsApp(\''+$('.article_title').html().replace(/'/g, "&apos;")+'\', null, \'http://www.myaddress.com/showArticle-'+articleId+'\', function() {console.log(\'share ok\')}, function(errormsg){alert(errormsg)});" class="popup" data-action="share/whatsapp/share">';
shareArticle += '<span class="rrssb-icon"><!-- Icon in SVG --></span>';
shareArticle += '</a></li>';
The part that I'm asking about is this:
onclick="window.plugins.socialsharing.shareViaWhatsApp(\''+$('.article_title').html().replace(/'/g, "&apos;")+'\', null, \'http://www.myaddress.com/showArticle-'+articleId+'\', function() {console.log(\'share ok\')}, function(errormsg){alert(errormsg)});"
The button is not working when there is an apostrophe in the title.
The strangest thing is that if I replace &apos; with " it work perfectly (even thought the result is wrong).
Doe's anybody has any idead why &apos; fails?
Thank you all for your support.
The solution is to change the apostrophe to another sign that doesn't break the string.
So what I did is:
$('.opinion_content_title').html().replace(/'/g, "′")
Again, thank you all.
The named character reference &apos; (the apostrophe, U+0027) was introduced in XML 1.0 but does not appear in HTML. Authors should therefore use ' instead of &apos; to work as expected in HTML 4 user agents.

javascript example add remove element

I am struggling with javascript these days, I want to create dynamic add/remove element using java script and i came across following site, but following example doesn't working for me do you know what is wrong in example?
Adding and Removing Elements on the Fly Using JavaScript
I am having issue in following line, which i found using chrome developer tool
var html = '<input type="file" name="uploaded_files[]" /> ' +
'Remove';
Here is the screenshot of google chrome developer tool
You need to escape your quotes.
var html = '<input type="file" name="uploaded_files[]" /> ' +
'Remove';
You might need to escape those single quotes.
onclick="javascript:removeElement(\'file-\' + fileId + ''); return false;">Remove</a>';
That is what I would try.
You want the quotes to be there when you add the text.
You will also have a have files that are named like this
file-1
file-2
Did you add addElement('files', 'p', 'file-' + fileId, html);
At the end of addFile()?
We can't do anything for you if we don't have more information about your 'problem'
Be more explicit in your description.

Apostrophes in jquery/javascript string

I have the following code which appends an icon with an alert after the <a> tag :
$j("li[name='"+node_name+"'] > a").after('<a onmouseover="alert(\' expnote_from_db[n][0] \');" ><ins class="' + selected_class + '"> </ins></a>');
The code above works fine except that it displays exp_from_db[n][0] as a string inside the alert box.
So I changed it to the code below but nothing is displayed now
$j("li[name='"+node_name+"'] > a").after('<a onmouseover="alert(\'"'+ expnote_from_db[n][0] + '"\');" ><ins class="' + selected_class + '"> </ins></a>');
I don't understand where did I go wrong with the apostrophes.
I would appreciate your help regarding this. Thanks
This should work
$j('li[name="'+node_name+'"] > a')
.after('<a onmouseover="alert(\''+ expnote_from_db[n][0] + '\')" ><ins class="' + selected_class + '"> </ins></a>');
The " characters are delimiting the HTML attribute. You are terminating that attribute prematurely.
<a onmouseover="alert(\'"
Nesting JavaScript in HTML attributes is a pain.
Nesting JavaScript in HTML attributes in JavaScript strings is a bigger pain.
Don't do it. Apply event handlers using addEventListener and friends (since you are using jQuery that means using the on method which abstracts them).

How to excute Jquery plugin on an object added at runtime

I have a JQuery plugin that count the character in the textarea .
But if I added the textarea at run time using append("<textarea></textarea>") for example,.
How to execute this plugin on the appended textarea ?
$("textarea").charCount({
allowed: 200,
warning: 30,
counterText: 'Characters left: '
});
adding textarea at runtime ..
$("#btnAddStep").click(function () {
var text = "" +
" <div class='row-fluid'>" +
" <div class='span10'>" +
" <input type='text' class='span12' placeholder='Type something…'>" +
" </div>" +
" <div class='span2'>" +
" <div class='btn-group'>" +
" <button class='btn btn-mini' id='btnAddStep'><i class='icon icon-plus'></i></button>" +
" <button class='btn btn-mini'><i class='icon icon-minus'></i></button>" +
" </div>" +
" </div>" +
" </div>" ;
$("#response>#steps").append(text);
});
Inside your click event handler for the button that you use to add the textarea to the div, add a call to your plugin's method.
As I cannot see the entire code, I am going to assume that the plugin is automatically called at runtime as well, inside a $(document).ready() or something similar. If you add the textarea after this is called you will need to re-run the plugin.
All you will have to do is add the code you posted again to your click event code, but in the interest of efficiency, rather than running the plugin on every text area all over again, I suggest that you add another option to search for textareas with a particular class and then remove that class after the plugin is run on them. This way, you can give all your new text areas this class and after the plugin runs on them it will never look at them again.
Good luck!
EDIT: A friend of mine is looking over my shoulder and suggested that I clarify a bit: you will not have to modify your plugin in any way (granted, I cannot see the full code so I cannot be 100% sure of this, but let's just say that I'm 95% sure). What you would do is change the event handler (and also any call made in the document.ready - which, technically, is an event handler) like so:
$("#buttonID").click(function() {
...your code...
$("#placeToAddNewTextArea").append("<textarea class="newTA"></textarea>");
$("textarea.newTA").charCount({ ......... });
$("textarea.newTA").removeClass("newTA");
});
In other words, you can use CSS as flags and create, use, and remove them all outside of the plugin code.
Look into jQuery SuperLive.
According to the authors:
jQuery SuperLive is my favorite new plugin. Allen Mackley and I created this to solve a ton of applicate JS problems. We needed plugins to work no matter when elements existed on the page, AND, if attributes were ever added, the plugins should re-enable.
SuperLive does all this.
THIS DOES NOT WORK IN IE. ie doesn't support mutation events.
Also requires jQuery 1.7
Demo video: http://www.youtube.com/watch?v=mh5mGR2GyLY
Download: http://code.google.com/p/jquery-superlive/downloads/list

Webpage not working in IE9 (insertAdjacentHTML)

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.

Categories