Inserted code producing unexpected result - javascript

So eventually I want to have a greasemonkey script but for now I have only been working with firebug to test out my html/javascript.
I have this code to insert one button in the HTML toolbar for blogger.
The button is supposed to replace all the with " " as blogger seems to just randomly add into my blogs posts and can cause the published article to look weird (a bunch of words separated in between with s will not want to break in the middle unlike the same words separated with " ").
document.getElementById("postingHtmlToolbar").firstChild.innerHTML += '<div id="SP" class="goog-inline-block goog-toolbar-button" title="SP" role="button" style="-moz-user-select: none;"><div class="goog-inline-block goog-toolbar-button-outer-box"><div class="goog-inline-block goog-toolbar-button-inner-box"><b>SP</b></div></div></div>';
Which trimming away the formatting just leaves us with.
<b>SP</b>
The funny thing is that that same code (minus the href, javascript: stuff) run from firebug works perfectly.
But when it is inserted like this and run it blanks the entire web page and writes the value of document.getElementById('postingHtmlBox').value.replace(/ /g, ' ') into this black page.
Am I forgetting something stupid? Is this supposed to happen? Do I have some stupid syntax error? What would you suggest as a solution?

Don't put JS code in href. use onclick:
<b>SP</b>

Try adding void(0); to the end of the href.
Basically, the output of the last statement (if any) is replacing the document (i've had the same problem), so making the last statement one with no output will avoid the problem

Related

How can I get textContent of an element with line breaks? JavaScript - Chrome Extension

I'm building a Chrome extension similar to Grammarly. Basically, I want to replace text inside gmail's compose box.
The problem I'm facing is, when I type something like "What's up?" in the compose box, it's adding some spans that shows grammar errors and other errors and it's going to look like this.
<span zeum4c5="PR_8_0" data-ddnwab="PR_8_0" aria-invalid="spelling" class="LI ng">
how
</span>
do
<span zeum4c5="PR_7_0" data-ddnwab="PR_7_0" aria-invalid="grammar" class="Lm ng">you do</span>
?
<div id="signatureDiv" class="signatureDiv"></div>
Even if this is a single sentence, I cannot replace the sentence without damaging this HTML tags. If I use
element.innerHTML.replace("how do you do", "some text");
it won't work because it cannot find something like that in innerHTML.
I can use element.textContent but it will remove the line brakes in the text.
So what are my options here?
Any comment will be helpful!

Editing Javascript File

I am editing a javascript file for the first time and was wondering if someone could help point me in the right direction.
h&&""!=g&&(k+='<strong>Get Directions:</strong> '+g+"<br>"),
The code above is just a snippet from a larger file but is what I am trying to edit. I have added 'Get Directions' but now I want to remove the URL being shown in the middle of the link so that it reads "Click Here".
The +g+ is outputting an office URL.
I am unsure of how to edit the line as everything I do breaks the module.
E.g. example that does not work....
h&&""!=g&&(k+='<strong>Get Directions:</strong> 'Click Here"<br>"),
It's confusing because you are using ' and " on the same line to enclose strings. The "Click Here" text should be inside the string like this:
Click Here<br>')
Does this work?
h&&""!=g&&(k+='<strong>Get Directions:</strong> Click here<br>'),

HTML tags selectively stripped out

On the results page of this quiz, when you get an answer wrong, there's explanatory text given. For some reason, html tags like <strong> are stripped out of that text, even though they display correctly everywhere else in the quiz. I've checked both js files but can't find the culprit. Any ideas?
I'm trying to add formatting in this line of Q/A js
$('#quiz-form').append('<p class="special" id="special_'+key+'" ><strong>Correct answer(s): '+answer+'</strong> '+special+'</p>');
I think you should replace the " with this " in this Q/A.js file for content
this link has list the characters which
http://www.ascii.cl/htmlcodes.htm
check this example
JS Fiddle

unterminated string literal error when storing dynamic content with javascript

I imagine this has been asked many times but I am having problems with the above error,
What I am trying to do is have a cortina effect menu whose child divs content will change depending on a variable which is coming from a drop down menu.
So I wrote roughly how the content of the div would look for one option in a bid to test it out and this is what I have:
function popupContent(selectedText)
{
return '<div>Operating System:
<a class="changer">+<\/a><select class="firstSelect">
<option>Windows<\/option>
<option>OSX<\/option>
<option>Linux<\/option>
<\/select>
<\/div>
<div>Releases:<a class="changer">+<\/a><select class="secondSelect"><option>11.0<\/option><option>11.2<\/option>
<option>10.1<\/option>
<\/select>
<\/div>';
}
I set the content of the div using $('#divname').html(popupContent(this.name));
When I try to load the page I get a unterminated string literal error, I have spent some time looking around and most of the questions seem to be when the word script is in it (which I don't have) and escaping / characters which I have tried as you can see.
Can anyone shed some light on this please?
Your string has line breaks in it.
You can do this instead:
return '<div>Operating System:' +
'<a class="changer">+<\/a><select class="firstSelect">' +
'<option>Windows<\/option>' +
etc.

Expansion of Struts 2 Tags Messes Up Rendering Of Page

Often times, when I use struts 2 tags, the loading of a page will be incomplete apparently because of single quote or double quote characters from the struts 2 tag interfering with such characters from javascript.
One example I am very eager to get working is as follows:
var me = '<s:a href=\'http://www.google.com\'>Google Link</s:a>';
$('#appnSelect').html(me);
So what I am concerned about is when single and double quotes are inside that me string on the right side of line 1. Ultimately, I need to get <s:select> to work, but this problem seems to creep in with a number of tags like the above example. Replace the <s:a> tag with an <a> tag, and voila, it works. However, when the <s:a> tag gets expanded, the page will incompletely load.
Is there an easy solution somewhere I am missing? One thing I did try was with the theme attribute setting theme="simple" because sometimes that helps me when the output gets rendered incorrectly. That did not work in this case.
Generating HTML from tags like that in the middle of a JavaScript string constant is always going to be an ugly business. In addition to quote characters, you're also likely to get newlines. Strictly speaking you don't know what you're going to get, and you can't control it.
One thing that comes to mind is that you could drop the tags into dummy <script> blocks marked as a non-JavaScript type:
<script id='anAnchor' type='text/html'>
<s:a href='http://www.google.com'>Google Link</s:a>
</script>
The browser won't try to execute that. You can then do this in your JavaScript code:
$('#appnSelect').html($('#anAnchor').html());
What should work with very little thinking:
<s:a id="google" style="display: none;" href="www.google.com">Google Link</s:a>
Now just grab the the element using the id in your script. Might be better if you set up a class. There are id, style and class attributes for all struts2 tags.
I believe the issue is with your escaping of the single quotes inside the <s:a> tag. In my experience with using <s:url>, I've done the following:
var url = "<s:url value='/someAction.action' />"
I believe the same syntax should hold true for <s:a>.
Additionally, look in your JSP container's error log, and see if you can find an error relating to that <s:a> tag. That may provide some additional insight to the problem.
This is my answer, which will not be the best answer because Pointy's response pointed me in the correct direction. However, up votes still appreciated :)
First, you need the script blocks which are not rendered. I have 2 because a checkbox will toggle between which one is displayed:
<script type="myType" id="abc">
<s:select name="selectName" list="#list1" listValue="%{prefix + '-' + name}" theme="simple"/>
</script>
<script type="myType" id="abc2">
<s:select name="selectName" list="#list2" listValue="%{prefix + '-' + name}" theme="simple"/>
</script>
Next, I create a region which is blank in the html code
<div id="innerRegion">
</div>
Then, I need to put something on the screen when the page first comes up, so go with this:
<script type="text/javascript">
$(document).ready(function(){
$('#innerRegion').html( $('#abc').html() )
});
I needed to put this at the end of my document because onLoad was already being used by a parent page. So I am saying abc is the correct default.
Then I need logic to handle what happens when the checkbox is pushed:
var buttonPressed = false;
$(window).load(
function()
{
LocalInit();
});
function LocalInit() {
$('#myForm input[name=buttonValue]').change(
function()
{
buttonPressed = !buttonPressed;
if (buttonPressed == true)
{
$('#innerRegion').html( $('#abc2').html() )
} else
{
$('#innerRegion').html( $('#abc').html() )
}
$('#dataId').href = document.location.href;
}
);
}
I think what was tripping me up ultimately was that I was trying to force the s:select tag through jQuery functions when as you see above it did not turn out to be necessary. I could just write the s:select as normal.

Categories