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.
Related
I am using a loading div in my MVC application. so i am getting json result value and showing a kendo grid. Because of more data it is taking time so for that purpose i used this but unfortunately it's not working.
Below is my code
This is my script used in the view
<script type="text/javascript">
$(document).ready(function () {
var action = "#Url.Content("~/Dashboard/ChartInitialDataBinding/")";
$('#spinner').show()
$.getJSON(action, null, function(something)
{
$('#spinner').hide()
});
});
</script>
This is my loading div
<div id="spinner" style="display:none">
Loading...
</div>
Thanks
You should know from documentation, that getJSON() is just wrap above ajax jquery function.
So don't you want to put your spinner not only in this function, but with all ajax requests? I think it's better, becouse you can define this in onle place and don't thik anymoreabout this problem.
In your Layout View just add this script, after your jquery library loaded:
$(document).ready(function () {
$.ajaxSetup({
beforeSend: function () {
$('#spinner').show()
},
complete: function () {
$('#spinner').hide()
},
error: function () {
$('#spinner').hide()
}
});
});
You can read more about $.ajaxSetup here.
Here is a list of things to check/fix:
-add semicolons after $('#spinner').show() and $('#spinner').hide()
-make sure you have included jQuery
-check if spinner is in view when removing "display:none"
I am relatively new to Jquery and Jquery mobile, I was just trying and tutorial to add Loading animation on the page, I was simply following the code provided in one of the demos. However I am getting the following error.
Uncaught TypeError: Object [object Object] has no method 'jqmData'
I am using the following code snippet and javascript
<button class="show-page-loading-msg ui-btn-right" data-icon="refresh" data-theme="d" data-textonly="false" data-textvisible="true" data-msgtext="Loading..." data-inline="true">Refresh</button>
<script>
window.$ = window.jQuery = WLJQ;
$( document ).on( "click", ".show-page-loading-msg", function() {
var $this = $( this ),
theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
textonly = !!$this.jqmData( "textonly" );
html = $this.jqmData( "html" ) || "";
$.mobile.loading( "show", {
text: msgText,
textVisible: textVisible,
theme: theme,
textonly: textonly,
html: html
});
setTimeout(WL.Client.reloadApp, 5000);
$.mobile.loading( "hide" );
});
</script>
The error is pointing to this line in the javascript theme = $this.jqmData( "theme" )
when i debugged on browser console i was able to see the button data values assigned to the $this variable
Please advice,
if you run the following:
console.log($.mobile.version);
... and check the console. Does it print out the version? Or does it say it is undefined?
If it is undefined, check if you have correctly referenced jQuery and jQuery mobile libraries, something like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Try to put your script into the 'mobileinit' event handler (or a page event handler), like:
<script src="js/jquery-2.0.3.js"></script>
<script>
window.$ = window.jQuery = WLJQ;
$(document).on('mobileinit', function() {
// your script
});
</script>
<script src="jqueryMobile/jquery.mobile-1.3.1.js"></script>
NOTE the sequence of the script
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/
:I have the following in one of my partial views:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#ProductName").autocomplete({
source: "Products",
minLength: 2,
select: function (event, ui) {
$("#newInvoiceLineForm").load("/Invoices/Product?name=" + ui.item.value);
}
});
});
</script>
And the autocomplete works fine and displays all the items returned but on select event I get a ui.item.value with just the first word of the two word item. For example I have "New Product" selected from the autocomplete and it results in the:
/Invoices/Product?name=New call.
Anyone had this situation before?
Thank you
This is the code that works with encodeURI:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#ProductName").autocomplete({
source: "Products",
minLength: 2,
select: function (event, ui) {
$("#newInvoiceLineForm").load(encodeURI("/Invoices/Product?name=" + ui.item.value));
}
});
});
</script>
You need to URL encode your string. Spaces in their raw form aren't acceptable to querystrings.
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.