Jquery string and ace editor value causes error - javascript

I'm using ace editor to edit javascript scripts and I seem to get an error on loading the webpage when I try to add set the value of a variable to "<script>" + jse.getValue() + "</script>";
I have also tried adding .toString() at the end of the editor value
and jse.value()
edit: I also tried "<script>" + jse.getSession().getValue() + "</script>";
Any help would be greatly appreciated.
Update: I have found that its the <script> tag causing the issue I renamed the tag to something else and it worked fine, however I am still confused as to how I can make this work? I'm basically setting the contents of an iframe <body> but need to keep the contents of <body><script>

For anyone in the future experiencing this problem I did manage to find a solution, the problem was I was trying to constantly set the contents of two elements, a parent and child.
My solution was to move the <script> tag from the <body> and place it into the <head> instead.

This plugin https://ace.c9.io/ ?
Maybe you can get the content of
With
var jse = $('.ace_content').html();

Related

Cannot get value of textarea with Shopify Product Options by Bold

I'm trying to get the value of a textarea with Shopify Product Options by Bold and it is currently not working. I am able to get the value of a textarea locally, but I can not get the value when I move the code over to Shopify. I have looked here and here to no avail.
Here's the relevant code:
document.getElementById("248832").onkeyup=function(){getVal()};
var textbox = document.getElementsByName("properties[Message Body]")[0].value;
and here's the textarea I'm trying to get the value of
<textarea data-option-key="ta_248832" id="248832" class="bold_option_child shapp_full_width " name="properties[Message Body]"></textarea>
When I try to run this on Shopify, I get an error saying "Uncaught TypeError: Cannot set property 'onkeyup' of null", although I did notice that at one point shopify runs the following jQuery code, which might be what's causing my problem:
<script>
jQuery('#248832').change(function (){conditional_rules(7437760391);})
</script>
I am trying to get the value of the textarea so I can run get the amount of words in said textarea.
Any help would be greatly appreciated!
Look to see if the element that is returned as null has loaded yet. Others in similar situations fixed this by loading the script last. Hope this is helpful :)
https://stackoverflow.com/a/25018299/1305878
https://stackoverflow.com/a/31333349/1305878
https://stackoverflow.com/a/23544789/1305878
Solution
You are trying to use something similar to jQuery methods without jQuery:
document.getElementById("248832").onkeyup=function(){getVal()};
while DOM elements don't have the onkeyup method. It should be
jQuery("#248832").on("keyup",function(){getVal()});
Extra notes
even without using the recommended '.on' method, you have to write it as
jQuery("#248832").keyup(function(){getVal()});
(docs), not as
jQuery("#248832").onkeyup(function(){getVal()});
If you'd like to use DOM methods, that would be
document.getElementById("248832").addEventListener("keyup",function(){getVal()});
Also, may be you have wrote this as a minimal example, but the fact that you only call getVal() and don't pass the value somewhere sounds strange, although I don't know if what getVal() does exactly.

tinyMCE setContent strips closing p-tag

i want to put the content from a database field to the tinyMCE editor on page load. For that i've got a php function like this:
public function __loadTinyMCE($jobscopeIntroText) {
print '
<script type="text/javascript">
function loadDefaultTinyMCEContent(){
tinyMCE.activeEditor.setContent("'.$jobscopeIntroText.'", {format : "raw"});
}
</script>
';
$jobscopeIntroText is the html content i previously wrote into the tinyMCE editor and comes from the database.
When i write e.g.:
<p>Hello< /p>< p>This is a new line< /p>
it doesnt work and the html code in setContent() is broken after the first closing p-tag. In chrome developer tools the text before the first closing p-tag is red and after that it's black. Even if there are no " or ' within the html.
With only one closing p-tag it works.
Anyone knows the problem here?
I think you should use this code once all contents will be loaded. Therefore there can be ways to achieve desire result:
You can place your database value within editor element and then
initialize tinyMCE editor. (if page is loading)
You can above function just before the before the body tag ends.
You can use document load event or jQuery document.ready() function and just function within it.
I hope this will work for you. Please do let me know for specific scenario.

Dynamically change page title from h1 tag using Javascript

First off, thanks for taking the time to read this question. What a great community Stack Overflow has :)
I need to change the title tag of a page based on the text contained in the h1 element on that page.
I've been searching around, and I have found the "document.title" Javascript function. I've been playing around with it, trying to pull the text from my h1 element that has the class of "Category-H1".
<script type="text/javascript">
document.title = document.getElementsByClassName("Category-H1");
</script>
However, it is just setting the page title to "[object HTMLCollection]", which as I understand is a null value. Is JS the best was to do this? I know my code is jacked, any tips?
Thanks in advance! - Alex
Edit
I have been informed that line of code returns a collection object and not a string. It was pointed to a code example of:
setTimeout(function () { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000);
However, this code produces a page title of "iFinity User Profile - undefined". I have the h1 element on that page set to the id of "test".
You're almost there.
[object HTMLCollection] is not a null value--it is the string representation of a collection of html elements. You want to choose the first one and then get the inner html from it.
document.getElementsByClassName("Category-H1")[0].innerHTML
Also, make sure you do this after the document has loaded. You can either do this by adding the script at the end of your document, or have it run on the onload event of the body.
This should work:
document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;
The getElementsByClassName() function returns a collections of elements ( [object HTMLCollection], so you need to get an element out of it, I'm assuming the first one.
A better solution may be the following:
<script type="text/javascript">
document.title = document.getElementsByTagName("H1")[0].innerHTML
</script>
This would save from setting a h1 class.
This is very close, but I found that - working with Firefox anyway, when you use the getElementsByTagName("H1") it gives you an array as you have recognized. However, it works better using:
<script type="text/javascript">
document.title = document.getElementsByTagName("H1").item(0).innerHTML;
</script>
Note the addition of the .item(0).innerHTML after getting the element rather than the [0].innerHTML.
I don’t know if you have any experience in it or not, but another alternative that seems to be very popular these days is the use of jQuery. As in the earlier discussions, the code below assumes that you are interested in grabbing the first instance of the “H1” tag or the “Category-H1” class. This is an important point because unless you target an “ID” attribute, you will get a collection of items.
This code also assumes that you have already implemented the inclusion of the jQuery library either directly from your website or by referencing a CDN.
<script type="text/javascript">
$(document).ready(function () {
document.title = $("H1")[0].innerText;
});
</script>
The $(document).ready will call it’s enclosed function only after the Document Object Model (DOM) has finished loading, and before the browser’s rendering engine displays the page.
The content inside the function will grab the inner text of the first instance of the “H1” tag and assign that text value to the document’s title tag in the head section.
I hope this adds another layer of help.

Javascript if url equals function for adding text over only one page

What I want to do is pretty simple. Above my blog I want to have a text paragraph with an explanation of the site. However I do not want it to be at the top of every page on the site ONLY the index page. My host has a very restrictive format. I've already asked them for help and it isn't possible with their editor. I cannot edit all of the html but I can change some. Javascript seems to be allowed so I have been trying things like:
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
if (url==http://mysiteaddress/index.html)
{document.write('Welcome to my site')}
//-->
</SCRIPT>
Taking out the if statement, it successfully writes 'Welcome to My site'. So I'm wondering what is wrong with the if statement. I've also tried adding an 'else' in order to see output on any page but have not had any luck.
I obviously don't know much yet so any help would be appreciated. Thanks!
The url is available via location.href - not sure why you think url exists.
Besides that, mime types are lowercase and the language attribute is obsolete. So use <script type="text/javascript">.
Additionally it'd be better if you didn't use the infamous document.write but document.getElementById('someDiv').innerHTML = 'your html here';
Or get jQuery and simply write $('#someDiv').html('your html here');
Just to add, you can prepend an element to the body element like this:
var p = document.createElement("p");
p.innerHTML = "I am a paragraph";
document.body.insertBefore(p, document.body.firstChild);
You can try it here.
Reference: https://developer.mozilla.org/En/DOM/Node.insertBefore

Inserting HTML with jQuery document.ready

I'm a beginner at jQuery and I'm trying to insert a Facebook like button through the jQuery document.ready function.
My external Javascript file (loaded after the jQuery script) has the following code:
$(document).ready(function(){
if ($('#fb_btn').length) {
var fb_code = "";
fb_code += "<iframe src=\"http://www.facebook.com/plugins/like.php?href=" + escape(document.URL) +"&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=80\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:80px;\" allowTransparency=\"true\" >";
$('#fb_btn').prepend(fb_code);
}
});
My HTML code for where I want the button is
<span id="fb_btn"></span>
Currently, nothing seems to load into the span.
I'm trying to use this instead of inserting the code directly because inserting directly slows down the page down a bit too much.
Thanks.
Brian, the errors you're getting on your page seem to be related to the absence of the $ variable. Are you sure you're running your $(document).ready() only after you load your jQuery scripts? Remember...Javascript runs from top to bottom, so if you load your jQuery script after you run anything on the $ or jQuery variables, you will get object undefined errors.
Then, to reiterate what others have said, you should probably close that html string with </iframe> and put the iframe in a block-level element.
I think I just fixed the problem by updating the jQuery on my site. It was version 1.4.2. By using Version 1.4.3, everything seems to work fine.
Either that or there was something modified incorrectly with the jQuery I had.
Thanks for your help everyone.

Categories

Resources