I'm using the Dojo Struts2 datetimepicker, But textfield is editable with the keyboard. I want it in readonly.
I know that this question is answered on another thread, but the solution isn't compatible with ie7, wich is required for me.
The solution in the another thread is:
window.onload = function() {
document.getElementsByName("dojo.test")[0].setAttribute("readOnly","true");
}
But, when I try that on IE7, I get a javascript error:
'document.getElementsByName(...).0' is null or not an object
I read about that, and chage it to:
'document.getElementsBy**Id**(...).0'
But I get another error: The object doesn't support that property.
Any suggestions?
I just wondering if I could change the template of the datetimepicker as I did with a simple Struts2 template... That will solve the problem
<script type="text/javascript">
$(document).ready(function() {
makeReadonly();
});
function makeReadonly() {
setTimeout(function () {
$(".calendar").attr('readonly', 'readonly');
}, 1000);
}
</script>
<td>
<sx:datetimepicker name="up_bod" displayFormat="yyyy-MM-dd" cssClass="rounded calendar" >
</sx:datetimepicker>
</td>
Nice Question.
Use following script. This will work in all browsers.
< % # taglib prefix="sd" uri="/struts-dojo-tags" % >
<head>
<sd:head/>
</head>
< script type="text/javascript">
window.onload = function() {
document.getElementById('fromDate').children[1].setAttribute("readOnly","true");
};
</ script>
<sd:datetimepicker name="fromDate" id="fromDate" label="From Date" />
I hope this will work for you.
Related
I'm new in Angular and html development. So i don't know yet all features and code terms.
I created a form which contains a rich textarea field. I used nicEdit as this is the one recommended by mycompany (so cannot change of editor).
As you can see in the image below, nicEdit is working well.
But when I want to get the field content in ng-model, it doesn't work.
Most of forum Q&A informs that that ng-model does not working properly with that nicEdit textarea. I found something about a directive to create. So I tried by modifying one dedicated to ckEditor.
But it doesn't work. I found that $('div.nicEdit-main') was the div updated (but not my field htmlLondDesc attached to the nicEdit textarea, neither the ng-model).
I also found something about the nicEditors.findEditor('htmlLongDesc').getContent(); but i don't know where to use it in the ng-model...
So how to get the content of nicEdit and save it in ng-model ?
Thanks in advance for your help.
Here is an image of the text area
Here is my js and html code:
scApp.directive('ncGetContent', function () {
return {
require: 'ngModel',
link: function (scope, elm, attr, ngModel) {
var content = $('div.nicEdit-main').html();
if (!ngModel) return;
content.on('instanceReady', function () {
content.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(content.getData());
});
}
content.on('change', updateModel);
content.on('key', updateModel);
content.on('dataReady', updateModel);
ngModel.$render = function (value) {
content.setData(ngModel.$viewValue);
};
}
};
});
<head>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myEditor = new nicEditor({buttonList : ['bold','italic','underline','subscript','superscript','forecolor','bgcolor']}).panelInstance('htmlLongDesc');
var nicInstance = nicEditors.findEditor('htmlLongDesc');
});
</script>
</head>
...
<textarea id="htmlLongDesc" cols="140" rows="6" name="htmlLongDesc" ng-model="user.htmlLongDesc" ncGetContent ></textarea>
I have a web grid and i need to make a numeric up down column in the web grid. For it I am using the jQuery UI Spinner control.
just a look:
grid1.Column("Salary",format: (item) => Html.TextBox("Salary", (int)item.Salary, new { #class = "spinnertxt",#id="txt" + item.EmployeeId }), header: "Salary")))
And for creating the spinner :
<script>
jQuery(document).ready(function () {
jQuery('.spinnertxt').spinner({ min: -100 });
jQuery('.spinnertxt').spinner('option', 'max', 100);
});
</script>
but result is not expected. The browser gives an script error:
Error: Object [object Object] has no method 'spinner'
I am using the following jQuery refernces:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
I have not duplicate references of the jQuery Libraries..
please Anyone suggest.
jquery UI 1.8.20 doesn't include spinner, try switching to latest version.
I am working on a web application and was making great progress using JQuery UI Tabs, specifically the 'url' method of dynamically updating the target url of the ajax request which was bound to each tab. I have created a simplified example here:
Each of the 2 Tabs, function 1 & function 2, display the results of some tests based on the parameters that are passed to the test. The tests remain the same throughout, but I was changing the variables used in the functions by manipulating the url bound to the tab. The 'url' method of updating the url being called on a lazy loading Tab allowed me to do this, but its now been deprecated and won't be supported at all soon. So I have been searching for a way to do this using the 'beforeLoad' event in JQuery UI 1.9.
The suggestion was that one could manipulate the ui.ajaxSettings to set the data parameter but there is a bug (http://bugs.jqueryui.com/ticket/8673), and it appears this won't be fixed. The workaround suggested is to manipulate the ui.ajaxSettings.url instead.
My working example is below, but I'm not sure if this is the cleanest / most appropriate way to achieve what I'm after and any suggestions would be most welcome. I struggled to find examples on how to do even this much, so hopefully it will help someone else in a similar situation.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button>
<button class="set_variable" value="3">Variable = 3</button>
<div id="tabs" >
<ul>
<li>Function 1 </li>
<li>Function 2 </li>
</ul>
</div>
</body></html>
N.B. The ajax.php file here just echos back what was passed to it.
<?php
extract($_GET);
var_dump($_GET);
?>
You could do something like this too :
var variable = '';
$( '#tabs' ).tabs({ beforeLoad: function( event, ui ) {
if(variable != '')
ui.ajaxSettings.url += "&variable=" + variable ;
}});
$('button.set_variable').click(function() {
variable = $(this).val();
});
http://jsfiddle.net/DNWzY/1/
http://docs.jquery.com/UI/Datepicker
i want to have a link with the choosen date to click at the datepicker
e.g:
<div type="text" id="datepicker"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#datepicker").datepicker({ <a href="/controller/view/" /> });
});
After I clicked i want to be at follwing adress: /controller/view/20091212
Is something with datepicker possible?
Thanks!
use the onSelect event:
$("#datepicker").datepicker({onSelect: openday});
function openday(dateText, inst) {
window.location = 'controller/action/' + encodeURIComponent(dateText);
}
i am using the following code to hide the Actions menu from Discussion Board list. The code is :
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.ms-menutoolbar td:lt(4)').hide();
});
</script>
I found this from an article, but its not working. Can you please help me regarding hiding Actions menu from Discussion Board list.
Also tried this code with no luck:
<script>
function HideDiv(name) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
var str = div[i].id;
if (str.indexOf(name) >= 0) {
var viewInExplorer = div[i];
if (viewInExplorer != null) {
if (viewInExplorer.parentNode != null)
viewInExplorer.parentNode.removeChild(viewInExplorer);
}
}
}
}
HideDiv("ListActionsMenu");
</script>
You might want to think about using a Custom Action to hide the menu items:
See:
http://msdn.microsoft.com/en-us/library/ms414790.aspx
and
http://msdn.microsoft.com/en-us/library/ms465980.aspx
You can use the below script but i would suggest to use custom master page in which you just remove site action or apply a sharepoint security trim control so that it is visible to administrator only
<script type="text/javascript" > this.document.getElementById("siteactiontd").style.display = 'none'; </script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.ms-menutoolbar td:eq(2)').hide();
$('.ms-menutoolbar td:eq(3)').hide();
});
</script>
Without using JavaScript you can do this less complicated. Just find element <td> with id="siteactiontd" in masterpage and set style style="visibility:hidden" (using SharePoint Designer) like so: