I use jQuery easyui, and the extension Editable DataGrid named edatagrid, which extendes from jQuery easyui datagrid.
you can download the edatagrid file this page:
http://www.jeasyui.com/extension/edatagrid.php
Then I modified the editable-datagrid.html, add handler for onBeforeLoad and onLoadSuccess event, and a button to reload json data. my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.edatagrid.js"></script>
<script type="text/javascript">
$(function(){
//$('#tt').datagrid({
$('#tt').edatagrid({
onBeforeLoad: function(param){
console.log("before load");
},
onLoadSuccess: function(data){
console.log("load success");
console.log(data);
}
});
});
</script>
</head>
<body>
<h1>Editable DataGrid</h1>
<div style="margin-bottom:10px">
AddRow
SaveRow
CancelRow
destroyRow
<a onclick="javascript:$('#tt').edatagrid('reload')">reload</a>
</div>
<table id="tt" style="width:600px;height:200px"
title="Editable DataGrid"
url="datagrid_data.json"
singleSelect="true">
<thead>
<tr>
<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
<th field="productid" width="100" editor="text">Product ID</th>
<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
<th field="attr1" width="150" editor="text">Attribute</th>
</tr>
</thead>
</table>
</body>
</html>
Open editable-datagrid.html in chrome or firefox, check console log:
before load
load success
Object {total: 0, rows: Array[0]}
load success
Object {total: 10, rows: Array[10]}
click reload button to reload edatagrid, get the same result.
before load
load success
Object {total: 10, rows: Array[10]}
load success
Object {total: 10, rows: Array[10]}
Why onBeforeLoad event fired once, but onLoadSuccess event fired twice, it also should be once. How can I make the onBeforeLoad event fires just one time?
if I use datagrid, both of onBeforeLoad and onLoadSuccess fire once.
before load
load success
Object {total: 10, rows: Array[10]}
I found the reason
there is a onBeforeLoad handler in jquery.edatagrid.js
onBeforeLoad: function(param){
if (opts.onBeforeLoad.call(target, param) == false){return false}
$(this).datagrid('rejectChanges');
if (opts.tree){
var node = $(opts.tree).tree('getSelected');
param[opts.treeParentField] = node ? node.id : undefined;
}
}
rejectChanges will reload the datagrid, so onLoadSuccess fired twice.
you typed:
$('#tt').edatagrid({
and it is:
$('#tt').datagrid({
Related
I am learning angularjs and working on a single page application using the ng-view. Unfortunately, my partial views won't load into my index.cshtml. Instead they load as a separate page. Below is my code:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="employeeInfoApp" ng-controller="employeeCtl">
<div class="col-sm-4">
<!--Example of a Dropdown List-->
<select ng-model="employeeinfo.EmpName" ng-options="employeeinfo.EmpName for employeeinfo in EmployeeInfoes">
<option value="">-- Please Select A Client Company --</option>
</select>
<p></p>
<!-- Example of Table of Data-->
<table>
<thead>
<tr>
<th>Emp Name</th>
<th>Dept Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="emp in EmployeeInfoes">
<td>{{emp.EmpName}}</td>
<td>{{emp.DeptName}}</td>
<td>{{emp.Designation}}</td>
</tr>
</tbody>
</table>
<p></p>
Add Employee
<div ng-view class="container"></div>
</div>
</div>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/LegalScripts/legalServices.js"></script>
<script>
//Name the module
var app = angular.module('employeeInfoApp', ['ngResource', 'legalServices', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/addemp', {
templateUrl: 'AddEmp.cshtml',
controller: 'EmployeeInfoController'
}).
otherwise({
redirectTo: '/home'
});
}]);
//Add the controller
app.controller("employeeCtl", ["$scope", "EmployeeInfo", function ($scope, EmployeeInfo) {
$scope.EmployeeInfoes = EmployeeInfo.query();
$scope.SelectedEmployeeInfo = {};
}]);
</script>
You can't load .cshtml file directly from its path you need to load it from MVC controller action as it contains razor which which should be parsed using MVC Razor view engine likewise suppose you had Employee controller that will contain an action AddEmp that will return a view indirectly using c#
App.js
$routeProvider.
when('/addemp', {
templateUrl: 'Employee/AddEmp', //you need to call controller action
controller: 'EmployeeInfoController'
}).
The issue here is that I was using Angular 1.4 (which visual studio nuget package manager automatically installs.)
Routing in Angular 1.4 has been changed to accommodate using multiple views (and components) but the old ng-view directive won't work. See this Introduction to Routing in 1.4
http://www.codeproject.com/Articles/891436/Introduction-to-Basics-of-Angular-newRouter
My quick fix solution was to download the Angular 1.3 scripts library into my project. Then my partial views worked fine.
I am trying to use a dojo datagrid in a dojo dialog and I get the following dojo/parse error when trying to load the page.
dojo/parser::parse() error (new TypeError("d(...) is undefined", "http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox//grid/DataGrid.js", 16))
If I comment out the require DataGrid statement, the parse error goes away. Notice I am not even trying to create a data grid yet. Just trying to build a bare bones page.
The following is the code for the page.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo Dialog with DataGrid</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
<!-- load dojo and provide config via data attribute -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]);
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!",
]);
//var grid2x;
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<div class="dijitDialogPaneContentArea">
</div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" onClick="return myFormDialog.isValid();">
OK
</button>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.hide()">
Cancel
</button>
</div>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.show();">
Show me!
</button>
</body>
</html>
Even though this post is old, your problem seems to be the comma after "dojo/domReady!," There should be no comma after the last import. Also load all that you want to load in the first require i.e instead of having <script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]);
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!",
]);
//var grid2x;
</script>
Just put all in one require as follows:
<script>
require(["dojo/parser",
"dijit/Dialog",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!"]);
//var grid2x;
</script>
problem is <html lang="en">. parser can't parse html components if lang="en". Remove it or override with data-dojo-config="lang='en-us'"
I would like to track googleplusone clicks without using google analytics. Is there any functionality available for this? I tried to google it but to no avail.
UPDATE: I tried this but the callback is not fired?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script>
<script type="text/javascript">
function helloWorld(plusone) { alert('+1 Triggered, State=' + plusone.state); }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<g:plusone callback="helloWorld"></g:plusone>
</div>
</form>
</body>
</html>
You set the callback attribute on the +1 tag to a javascript function.
This function is called after the user clicks the +1 button. The callback function must be in the global namespace and may accept a single parameter, which will be a JSON object with the following structure:
{
"href": target URL,
"state": "on"|"off"
}
The state property is set to "on" for a +1, and "off" for the removal of a +1.
Here is the full code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
#import "jquery.countdown.css";
</style>
<script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
<script type="text/javascript">
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
$(document).ready(function () {
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('change', { until: shortly });
});
function liftOff() {
// refresh the page
window.location = window.location;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<span id="shortly"></span>
</form>
</body>
</html>
I've got the jquery.countdown.js in the Scriptsmap of visual studio. Also the stylesheet "jquery.countdown.css" is in the project.
Don't have a clue about what the problem could be. I'm kind of new to jquery and trying to learn it.
I'm not familiar with this countdown plugin, but, try moving the part
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
into the function passed to $(document).ready, replacing $('#shortly').countdown('change', { until: shortly });
Because otherwise the shortly var is not initialized when you're trying to use it.
you have a error in liftOff function with windowwindow.location
function liftOff() {
// refresh the page
window.location = window.location;
}
I have a text box called txtName on my form.
In my page I know I need to place the code in my HEAD tag like so......
<script type='text/javascript' language="javascript">
document.FormName.txtName.value = "Robert";
</script>
But I cant seem to set a value to my textbox txtName with the above code......
That's because your code get executed before the DOM is created.
You can do something like this
window.onload = function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
}
or use JQuery
$(function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
// for a shorter syntax use id
$('#txtNameId').val("Robert");
}
Your script executed before page loaded. Use onload event
Can you set the id on the textbox? Then you can use getElementByID("textboxid"); Selecting by id is faster.
UPDATE:
You need to ensure that the DOM has been load so that your script can locate the element you want to update. One way is:
<body>
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
LoadTextBox();
</script>
</body>
An alternative could be where you use onload in the body tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
</script>
</head>
<body onload="LoadTextBox">
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
</body>