I found this in the documentation of bootstrap-wysihtml5:
The underlying wysihtml5 object
You can access the wysihtml5 editor object like this:
var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");
So I tried this:
<script type="text/javascript">
var myCustomTemplates = {
link : function(locale) {
return "<li>" +
"<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" +
"<div class='modal-header'>" +
"<a class='close' data-dismiss='modal'>×</a>" +
"<h3>" + locale.link.insert + "</h3>" +
"</div>" +
"<div class='modal-body'>" +
"<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" +
"</div>" +
"<div class='modal-footer'>" +
"<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
"</div>" +
"</div>" +
"<a class='btn' data-wysihtml5-command='createLink' title='" + locale.link.insert + "'><i class='icon-link'></i></a>" +
"</li>";
},
"font-styles": function(locale, options) {
return "<li>" +
"<a class='logo'>Logo</a>" +
"</li>" +
"<li>" +
"<a class='btn btn-paragraph' data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='p'>" + locale.font_styles.p + "</a>" +
"</li>" +
"<li>" +
"<a class='btn btn-paragraph' data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='p'>" + locale.font_styles.p + "</a>" +
"</li>";
}
}
$('#wysihtml5-textarea').wysihtml5('deepExtend', {
"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": true, //Button which allows you to edit the generated HTML. Default false
"image": false, //Button to insert an image. Default true,
"link": false,
"format-code": false, // enable syntax highlighting
customTemplates: myCustomTemplates,
"events": {
"focus": function() {
//var wysihtml5Editor = $('#wysihtml5-textarea').wysihtml5().data("wysihtml5").editor;
//wysihtml5Editor.composer.commands.exec("insertHTML", "<a href=...>");
}
},
parserRules: {
tags: {
p: {}
}
},
"stylesheets": ["<%= root_url %>wysiwyg-color.css", "<%= root_url %>github.css"], // CSS stylesheets to load
});
</script>
But it seems like it is breaking the code:
GET http://localhost:3000/posts/lib/css/wysiwyg-color.css 404 (Not Found)
And wysihtml5Editor.composer.commands.exec is not working either.
(The file loads just fine if I don't include the content inside "focus": function() {)
What the right way of doing this?
EDIT
Here's a minimally working code, to use as a starting point:
// I use this to keep this code out of the global scope.
// This takes this form: (function($){...})(jQuery);
// and allows me to use $ without worry about it interfering
// with other libraries and frameworks that share it's use.
(function priv($) {
// This is another scope thing; I can set the reference
// later on, but it will be in the parent scope, so I
// can cache these and then access them from within a
// window.onload handler, for instance, that I create
// further down.
var $editor,
opts;
// A more elegant, clean way of doing what was in the docs.
opts = {
// Note, it's not necessary to use quotes on labels in
// object notation, UNLESS there's something not allowed.
// This and format-code have comments ONLY because they
// have that infernal dash in there. No others in this
// list do, however.
'font-styles': false,
'format-code': false,
emphasis: true,
lists: true,
html: false,
image: false,
link: false,
events: {
// Passing a reference to a function I've declared
// later. I could not have this before the actual
// functions, though, if I use var onload = function...
// since "hoisting" does not occur. So, be careful
// emulating this too liberally if you don't under
// why it works.
load: onload,
focus: onfocus,
blur: onblur
}
};
// I'm using the `window.onload` method to setup my editor
// AFTER the page has loaded and the DOM is ready.
$(window).on('load', function load() {
// See, I set this up here, and can access it in the
// onload, onfocus, and onblur handlers without
// requerying. It's called caching a reference.
$editor = $('#wysihtml5-textarea');
$editor.wysihtml5(opts);
});
function onload() {
console.log('load');
}
function onfocus() {
console.log('focus');
}
function onblur() {
console.log('blur');
}
})(jQuery);
http://jsfiddle.net/userdude/nWebx/5/
I put the wysihtml5 editor demo in a properly running fiddle and then modified it to run your referenced code:
$(window).on('load', function load(){
/*$('.textarea').wysihtml5();
$(prettyPrint);*/
$('#wysihtml5-textarea').wysihtml5('deepExtend', {
"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": true, //Button which allows you to edit the generated HTML. Default false
"image": false, //Button to insert an image. Default true,
"link": false,
"format-code": false, // enable syntax highlighting
customTemplates: myCustomTemplates,
"events": {
"focus": function() {
var wysihtml5Editor = $('#wysihtml5-textarea').wysihtml5().data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("insertHTML", "<a href=...>");
}
},
parserRules: {
tags: {
p: {}
}
},
"stylesheets": ["<%= root_url %>wysiwyg-color.css", "<%= root_url %>github.css"], // CSS stylesheets to load
});
})
http://jsfiddle.net/userdude/nWebx/2/
With this as-is, I receive this error in Chrome Console:
Uncaught ReferenceError: myCustomTemplates is not defined
So I comment that line out, and it runs. Try it:
http://jsfiddle.net/userdude/nWebx/1/
Now, I am running the editor code within a window.onload event using jQuery's $.on() event handler method:
$(window).on('load', function load(){
$('#wysihtml5-textarea').wysihtml5('deepExtend', {
...
});
}) // <<< I'd try to always using `;` at the end of statements.
And I also get no errors with the focus handler, although I need to check that it's event running to beginning with. So, what is in myCustomTemplates?
Try something like this:
var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");
var focusHanlder = function(){
console.log(wysihtml5Editor);
wysihtml5Editor.composer.commands.exec("insertHTML", "<a href=...>");
}
var secondFocusHandler = function(){
console.log(this);
this.composer.commands.exec("insertHTML", "<a href=...>");
}.bind(wysihtml5Editor);
where focusHandler uses the exterior variable wysihtml5Editor and secondFocusHanlder uses that variable as this inside the call. Now pass one of those variable to the focus event.
Here is a little example of using the events on wysihtml5Editor: https://github.com/xing/wysihtml5/wiki/Events
Related
I have been trying to get the tag of a deleted chip from the div in the Materialize chips class, but nothing is working.
Here is what I have already tried.
$('.chips').on('chip.delete', function(e, chip){
console.log(chip);
console.log(e);
console.log(chip.tag);
});
None of the above is working.
With just only console.log(chip), I get undefined error in JavaScript console, but the function is firing when I delete the chip. I am just not able to get the value of tag of deleted chip. I want to store the tag in a variable.
I am creating chips dynamically on Materialize date select:
$('#pm_date').change(function () {
var chipvalue = $(this).val();
if (chipvalue !== "") {
// checking if tag already exits
if ($("#date_chip_select:contains(" + chipvalue + ")").length > 0) {
alert('Date already selected');
} else {
var appendstring = "<div class='chip' id='date_chip_child_" + chip_id + "'>" + chipvalue + "<i class='material-icons close'>close</i></div>";
}
}
});
Here is the fiddle: https://jsfiddle.net/hq22mne4/1/
chips.js, which is part of materialize, doesn't seem to expose any methods for adding or removing chips programmatically. It seems to exclusively listen for an enter keydown event and then internally add the chip.
So, I stitched together a workaround that does just that. I set potential chip's value within your onchange event:
$("#datechips").find('input').val($(this).val());
And create the chip when date picker is closed:
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
onClose: function() {
// add chip via filling the input and simulating enter
$("#datechips").find('input').trigger({ type : 'keydown', which : 13 });
},
});
It may not be ideal, but you should be able to tailor this going forward.
https://jsfiddle.net/j3ej8240/
I've also had a lot of trouble working this out. This is how I capture the add and delete chip events without using jQuery:
function chipDeleted(e, data) {
console.log("Chip was deleted with text: " + data.childNodes[0].textContent);
}
function chipAdded(e, data) {
console.log("Chip was added with text: " + data.childNodes[0].textContent);
}
//
document.addEventListener("DOMContentLoaded", function (e) {
console.log("DOM fully loaded and parsed");
var firstTag = "Initial Tag";
var elems = document.querySelectorAll('.chips');
var instances = M.Chips.init(elems, {
data:[{
tag: firstTag
}],
autocompleteOptions: {
limit: Infinity,
minLength: 1
},
placeholder: "No search...",
onChipDelete: function (e, data) { chipDeleted(e, data) },
onChipAdd: function (e, data) { chipAdded(e, data) }
});
});
And my HTML part is like this:
<body>
<div class="chips search-history"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
I have been having problems with deep-linking when I want to make a back or forward recall to some php script that involves a query to my data base.
I think that whats happening is that when a link requires a php script that is on a deeper level it doesn't makes the callback to the server. It just works when it uses the same php script that uses the link that was displayed right back or after it.
This is my JS function:
function loadload(loc) {
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$(loc).load(url);
}
// Event handlers
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$(loc).load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
})
$('a').click(function(){
loadURL($(this).attr('href'));
});
});
};
This is my php echo line:
echo "<li><a onclick='loadload("."""."#txtHint".""".")' href="."'php/getdaimler.php?q=".$row['Program']."'"."rel="."'address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
Also it makes my page become slower when several links have been triggered.
If there are some better functions or methods to use it would be great.
I'll appreciate your answers.
The posted jQuery Code can't work like this. First you use an inline event handler (onclick) inside the html code.
echo "<li><a onclick='loadload("."""."#txtHint".""".")' href="."'php/getdaimler.php?q=".$row['Program']."'"."rel="."'address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
The method you call is loadload, the parameter is "#txtHint" which is used as a jQuery selector, but will never match any DOM Element. My best guess is, you want to load the server answer to an element with the id 'txtHint', in that case the selector would be: #txtHint.
Now to the jQuery/ javascript function itself:
function loadload(loc) {
// this is wrong, you can not use the event handler for dom ready here...
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$(loc).load(url);
}
// Where does $.address come from?....
// Event handlers
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$(loc).load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
})
// and here you'll define another click handler - inside the click handler
// will never be executed...
$('a').click(function(){
loadURL($(this).attr('href'));
});
});
};
Either you use the inline event handler, or a general bind logic, do not mix it.
Variant a: inline event handler
function loadload(loc,url) {
console.log("loadURL: " + url);
$(loc).load(url);
}
echo "<li><a onclick='loadload(\"#txtHint\",\"php/getdaimler.php?q=".$row['Program']."\")' href='php/getdaimler.php?q=".$row['Program']."' rel='address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
Variant b: general binding:
$("document").ready(function(){
$('a.loadload',function() {
$('#txtHint').load($(this).attr('href'));
});
});
echo "<li><a class='loadload' href='php/getdaimler.php?q=".$row['Program']."' rel='address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
So far for your javascript / html code. To be honest I have no idea if this fits your 'deep link' question, or the db-query you talked about, but it might be a starting point.
I have following code to handle clicks on row or individual cells.
$(document).ready(function() {
var JSON_URL = '{% url "technician_activity" %}';
var oTable = $('#technician_activity').dataTable( {
"processing": true,
"serverSide": true,
"ajax": JSON_URL ,
"jQueryUI": true
} );
alert("Without this alert selectors don't work? oTable = " + oTable);
oTable.$('tr').click( function () {
var data = oTable.fnGetData( this );
alert("Column " + data);
});
oTable.$('td').click( function () {
var data = oTable.fnGetData( this );
alert("Cell " + data);
});
});
One thing that puzzels me is without the first alert statement
alert("Without this alert selectors don't work? oTable = " + oTable);
selectors for tr and td don't work this is very puzzling to me -- what is the difference that this alert() is making?
I am now using code as suggested here - http://www.datatables.net/examples/server_side/select_rows.html
But it still remains question as to why the in code I initially posted, with first alert() statement things work but they don't work when that alert statement is absent....
Just for curiosity sake would like to understand whats going on there in case someone has ideas.
I would like to create a custom widget that will display several widgets within it. For example, I would like a custom widget to be composed of a listview, a combobox, a calender, and a menu. Is this possible?
What I am thinking is adding the HTML in the refresh method, then initialize DOM elements such as below. I would like to use MVVM as well.
refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);
// trigger the dataBinding event
that.trigger(DATABINDING);
// mutate the DOM (AKA build the widget UI)
that.element.html(html);
// is this safe???
kendo.bind(that.element, { source: this.dataSource });
// or do this???
this.element.find('.listview').kendoListView({ dataSource: this.dataSource });
// trigger the dataBound event
that.trigger(DATABOUND);
}
It feels weird to call a kendo.bind in a widget where it is probably initialized via Kendo MVVM as well. Is there a better way to do this?
Yes it is possible, you have to create a plugin of yours which will generate the controls, You can refer the ways to create a plugin.
create basic jquery plugin
Below code is just a sample to help you start with, it is not a running code. You can modify this and make it run as per your requirement
I have created a sample for binding combobox, you can add up other controls in the same manner.
$.fn.customControl = function (options) {
var settings = $.extend({}, options);
return this.each(function () {
var $this = $(this);
var comboboxDatasource, listviewDatasource, menuDatasource; // as many controls you want to bind
$.each(settings.controls, function (index, value) {
switch (value.type) {
case "combobox":
comboboxDatasource = value.datasource;
var $combobox = "<input data-role='combobox' " +
" data-text-field='" + value.textField + "'" +
" data-value-field='" + value.valueField + "'" +
" data-bind='source: '" + value.datasource + "'," +
" events: {" +
" change: onChange," + //pass it in the custom control parameters if you want to have a custom event for the control
" }' />";
$this.append($combobox); // Appends a control to the DOM which can be later bound to data using MVVM kendo.observable
break;
case "listview":
//Create listview and other controls as demo'ed for the combobox.
break;
case "calendar":
break;
case "menu":
break;
}
});
//Create the kendo Observable object to bind the controls
var viewModel = kendo.observable({
comboboxDatasourceProperty: new kendo.data.DataSource({ //Fetch the datasource for each list control based on the parameters sent
transport: {
read: {
url: "url to datasource",
dataType: "dataType you want e.g. jsonp"
}
}
}),
listviewDatasourceProperty: function () { },
menuDatasourceProperty: function () { }
});
// Bind the View to the div which contains all the other controls
kendo.bind($($this), viewModel);
}); // return this.each
}; //customControl
Basic settings to use it is to create a div in the page which will actually contain all the other controls
<div id="customControlDiv"></div>
In the page you can use the control as below to create and bind the controls, if you want to bind it to the refresh function in observable then, write the below code within the refresh function
$("customControlDiv").customControl({ controls: [
{ type:'listview',id:'listviewID',datasource='path to datasource for listview',textField='text',valueField='id' }, //if you want to pass your datasource url, make a prop. and pass the url
{ type:'combobox',id:'comboboxID',datasource='path to datasource for combobox',textField='id',valueField='id' }, // which can be accessed in the plugin to fetch datasource
{ type:'calendar',:'calenderID',datasource='',textField='',valueField='' },
{ type:'menu',id:'menuID',datasource='path to datasource for menu',textField='text',valueField='id' }
]
});
Hope this helps :)
I need to hide the operator in the search popup, but I cannot get it to work.
I tried this, but both operators still appear:
jQuery("#grilla").navGrid("#paginador",
{del:false,add:false,edit:false},{},{},{},{
groupOps: [{ op: "OR", text: "any" }], multipleSearch:true});
Any ideas?
Thanks!
There are no option which can directly do what you need. Moreover if you would hide the ADD/OR operand from the searching dialog at the dialog initialization (for example inside of beforeShowSearch event handler) with $('select.opsel').hide() the select element will be hidden only at the beginning. After the user click on any button the dialog contain will be repaint without calling of any event handler and the select element will be again visible.
So I suggest to solve the problem with overwriting the method reDraw of the filter dialog. The code which do this can look like
jQuery("#grilla").jqGrid("navGrid","#paginador",
{del: false, add: false, edit: false}, {}, {}, {},
{
multipleSearch: true,
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function () {
// hide the AND/OR operation selection
$('select.opsel', searchDialog).hide();
setTimeout(function () {
// set fucus in the last input field
$('input[type="text"]:last', searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function () {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
}
);
You can see on the demo that the way really works.
UPDATED: After writing of the answer I posted some suggestions to trirand to improve jqGrid. Now jqGrid has many features which simplify the above work. For example there are exist afterRedraw callback which can be directly used. So the code from the answer will look like
grid.jqGrid("navGrid", "#pager",
{add: false, edit: false, del: false}, {}, {}, {},
{
multipleSearch: true,
afterRedraw: function (p) {
var $form = $(this);
$form.find("select.opsel").hide();
setTimeout(function () {
// set fucus in the last input field
$form.find('input[type="text"]:last').focus();
}, 50);
$form.find("input.add-rule,input.delete-rule").button();
}
}
);
See the modified demo here:
I added one more line in the code of afterRedraw
$form.find("input.add-rule,input.delete-rule").button();
only to improve the look of buttons in the Searching Dialog. I suggested to make such settings default in jqGrid, but this was not accepted by trirand. In any way everyone who includes jQuery UI can add such line in afterRedraw to make the buttons flat.
The accepted answer didn't work for me with 4.4.0.
Much simpler seems to be to hook the afterRedraw event and remove the opsel select element:
jQuery("#grilla")jqGrid(
"navGrid","#paginador", {del:false,add:false,edit:false},{},{},{},
{
multipleSearch:true,
afterRedraw: function($p) {
$("select.opsel").remove();
}
}
);
see here !
//own add edit del search
jQuery("#gridTable3").jqGrid('navGrid', '#gridPager3',
{
//options
},
{
// edit options
height: 250,
reloadAfterSubmit: false,
closeAfterEdit: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// add options
height: 250,
reloadAfterSubmit: false,
closeAfterAdd: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// del options
reloadAfterSubmit: false,
closeAfterDel: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// search options
multipleSearch: true,//more search write there,don't pop
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
});