I recently came across ContentTools.js and i thought that might be nice addition to the site im working on. Going through getting started/tutorials gets me nowhere - script is not working however I look at it.
Copying exact same scripts from author page or running it back from master bin works but implementing to actual website fails.
The only thing that worked for me (on empty html page) was that script loaded editable fields erasing it's content either saved or canceled edit (if that makes and sense to you).
$(document).ready(function() {
window.onload = function() {
var editor;
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'data-name');
editor.bind('save', function(regions) {
var xhr, payload, name;
this.busy(true);
payload = new FormData();
for (name in regions) {
if (regions.hasOwnProperty(name)) {
payload.append(name, regions[name]);
}
}
function onStateChange(ev) {
if (ev.target.readyState == 4) {
editor.busy(false);
if (ev.target.status == '200') {
new ContentTools.FlashUI('ok');
} else {
new ContentTools.FlashUI('no');
}
}
}
xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', '/save-my-page');
xhr.send(payload);
});
}).call(this);
<link href="http://getcontenttools.com/styles/content-tools.css" rel="stylesheet" />
<script src="http://getcontenttools.com/scripts/content-tools.js"></script>
<!DOCTYPE html>
<html>
<body>
<p class="editable" data-name="c1">asd</p>
<p class="editable" data-name="c2">123</p>
<p class="editable" data-name="c3">asd123</p>
<div class="ct-app">
<div class="ct-widget ct-ignition ct-ignition--ready ct-widget--active">
<div class="ct-ignition__button ct-ignition__button--edit"></div>
<div class="ct-ignition__button ct-ignition__button--confirm"></div>
<div class="ct-ignition__button ct-ignition__button--cancel"></div>
<div class="ct-ignition__button ct-ignition__button--busy"></div>
</div>
</div>
</body>
</html>
Ofc all libraries are loaded and there is no js errors. It just doesn't work.
First off, you have error in your code, some brackets are not aligned, also you should have one div element around your p elements and init editor around it, in this case it will init editor for each p, here is fiddle http://jsfiddle.net/zx4sw47L/
P.S. There is a problem with loading fonts, because of cross-domain issue, but example is working.
I'm also starting using getContentTools.
From what I understand you have some errors in your HTML markup and you're missing another js file to init getContentTools
<!DOCTYPE html>
<html>
<head>
<link href="http://getcontenttools.com/styles/content-tools.css" rel="stylesheet" />
<script src="http://getcontenttools.com/scripts/content-tools.js"></script>
<script src="/path/to/editor.js"></script>
</head>
<body>
<div data-editable data-name="c1">
<p class="editable">asd</p>
</div>
<div data-editable data-name="c2">
<p class="editable">123</p>
</div>
<div data-editable data-name="c3">
<p class="editable">asd123</p>
</div>
<!-- this should be deleted as it is generated by getContentTools -->
<!--
<div class="ct-app">
<div class="ct-widget ct-ignition ct-ignition--ready ct-widget--active">
<div class="ct-ignition__button ct-ignition__button--edit"></div>
<div class="ct-ignition__button ct-ignition__button--confirm"></div>
<div class="ct-ignition__button ct-ignition__button--cancel"></div>
<div class="ct-ignition__button ct-ignition__button--busy"></div>
</div>
-->
</body>
</html>
The editor.js file should look like this to start
window.addEventListener('load', function() {
var editor;
});
Hope this helps
Related
First time ever touching javascript here, so bear with me.
My file structure looks like so:
I want to change the image in my HTML using js. Here's the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment 3A</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/assignment_3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="data/data.js"></script>
<script src="script/htmlMaker.js"></script>
<script src="script/assignment_3.js"></script>
<script id="news-detail-template" type="text/html">
<img class='news_photo' src='{{photo}}' >
<div class='news_heading'>{{heading}}</div>
<div class='date'>{{Date}}</div>
<div class='news_detail'>{{details}}</div>
</script>
<script id="news-item-template" type="text/html">
<div news_id='{{id}}' class='news_item' > {{heading}} </div>
<img class='news_img' src='data/NBA.jpg'>
</script>
</head>
<body>
<div class="newsDiv">
<div class="left">Latest</div>
<div id="news" class="marquee"></div>
<img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">
</div>
<div id="detail" class="detail">
</div>
</body>
</html>
And then the corresponding js code in assignment_3.js:
function toggle(image) {
if (image.src != "data/pause.png")
{
image.src='data/pause.png';
}
else if (image.src == "data/pause.png")
{
image.src='data/play.png';
}
}
Obviously, something is amiss here, as the browser doesn't seem to recognize my image paths at all. How would I go about doing this correctly?
When you use image.src, it returns the full path of the image. In the if condition, you only checks the relative path of the image. To check for the relative path of the image, you can use image.getAttribute('src').
function toggle(image) {
if (image.getAttribute('src') == "data/pause.png") {
image.setAttribute('src', 'data/play.png');
} else {
image.setAttribute('src', 'data/pause.png');
}
}
<body>
<div class="newsDiv">
<div class="left">Latest</div>
<div id="news" class="marquee"></div>
<img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">
</div>
<div id="detail" class="detail">
</div>
</body>
I have modelled a minimal, complete and verifiable example of your problem in this JSFiddle. I don't see any issues in your toggle logic. The only thing you need to consider is using img.getAttribute('src') instead of img.src. This is because
img.getAttribute('src') - Gives you the actual value that the HTML markup has set
img.src - Effective absolute path of the source
function toggle(img) {
// var playSrc = "data/play.png"; // to use your file instead
var playSrc = "https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-1516951-1285078.png";
// var pauseSrc = "data/pause.png"; // to use your file instead
var pauseSrc = "http://www.pngall.com/wp-content/uploads/5/Pause-Button-Transparent.png";
if (img.getAttribute('src') != pauseSrc)
{
img.setAttribute('src', pauseSrc);
}
else // The part if (image.src == "data/pause.png") is redundant
{
img.setAttribute('src', playSrc);
}
}
With that out of the way, you have a lot of junk in the <head> tag, which you need to remove (I have put them below). Probably, the code isn't working because of that.
<script id="news-detail-template" type="text/html">
<img class='news_photo' src='{{photo}}' >
<div class='news_heading'>{{heading}}</div>
<div class='date'>{{Date}}</div>
<div class='news_detail'>{{details}}</div>
</script>
<script id="news-item-template" type="text/html">
<div news_id='{{id}}' class='news_item' > {{heading}} </div>
<img class='news_img' src='data/NBA.jpg'>
</script>
As Harshana points out, you need to use the getAttribute function to check equality. You can set the image source using a regular assignment operator, but you cant use == to check for equality.
I'm trying to get the child image of a clicked div.
I want to get it's src value. But it's returning undefined.
Could someone point me in the right direction?
Tried using Jquery .find() https://api.jquery.com/find/
Tried using Jquery .children() https://api.jquery.com/children/
Both return undefined.
for (let i = 0; i < $('#draw-raster > div').length; i++) {
$(document).on('click', '#raster-item'+i, () => {
let image = $(this).children('img').attr('src'); //undefined
let image2 = $(this).find('img').attr('src'); //undefined
if (image) {
console.log(image);
return alert("image child found!");
}
return setTimeout(() => {
$('#raster-item'+i).children('img').hide();
}, 4500);
});
$('#image'+i).hide();
}
load html:
for(let i = 0; i < 16; i++)
{
let image = displayImages();
$('#draw-raster').prepend(
"<div id=raster-item" + i + " class='imageh"+i+"' data-id=" + i + "><img src='"+ displayImages() +"' class='image "+i+"' id='image"+ i +"' alt='Failed to load image' width='173.19' height='107.3'></div>"
);
}
html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory</title>
<script src="inc/js/jquery.min.js"></script>
<link rel="stylesheet" href="inc/css/boostrap.min.css">
<link rel="stylesheet" href="inc/css/memory.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container justify-content-center">
<div class="wrapper">
<div class="row">
<div class="col-lg-9">
<div class="card">
<div class="card-header bg-dark" style="color:white;">
<h2>Memory</h2>
</div>
<div class="card-body">
<section class="col-12 mx-auto" id="draw-raster">
</section>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-header bg-dark" style="color:white;">
<h2>Turns</h2>
</div>
<div class="card-body">
<div id="turns">Turns: 0</div>
<div id="sets">Sets: 0</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success col-12" type="button" id="reset">Reset scores</button>
</div>
</div>
</div>
</div>
</div>
<script src="inc/js/memory.js"></script>
</body>
</html>
Both attempts return undefined, i'm uncertain what would work.
Yes, I've been spamming google too. :'^)
A couple of notes on your code:
1) If you want to use this you'll need to switch from an arrow function back to a regular anonymous function. Arrow functions don't have a this of their own and will borrow the context from their outer lexical environment. It's why your code keeps return undefined.
2) You don't need a loop. The benefit of using jQuery is that you can operate on collections of elements all at once. In your case you're attaching a single event listener to a parent element (here: document) and waiting for events to bubble up from the .raster-item imgs and be "captured". This is called event delegation and is useful when you want to process new elements added to the DOM after it has loaded.
2) You will find it easier to use a class instead of many ids.
Here's an example based on your code with these changes:
// Use event delegation to add an event listener to the element with
// the container class that watches out for click events on **all**
// elements with the raster-item class that contain images
$('.container').on('click', '.raster-item img', function () {
// `$(this)` will be the image element, so simply grab its src
// from the attribute
console.log($(this).attr('src'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="raster-item"><img src="https://dummyimage.com/50x50/555/fff.png" /></div>
<div class="raster-item"><img src="https://dummyimage.com/50x50/777/fff.png" /></div>
<div class="raster-item"><img src="https://dummyimage.com/50x50/999/fff.png"/></div>
<div class="raster-item"><img src="https://dummyimage.com/50x50/bbb/fff.png" /></div>
</div>
You don't need jQuery for this. You can harness the power of event bubbling with vanilla JavaScript.
In the web page below, the code inside the script tags, listen for a click event and runs some code if that event happens, i.e. bubbles, through a DIV element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Clicked div img</title>
</head>
<body>
<div class="catcher">
<p>This is a div with an image inside</p>
<img src="image-to-pick.jpg" alt="image to pick" ()>
</div>
<script>
document.addEventListener('click', function (event) {
if (event.target.tagName == 'DIV') {
var imgToPick = event.target.querySelector('img');
console.log(imgToPick.src); // add your code here
}
}, false);
</script>
</body>
</html>
In other words, you trigger a "click event" whenever you click on that page, that event bubbles up until it reaches the root of the HTML document (which you can imagine as an upside-down tree where the root is the html tag).
If you don't need or don't want to let it bubble to the elements "above" you DIV, you can also stop the propagation of that click event by using event.stopPropagation(), right after you handle the img src.
You can find more info about how this works here on MDN (Mozilla Dev. Network)
I'm not quite sure in what context you need to do this, but with jquery it's pretty straight forward.
If you have multiple images within a parent div, you can set the child images as the selecters for the click event, and return each image src when clicked on directly.
The resulting jquery is only three lines long this way, and you can add as many images as you like to the parent div:
<div class="image-container">
<img id="first" src="first-source-goes-here.jpg" alt="img text" />
<img id="second" src="second-source-goes-here.jpg" alt="img text" />
<img id="third" src="third-source-goes-here.jpg" alt="img text" />
</div>
$(".image-container > img").click(function() {
// replace 'alert' with what ever you need it to be
alert( $(this).attr("src") )
})
EDIT:
In response to Andy's comment on my answer below, if you are loading images once the DOM has been loaded, then you could run a check on the click parent div to see if there are any images within it before returning the source:
$(".image-container").click(function() {
if( $(this).children("img").length > 0 ) {
alert( $(this).find("img").attr("src") )
} else {
alert('there are no images here')
}
})
First Thank you for taking the time and reading this:
I have been working on the problem for a while now. I am working on creating my own token/cryptocurrency on the ethereum network using this tutorial video. A few things you should know:
I am using Ganache as a localhost
I am using a Mac computer
I am using the terminal to launch my HTML website with the code npm run dev
I am using atom to write all my code
Now here is the javascript code that I'm getting an error with. In particular where it says App.contracts.CinoCoinSale.deployed().then(function(instance) anything under this function does not work. Even when I do console.log it does appear in my console. Its really weird and I don't know what's wrong
App = {
web3Provider: null,
contracts: {},
account: '0x0',
loading: false,
tokenPrice: 1000000000000000,
tokensSold: 0,
tokensAvailable: 750000,
init: function() {
console.log("App initialized...")
return App.initWeb3();
},
initWeb3: function() {
if (typeof web3 !== 'undefined') {
// If a web3 instance is already provided by Meta Mask.
App.web3Provider = web3.currentProvider;
web3 = new Web3(web3.currentProvider);
} else {
// Specify default instance if no web3 instance provided
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
web3 = new Web3(App.web3Provider);
}
return App.initContracts();
},
initContracts: function() {
$.getJSON("CinoCoinSale.json", function(cinoCoinSale) {
App.contracts.CinoCoinSale = TruffleContract(cinoCoinSale);
App.contracts.CinoCoinSale.setProvider(App.web3Provider);
App.contracts.CinoCoinSale.deployed().then(function(cinoCoinSale) {
console.log("Cino Coin Sale Address:", cinoCoinSale.address);
});
}).done(function() {
$.getJSON("CinoCoin.json", function(cinoCoin) {
App.contracts.CinoCoin = TruffleContract(cinoCoin);
App.contracts.CinoCoin.setProvider(App.web3Provider);
App.contracts.CinoCoin.deployed().then(function(cinoCoin) {
console.log("Cino Coin Address:", cinoCoin.address);
});
return App.render();
});
})
},
render: function() {
if (App.loading) {
return;
}
App.loading = true;
var loader = $('#loader');
var content = $('#content');
loader.show();
content.hide();
// Load account data
web3.eth.getCoinbase(function(err, account) {
if(err === null) {
App.account = account;
$('#accountAddress').html("Your Account: " + account);
}
})
// Load token sale contract
App.contracts.CinoCoinSale.deployed().then(function(instance) {
cinoCoinSaleInstance = instance;
return cinoCoinSaleInstance.tokenPrice();
}).then(function(tokenPrice) {
App.tokenPrice = tokenPrice;
$('.token-price').html(web3.fromWei(App.tokenPrice, "ether").toNumber());
return cinoCoinSaleInstance.tokensSold();
}).then(function(tokensSold) {
App.tokensSold = tokensSold.toNumber();
$('.tokens-sold').html(App.tokensSold);
$('.tokens-available').html(App.tokensAvailable);
var progressPercent = (Math.ceil(App.tokensSold) / App.tokensAvailable) * 100;
$('#progress').css('width', progressPercent + '%');
// Load token contract
App.contracts.CinoCoin.deployed().then(function(instance) {
cinoCoinInstance = instance;
return cinoCoinInstance.balanceOf(App.account);
}).then(function(balance) {
$('.cino-balance').html(balance.toNumber());
})
});
App.loading = false;
loader.hide();
content.show();
}
},
$(function() {
$(window).load(function() {
App.init();
})
});
Then here is the HTML code I am using to run my website on a localhost server. The website looks really good and its working except for one thing:
The part that does not appear and I'm having a problem with is inserting values from previous code. This might be confusing so here is an example: For the piece of code <p><span class="tokens-sold"></span> / <span class="tokens-available"></span> tokens sold</p> there should be values inserted for the class="tokens-sold" part and class="tokens-available" these values should be inserted from the Javascript file I think but it does not work and therefore does not show up on the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cino Coin ICO Sale</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="width: 650px;">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">CINO COIN ICO SALE</h1>
<hr/>
<br/>
</div>
<div id="loader">
<p class="text-center">Loading...</p>
</div>
<div id="content" class="text-center" style="display: none;">
<p>
Introducing "Cino Coin" (CC)!
Token price is <span class="token-price"></span> Ether. You currently have <span class="dapp-balance"></span> CC's.
</p>
<br/>
<form onSubmit="App.buyTokens(); return false;" role="form">
<div class="form-group">
<div class="input-group">
<input id="numberOfTokens" class="form-control input-lg" type="number" name="number" value="1" min="1" pattern="[0-9]">
</input>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-lg">Buy Tokens</button>
</span>
</div>
</div>
</form>
<br>
<div class="progress">
<div id="progress" class="progress-bar progress-bar-striped active" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p><span class="tokens-sold"></span> / <span class="tokens-available"></span> tokens sold</p>
<hr>
<p id="accountAddress"></p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> .</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I would appreciate it so much if the solution would be found. If you need more detail to what the problem is or you don't understand the problem then just say and I will try to explain it in a different way.
Furthermore, here is the video I'm using. I am stuck at time 11:48 where token price is inserted. I have completed the rest of the video series and my code has worked so far.
Again thank you so much I really appreciate it :)
Here is the project folder
This is a snapshot of the folder
Edit
I have done some more research and found out that anything under the App.contracts.CinoCoinSale.deployed().then(function(instance) { does not work. Even when I put console.log("hi"); it will not print out to the console. I still dont know how to solve this but maybe it helps. Its like ignoring that function for some reason
Check what is under App.contracts maybe it did not get loaded properly. There's no way that it doesn't work with contracts object available. The worst case it should have printed the simple console that you were trying. Try to console.log(App.contracts);
I'm trying to use a variable from a page loaded inside a DIV in another DIV.
The text in the "bar" DIV on the "index.html" page should be replaced by the item id selected from the "page.html" loaded as an <object></object> inside the "content" DIV.
Or the item id should at least be stored in a global variable - which hasn't been working either - because when I run a function from the "index.html" page to retrieve it, it displays as "undefined".
All the code is below:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index_style.css">
<title>Access element of other DIV</title>
</head>
<body>
<div id="bar">This text should be replaced by the Item ID selected below</div>
<div id="content">
<object type="text/html" data="page.html" width="100%" height="100%"></object>
</div>
</body>
</html>
index_style.css
body{
margin: 0px;font-family:arial;font-size:30px;text-align:center;color:#fff;
}
#bar{
position:relative;height:100px;line-height:100px;background-color:#555c60;color:#74de90;
}
#content{
position:absolute;top:100px;bottom:0px;right:0;left:0;overflow-y:hidden;
}
page.html
<link rel="stylesheet" href="page_style.css">
<script type="text/javascript" src="main.js"></script>
<center>
This is <b>page.html</b> which has been loaded <u>inside</u> the "content" DIV<br><br>
</center>
<div class="items" onclick="use_item_id(this);" id="item1">Item 1</div>
<div class="items" onclick="use_item_id(this);" id="item2">Item 2</div>
<div class="items" onclick="use_item_id(this);" id="item3">Item 3</div>
page_style.css
body{font-family:arial;font-size:30px;color:#fff;background-color:#1b1e4b;text-align:center;}
.items{cursor:pointer;}
.items:hover{color:#ff0000;}
main.js
function use_item_id(selected)
{
current_item = selected.getAttribute("id");
document.getElementById('bar').innerHTML = current_item;
alert(current_item);
}
The line document.getElementById('bar').innerHTML = current_item; in "main.js" seems to be the problem and I can't get it to work. The alert(current_item); works fine when the line above it isn't there so it's definitely getting the item id's correctly from "page.html". It's just not setting them as the innerHTML on the "index.html" page, or even storing them in a global variable to be retrieved from a function run on the "index.html" page (as mentioned above). Any code examples would be greatly appreciated.
I think it might be because the use_item_id() function is being executed from another page, so I might need some alternatives or other functions to get it to work.
It'd be great if anyone knows what the issue is. I appreciate all replies. Thanks in advance :)
You are not on the same document ... then in main.js
replace
document.getElementById('bar').innerHTML = current_item;
with
parent.document.getElementById('bar').innerHTML = current_item;
this solves your problem.
If you're trying to access variables from HTML documents it's highly recommended to use the data attribute. This is an example for a comment section:
In my item I set the data key for loading
<div class='resp-col col-12 comment-user-data'>
<div class='resp-col col-9'>
<div class="post-profile-image" style='background-image:url("<?=$user->profile_image?>")'></div>
<?=Html::a("<p class='post-user'>".$username."</p>", Url::to(['/account/'.$user->id.'/'.$user->username]))?>
</div>
<div class='resp-col col-3'><button class='reply-to' data-assoc-id='<?=$model->id?>' data-assoc-name='<?=$username?>'><i class="material-icons">reply</i></button></div> <-- set the data-assoc-id
</div>
<div class='resp-col col-12 comment-content-data'>
<?=$model->content?>
</div>
jQuery to load data key
$('.reply-to').on('click',function(){
$('#submit-comment').data('assoc-id', $(this).data('assoc-id'));
$('#comment-content').val('#'+$(this).data('assoc-name')+' ');
$('.base-modal').animate({
scrollTop: $("#comment-content").offset().top
}, 2000);
if($('#comment-content').css('display') == 'none'){
toggleCommentVisibility();
}
});
I'm experiencing stuff with CKEditor. I read the doc, but I can't find a way to do what I'm trying to do.(I'm in Java, in a jsp page)
I have a path
String path = request.getContextPath();
And I need to call this path
<%=path%>/docX/Controller
What I have is very basic:
<div id="editor">
<h1>Hello world!</h1>
</div>
<script>
initSample();
</script>
That works very well, but I want to add content when the page load.
I tried to manually add an iframe in the code with my path, such as
<iframe src="<%=path%>/docX/Controller"></iframe>
But it shows something like this : http://docs.cksource.com/images/9/93/CKEditor_iframe_example1.png
Which is normal if I understood well. If I click on "preview" I'll see what I'm suppose to see. But I want to see it at first and I want to be able to edit it.
The file it will return will be a .html file. So I must get the 'innerHTML' from that file and put it somehow in the editor. It doesn't have to be an iframe if there's an easier way to get the data.
Now I'm trying to get the html from the iframe and put it into a <p>. What I got so far looks like this :
<%
String path = request.getContextPath();
%>
<div class="main">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<iframe id="frame" src="<%=path%>/docX/Controller"></iframe>
</div>
</div>
</div>
</div>
<script>
initSample();
var iframe = document.getElementById("frame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
alert(iframe_contents);
</script>
My alert() shows an empty string, but if I click on preview, I can see the text.
Any kind of help is always appreciated.
EDIT: My html file only have "test" inside it. Nothing like <html> <head> and stuff. I tried
$(document).ready(function () {
var test = $("#frame").contents().find("html").html();
alert(test);
})
But it returns <html></html><body></body>
EDIT 2:
I changed it for
$(document).ready(function () {
var mydocument = document.getElementById("frame").contentDocument;
var serializer = new XMLSerializer();
var content = serializer.serializeToString(mydocument);
alert(content);
})
My result is : <html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"></style></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;"></pre></body></html>
If I open my .html file, all I see is test
I'll answer my question so if someone has the same issue, he could try this solution.
So I removed the <iframe> from my CKEditor and I added an empty <p>. I simply took the returned data of my URL and put it in that <p>.
<%
String path = request.getContextPath();
%>
<div class="main">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<p id="content"></p>
</div>
</div>
</div>
</div>
<script>
initSample();
$(document).ready(function () {
$.get('<%=path%>/docX/Controller').then(function(responseData) {
$("#content").append(responseData);
});
})
</script>
In my case, responseData returns "test". It will also take properties, if your text is bold for exemple.
This will work in IE. But to make it work in chrome, in my case, it will return object XMLDocument. I had to do something like this:
$.ajax({
url: '<%=path%>/docX/Controller',
type: 'GET',
dataType: 'text',
success: function(data){
alert(data);
}
});