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();
});
Related
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'm trying to redirect to my price section of my webiste by the following link: https://www.paydomestic.com.br/#pricing
Google chrome works correctly, already in firefox does not work.
but this only occurs via link, if you put the url "https://www.paydomestic.com.br/#pricing" and press enter in the browser works, but not via link!
why is that?
Solved
<script>
/*location.hash returns the anchor part of an URL as a string,
with hash (#) symbol included. */
//wait for page elements to load
//execute function only if the anchor exists in the URL address
window.onload = function() {if(location.hash){
//remove # from the string
var elId = location.hash.replace('#','');
//locate the anchored element on the page by its ID property
var scrollToEl = document.getElementById(elId);
//scroll to the anchored element
scrollToEl.scrollIntoView(true);
}
}
</script>
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>");
};
I have a typical primefaces dialog and it works great but I can't find any options to have it close when someone clicks outside the dialog. I have seen a few jquery examples and I'm guessing I can adapt those for the primefaces dialog but first wanted to make sure there wasn't a solution already?
Thanks.
Just sharing my solution that works globally for any modal dialog. Code adapted from http://blog.hatemalimam.com/get-widgetvar-by-id/ .
When you show a dialog, a mask (that has the .ui-dialog-mask class) is created, and it has the id of the opened dialog, appended with a "_modal" keyword.
This scripts gets that id when that mask is clicked, removes that appended text, and finds the corresponding widget to be closed.
To use it, just save the code on a .js file, import on your page and it will work.
Tested on Primefaces 6.0.
/**
* Listener to trigger modal close, when clicked on dialog mask.
*/
$(document).ready(function(){
$("body").on("click",'.ui-dialog-mask',function () {
idModal = this.id;
idModal = idModal.replace("_modal","");
getWidgetVarById(idModal).hide();
})
});
/**
* Returns the PrimefacesWidget from ID
* #param id
* #returns {*}
*/
function getWidgetVarById(id) {
for (var propertyName in PrimeFaces.widgets) {
var widget = PrimeFaces.widgets[propertyName];
if (widget && widget.id === id) {
return widget;
}
}
}
You can write a javascript function for onClick event and close the dialog.
<h:body onclick="closeDialog();">
function closeDialog(){
widgetWarDialog.hide();
}
I have an other solution for a "modal" primefaces dialog.
I just want to add the click event, when my button is clicked to open the Dialog. And not allways when i click anything on the body element.
Add a styleClass to your button. For example styleClass="mybutton-class".
Then add a widgetVar to your <p:dialog widgetVar="widgetVarName" ...>
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
Additional for Ajax Update Events:
I build 3 JS functions.
//for the first time the page is loaded
jQuery(document).ready(function() {
onLoadFunction();
});
//to load the script after you reload your page with ajax
jQuery(document).on("pfAjaxComplete", function(){
onLoadFunction();
});
//your code you handle with
function onLoadFunction(){
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
}
It is an 8 years old question, but recently I meet the same problem and here is my solution for a modal primefaces dialog.
I wrote a js function which adds a listener to overlay panel around the dialogue
function addListenerOnDialogueOverlay() {
document.getElementById('test-dialog_modal')
.addEventListener('click', function (event) {
PF('test-dialog-widget').hide();
});
}
and call the finction in "onShow" tag of the dialogue
<p:dialog id="test-dialog"
widgetVar="test-dialog-widget"
modal="true"
onShow="addListenerOnDialogueOverlay()">
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/