I have a textarea that on button click will be filled with the contents of a certain file. I am trying to implement CodeMirror that will automatically highlight the syntax of the code that is loaded into the textarea.
You have to make sure you have the proper mode js files loaded (look at the external resources in the fiddle) and then it's as simple as a setValue call.
http://jsfiddle.net/blaird/mssrahz1/1/
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
lineNumbers: true,
mode: "htmlmixed"
});
var loadButton = document.getElementById("load");
loadButton.onclick = function () {
// here you'd load your file and then call setValue with the result
myCodeMirror.setValue("<div>Hi There</div>\n<ul>\n\t<li>one</li>\n</ul>");
};
Related
I am rendering a value from django backend to frontend, and I am trying to detect the div value change with MutationObserver. Below is my current code:
MutationObserver part:
window.addEventListener('load', function () {
var element = document.getElementById('myTaskList');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(myFunction);
observer.observe(element, {
childList: true
});
function myFunction() {
console.log("this is a trial")
console.log(element);
console.log(element.innerHTML);
}
// setTimeout(function(){
// element.innerHTML = 'Hello World!';
// }, 1000);
//
// setTimeout(function(){
// element.innerHTML = 'Hello Space!';
// }, 2000);
});
html part:
<div hidden id="myTaskList">{{resultList | safe}}</div>
I am rendering a string "dummyValue" to the div, but just don't see the value from the console.log() statements inside function.
this works well when I uncomment the setTimeout functions though.
Thanks for any help on why MutationObserver won't detect the rendered div value
I finally figured out the reason. Hope this might be helpful for people having similar issues in the future.
So, basically I was using my Django form submit button to do two actions at one time:
1. submit data to the view and process the data in the view;
2. trigger another function with the click action through
Ajax.
The second action was blocked by the first action, and I was only able to get result from action 1.
My solution: I modified action 1 to use Ajax as well. As I mentioned above, I originally used the Django form to submit data. I trigger action 2 inside the success function of action 1. Everything is working well now.
I'm using CKEditor 4.5.5 version.
I add the next code for adding nofollow.
It working fine and stored my DB. but, when I modify the post, CKEditor auto-removed ref="nofollow" attributes.
How can I loading origin attributes on CKEditor?
-- Write page. add nofollow code --
CKEDITOR.on('instanceReady', function () {
CKEDITOR.on('dialogDefinition', function (ev) {
var editor = ev.editor;
editor.dataProcessor.htmlFilter.addRules({
elements: {
a: function (element) {
if (!element.attributes.rel)
element.attributes.rel = 'nofollow';
}
}
});
});
});
You need to modify file ckeditor_config.js.
Add following code:
config.extraAllowedContent = 'a[rel]';
I used .open() to create a tab displaying the HTML in data/search.html and attached data/search.js as a content script file.
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
function executeSearch () {
/* set up search tab */
tabs.open({
url: data.url("search.html"),
onReady: function (tab) {
var worker = tab.attach({
contentScriptFile: data.url("search.js")
});
worker.port.on("searchtext", function (wordsJson) {
worker.port.emit("matchingPages", JSON.stringify(hlutils.matchingPages(wordsJson)));
});
}
});
}
The HTML displays correctly and the content script runs properly, but in the HTML file (which is in valid HTML5) the autofocus property of an input element is not honored. Basically there is no cursor in the page as displayed, and no input can be made without clicking into the input element. I tried doing it the old-fashioned way by using
document.getElementById("search").focus();
in the content script file, and also in a script element in the HTML file (below the referenced element), all to no avail.
Finally figured it out. Had to add the following to the content script file:
window.addEventListener("load", function (event) {
document.getElementById("search").focus();
});
I am using an iFrame to load a page whose url is specified in a text box. Here is my code :
<iframe id="import_url_iframe">
</iframe>
I use jQuery change event to get the change of the url in the text box :
$("#wiki_form_url").change(function(){
var value = $(this).val();
$("#import_url_iframe").attr("src", value);
});
This works fine if I click outside after specifying the url in the text box. But, I need to make this so when I write the url in the text box, it should show the page in iFrame (without any click outside). How can I accomplish that ?
Use an keydown event, possibly with a delay so that it loads after a delay (i.e. when the user hasn't typed for X seconds). So:
var timeout = null;
$("#wiki_form_url").on('keydown', function(){
timeout = setTimeout(function(){
// load URL here
}, 1000);
});
And implementing #JCOC611's suggestion as well, taking code from here, add this code as well:
$("#wiki_form_url").on('keydown', function (e){
if(e.keyCode == 13){
timeout = null;
// Load URL here
}
})'
You could take it further still, and add handlers for when the text box loses focus
$("#wiki_form_url").on('focusout', function (){
timeout = null;
// Load URL here
})'
I have a HAML page with some div elements. I need to inject this into a div on another page when a button is clicked. how do i do this? thanks
You have to add the jQuery plugin from jQuery.com. you can download the plugin or use the link
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js as src in the js file.
then use the follwing code
$(document).ready(function(){
$("#your_button_Id").click(function(){
$.ajax({
url: "test.html",
context: document.body,
success: function(response){
$('#div_Id').html(response);
}
});
});
});
Hope this helps!!!
happy coding.
try $('div').load('lol.HTML') if you want to use jquery
To simplify this process, add the jQuery library to your page.
Below is an example of using jQuery to load data from a different page into the current page:
inject_to = $("div#id"); // the div to load the html into
load_from = "/some/other/page"; // the url to the page to load html from
data = ""; // optional data to send to the other page when loading it
// do an asynchronous GET request
$.get(load_from, data, function(data)
{
// put the received html into the div
inject_to.html(data);
}
Note that this opens for security/xss issues, and I would recommend using .text instead of .html, and load only plain text from the external page. More info on jQuery ajax: http://api.jquery.com/category/ajax/
To do this when a button is clicked, put the above code into a function, like this:
function buttonClicked()
{
inject_to = $("div#id"); // the div to load the html into
load_from = "/some/other/page"; // the url to the page to load html from
data = ""; // optional data to send to the other page when loading it
// do an asynchronous GET request
$.get(load_from, data, function(data)
{
// put the received html into the div
inject_to.html(data);
}
}
Then add an event handler for the click event to the button, like this:
$("button#id").click(buttonClicked);
More info on jQuery events: http://api.jquery.com/category/events/