I have been developing the application and I use the following code for JEditable:
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});
I need to disable autogrowing of the field in order to if user moves on a fields then the field won't grow. Now field grows if user moves on it. I need it, please help. Thank you very much.
I have used with success
width : '100%' as a parameter. Give it a try.
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
width : '100%'
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});
Related
Google Recaptcha is not working on fancybox ajax generated form.
Finally found the solution. Bellow code is working fine for me.
Include Google Recaptcha api js
<script src="https://www.google.com/recaptcha/api.js"></script>
Add Element Html
<div class="g-recaptcha" id="recaptcha" ></div>
Add Script
<script type="text/javascript">
$(document).ready(function() {
$("[element_id_or_class]").fancybox({
padding : 0,
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : 'auto',
height : 'auto',
autoSize : true,
openEffect : 'none',
closeEffect : 'none',
ajax: {
complete: function(jqXHR, textStatus) {
grecaptcha.render('recaptcha', {
sitekey: [RECAPTCHA_SITE_KEY],
callback: function(response) {
console.log(response);
}
});
}
}
});
});
</script>
I want to plot a scatter chart with timestamp values in x-axis. 'Power' and 'No of plugs' in y-axis. The Power values is in the range of 0 - 60000 and 'No of plugs' in the range of 0 - 600. When I tried with the below code I'm getting wrong plot.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Power Measurements</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.layout">
</script>
<script>
var inputData = $powerValues;
var oModel = new sap.ui.model.json.JSONModel({
graphData : inputData
});
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Timestamp',
value : "{timestamp}"
}
],
measures : [
{
group: 1,
name : 'Power (in KW.h)',
value : '{power}'
},
{
group: 2,
name : 'No of Plugs',
value : '{plugs}'
}
],
data : {
path : "/graphData"
}
});
var line = new sap.viz.ui5.Scatter({
id : "idscatter",
width : "100%",
height : "400px",
title : {
visible : true,
text : 'Power Utilisation'
},
xAxis : {
title : {
visible : true
}
},
yAxis : {
title : {
visible : true
}
},
dataset : dataset
});
line.setModel(oModel);
line.placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Click here for existing output chart
In the above chart I need timestamp as x-axis. 'No. of plugs' and 'Power' as two different plots in the same chart (Values of these two are in different ranges).
Thanks.
I simply want to delete a node from my jstree but so far no luck.
HTML:
<!doctype html>
<html>
<head>
<title> </title>
<!-- scripts -->
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js_tree/dist/jstree.js"></script>
<script src="../js/tree.js"></script>
<!-- Styles -->
<link rel='stylesheet' href="../css/main.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../js_tree/dist/themes/default/style.min.css">
<!-- <link rel="icon" href="images/favicon.ico"> -->
<!-- Metadata -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<button onclick="deletor();">delete</button>
<div id="tree">
<!-- LOADS JSON DATA-->
</div>
</body>
</html>
The javascript: (I tried 2 ways: in the context menu and through the function deletor). I don't get any errors, it just doesn't do anything.
$(document).ready(function(){
adjustModal();
$('#tree').jstree({
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
},
"search" : {
"case_insensitive" : true
},
"plugins": ["contextmenu", "dnd", "search", "wholerow"],
"contextmenu" : {
"items": customMenu
}
});
$('#tree').on("changed.jstree", function (e, data) {
console.log(data.node)
console.log(data.node.text);
});
});
function deletor(){
// alert("hey");
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
function customMenu(node) {
// The default set of all items
var tree = $('#tree');
var items = {
addItem: {
label: "Add Item",
action: function () {
console.log("rename");
}
},
renameItem: { // The "rename" menu item
label: "Rename",
action: function () {
console.log("Rename");
}
},
deleteItem: { // The "delete" menu item
label: "Delete",
action: function () {
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
}
};
if ($(node).hasClass("folder")) {
// Delete the "delete" menu item
delete items.deleteItem;
}
return items;
}
Can you guys tell me what I'm doing wrong?
Ok, so I figured it out. In your tree core section you have to allow the user to modify the tree. Changed the js to this: check_callback section
$('#tree').jstree({
'core' : {
'check_callback' : function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
// in case of 'rename_node' node_position is filled with the new node name
return operation === 'delete_node' ? true : false;
},
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
},
"search" : {
"case_insensitive" : true
},
"plugins": ["contextmenu", "dnd", "search", "wholerow"],
"contextmenu" : {
"items": customMenu
}
});
or simply if you want to allow all actions on the tree:
'check_callback': true,
I am not able to run the fancy box helpers specifically the no right click button with another script i.e getting the fancybox to show the no. of images .the script runs like this..
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
},
helpers: {
title: {
type: 'inside'
},
thumbs: {
width : 50,
height : 50
}
}
});
});
$(".fancybox")
.attr('rel', 'images')
.fancybox({
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
}
});
</script>
When i run this script only the no. of images show and the no right click doesnot work.
Please advise.
I found disabling the right click works if I put the code inside the Ready function
$(document).ready(function () {
$('.fancybox-thumbs').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: false,
nextClick: true,
padding: 10,
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
},
afterLoad: function () {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
},
helpers: {
title: {
type: 'inside'
},
thumbs: {
width: 50,
height: 50
}
}
});
});
Somehow action is not completed when I choose an item from the menu. Everything else works fine, except again - nothing happens when I select an item.
Here is the code:
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearchTerm.ClientID%>").autocomplete("Acc.ashx", {
formatItem: function(item) { return item.toString().split("#")[0]; },
formatResult: function(item) { return item.toString().split("#")[0]; },
select: function(event, ui) { alert('something'); }
});
});
</script>
I ended up with this working solution
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearchTerm.ClientID%>").autocomplete("Acc.ashx", {
formatItem: function(item) { return item.toString().split("#")[0]; },
formatResult: function(item) { return item.toString().split("#")[0]; }
});
$("#<%=txtSearchTerm.ClientID %>").result( function findValueCallback(event, data, formatted)
{
if(data)
{
$('#<%=hidOID.ClientID %>').val(data[0].toString().split('#')[1]);
}
});
});
</script>