I have the following code to display a CKEditor at http://www.wilsea.com/iframe. I can get and set the data within the html document.
<!DOCTYPE html>
<html>
<head>
<script type="text/javaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor2
</textarea>
<div id="someID">Hello world!</div>
<script>
function myFunction() {
var html = 'this is my new text from function1 ';
alert('function 1 test121');
CKEDITOR.instances['editor1'].setData(html);
}
function myFunction2() {
var editorData = CKEDITOR.instances['editor1'].getData();
alert('new data' + editorData);
}
CKEDITOR.replace( 'editor1' );
</script>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Set Data</button>
<button onclick="myFunction2()">Get Data</button>
<p id="demo"></p>
</body>
</html>
I followed this answer here: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
So I added:
<div id="someID">Hello world!</div>.
I have uploaded the app to www.wilsea.com/iframe so there should be no cross domain issues.
The button code is:
var HTML1 = $('#iFrame1').contents().find('#someID').html();
alert(HTML1);
var HTML1 = $('#iFrame1').contents().find('#editor1').html();
alert(HTML1);
I have used the developer tools in Chrome and I see that 'id someID' exits so what part of this am I not understanding here?
My goal is to be able to:
Populate the html content of the CKEditor from my database.
Allow the client to edit / add images etc.
Save the html content of the CKEditor to my database.
I got the answer from here:
https://getsatisfaction.com/application_craft/topics/accessing_an_iframe?utm_source=notification&utm_medium=email&utm_campaign=new_reply&utm_content=reply_button&reply[id]=14399739#reply_14399739
The key is that the DOM element id is not the AC widget name. But you can get and use the DOM id fairly easily with the following ('contextMenu' is the AC name of an iFrame widget in this example)
contextMenuId = 'iframe_' + app.w('contextMenu').base()[0].id;
document.getElementById(contextMenuId).contentDocument.getElementsByClassName('cke_wysiwyg_frame')[0].contentDocument.body.innerHTML
It maybe not relevant to everyone as it is specific to application craft but the thought process may help others.
MRWarby
Related
I'm new to coding so sorry if I'm doing it all wrong, and I know this is very basic.
I'm trying to get a string of text to appear in a webpage using a variable defined in JavaScript in HTML. I've done this so far but the content area is still empty, I don't know where I'm going wrong. I need the var biography to display in the content div when the page is first requested and whenever the button is clicked. Thanks in advance for any help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Katie Jeynes </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="displayBiography();">
<div id="leftBar">
<button class="button" onclick="displayBiography();"> Biography
</button>
</div>
<div id="content" >
<script src="myJS.js"> </script>
<script> displayBiography();</script>
</div>
</body>
</html>
JS code:
var content = document.getElementByID("content");
var biography = "<p> Katie Jeynes is currently in her 3rd year of
study"+
"undergraduate study etc </p>"
;
function displayBiography() {
"use strict";
content.innerHTML = biography;
}
You can set the text by typing:
document.getElementById("content").innerHTML = biography;
If you run the code on a browser and use its console you'll see that you have a sintax error "unterminated string literal" (More info about it can be found here) when defining biography.
You should use either this approach:
var biography = "<p> Katie Jeynes is currently in her 3rd year of study"+
"undergraduate study etc </p>";
or this one:
var biography = "<p> Katie Jeynes is currently in her 3rd year of study \
undergraduate study etc </p>";
If you'd like to add a breakline you can use the HTML tag <br> after the word study to show it to the user.
Also, as j08691 mentioned, getElementById is the correct sintax, not getElementByID.
RaphaMex suggests you to remove the script call from content. You should this and I'd like to explain you why.
Because you are already calling displayBiography() (either by clicking or loading the page for the first time), content.innerHTML will already change the HTML node content and will put inside it the value of your biography.
I work in schools and use google forms to keep track of a number of things.
One of these forms emails people with information from the sheet that is entered.
I have managed to cobble together a good script that provides this service, however, I want it to look good.
My question is simple (or so I believe it is):
When I put in my HTML for the body of the email, how do I call the variables that I have defined earlier in the script?
Do I need to define them in the HTML or can I call them from the JavaScript?
I am not a serious coder by any means but this one has seemed to escape my ability to google it.
Any help would be appreciated.
calling a value of the variable created in javascript, outside the script.
<html>
<script>
var somevariable = "hi"; //this is the variable you create in JavaScript
window.onload = function() {
document.getElementById("blabla").innerHTML = somevariable; //here you send the value of 'somevariable' to html.
}
</script>
<body>
<input type="text" id="blabla" name="someInput"></input>
</body>
</html>
I am not too sure what your code looks like so this is only an attempt to answer what I understand so far.
In you HTML document you don't call variables, you call functions. for example when you click a button, the text would change to what your variable is by calling the onclick Event inside the button, ChangeText() will be the function for the first example:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<button onclick="ChangeText()">Button</button> <!-- onclick event -->
<script>
var p1 = document.getElementById("p1"); //variable created
function ChangeText () {
//when you click the button this function will be called
p1.innerHTML = "Changed text on button click!";
}
</script>
</body>
</html>
You could also call on the load of the document (but this would mean that you would't see what it was before):
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<script>
var p1 = document.getElementById("p1"); //variable created
p1.innerHTML = "Changed text on page load!"; //change text on load
</script>
</body>
</html>
hope this helps.
I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).
Using this script :
<html>
<body>
Hello!! <br>
<form id="form1" action="http://127.0.0.1:5000/post">
<fieldset>
Tags:
<div id ="freeTags" ></div>
<p id='tag'></p><br><br>
</fieldset>
</form>
<script src="./node_modules/taggle/assets/js/taggle.js"></script>
<script>
var text = document.getElementById('tag');
new Taggle('freeTags', {
onTagAdd: function(event, tag) {
text.innerHTML = "You just added " + tag;
},
onTagRemove: function(event, tag) {
text.innerHTML = "You just removed "+ tag;
},
duplicateTagClass : "bounce"
});
</script>
</body>
</html>
I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:
And it is also not implementing the 'bounce' function although I installed bounce.js using bower.
I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?
The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.
Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
</head>
<body>
<!-- your content... -->
</body>
</html>
I am trying to create a DOM based attack using a html file.
The file is as follows :
<html>
<head>
<script type="text/javascript">
function fun() {
var val = document.getElementById("mytext").value;
document.getElementById("p1").innerHTML = unescape(val);
}
</script>
</head>
<body>
<p id ="p1">Empty</p>
Give input : <input id="mytext" type="text" value="abcd" >
<input type="button" id="b1" onclick="fun()" value="Change link" >
</body>
</html>
When I pass <script>alert('hello world');</script> inside the text box and click on the button the p tag doesn't run the script. What might be the possible reason? I am learning XSS for testing our website for security.
Try inserting instead. Scripts do not run when inserted into innerHTML.
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.