I have a grid page with easyui expanded row in it.
now I want to expand the row to show details, so the detail page html list below:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
<title>谱系信息树</title>
<link href="../../Template/css/common.css" rel="stylesheet" type="text/css" />
<link href="../../Theme/View.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
mytree = new dTree('mytree');
#Html.Raw(ViewData["pTree"].ToString());
document.write(mytree);
</script>
</body>
</html>
in my grid page, when I expand the row, the ajax will be trigger to send request to detail page:
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
ddv.panel({
height: 170,
border: false,
cache: false,
href: 'PedigreeNewChart?mid=' + row.mothor_id + "&fid=" + row.father_id,
onLoad: function () {
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
$('#dg').datagrid('fixDetailRowHeight', index);
}
But now , when I expand to get the detail page, an error throw to me (firebug):
I have the needed js file(vertdtree.js) included in the detail page, but why it can't recognize it?
dTree is not loadded.
probably issue is how you include script
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
but it should be
<script src="~/Scripts/dtree/vertdtree.js" type="text/javascript"></script>
Related
These are my files and I tried to import my files by using OnAfterRenderAsync(bool firstRender) , but after I've executed my application,I didn't see my files in the "view page source" in the browser.
This is my code please :-
_Host.chtml (Head Section)
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<base href="~/" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="/Scripts/allinone_bannerRotator.js" type="text/javascript"></script>
<script>
jQuery(function () {
jQuery('#allinone_bannerRotator_universal').allinone_bannerRotator({
skin: 'universal',
width: 893,
height: 496,
responsive: true,
thumbsWrapperMarginBottom: -35,
showNavArrows: false,
showCircleTimer: false,
showCircleTimerIE8IE7: false,
autoHideBottomNav: false,
showPreviewThumbs: false
});
});
</script>
</head>
_Host.chtml (BodySection)
<body>
<script src="_framework/blazor.server.js"></script>
</body>
**MainLayout.razor **
#code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/jquery-ui-1.8.16.custom.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/jquery.ui.touch-punch.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/allinone_bannerRotator.js");
}
}
}
Note :- When I move blazor.server.js from body to head , everything working fine.
Could anyone helps me please ?
I have problem in using ui-grid with components in angularjs version > 1.5. Can someone help me to give me a method to do that? Because I don't use scope and in the documentation of ui-grid is for angular last than 1.5
I tried this code and doesn't show the table with information :
(function(){
'use strict';
angular.module('app', ['ngTouch', 'ui.grid'])
.component('exampleComponent', {
controller: MainController,
controllerAs:'vm',
templateUrl:'index.html',
bindings:{
propertyToBind: '='
},
template: `
<div>
<p>PropertyThatIWantToBindAndShowInComponentInCellTemplate: {{ ctr.propertyToBind }}</p>
</div>
`
});
function MainController($http,$log){
vm.gridOptions = {};
vm.gridOptions.columnDefs = [
{ name: 'ShowScope',
// <example propertyToBind="ValueOfTheProperyThatIWantToShow"></example>
// cellTemplate:'<div title="{{COL_FIELD}}"> {{row.entity.id}} </div>'
//'<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">'
cellTemplate:'<p propertyToBind ="{{row.entity.name }}"></p> '
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
vm.gridOptions.data = data;
});
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<example-component>
<div ui-grid="gridOptions" class="grid"></div>
</example-component>
<script src="app.js"></script>
</body>
</html>
I have a UIWebView which I am creating a custom text editor, with a native keyboard.
I am trying to detect when the return button is pressed on the native keyboard. I have attempted the code in this: How to detect keyboard enter key? as well as customize return key but was not able to succeed. How do I capture the return?
html:
<!DOCTYPE html>
<html>
<head>
<title>iOS Note Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
function returnKeyPressed(event){
if(window.event.keyCode == 13) document.location = "returnkeypressed:";
return true;
}
}
</script>
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<link rel="stylesheet" type="text/css" href="quill.snow.css">
<link rel="stylesheet" type="text/css" href="quill.bubble.css">
<link rel="stylesheet" type="text/css" href="quill.core.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body onKeyPress="return returnKeyPressed(event)" style="padding-top:0px;margin-top:0px;">
<div id="wrap">
<div id="editor-container" style="padding:0px;margin-top:0px;font-family:'GothamPro-Light';font-size: 15px;"></div>
</div>
<script type="text/javascript" src="quill.core.js"></script>
<script type="text/javascript" src="quill.min.js"></script>
<script type="text/javascript" src="quill.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ios_note_editor.js"></script>
</body>
</html>
.m
//Not being called
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSLog(#"webView shouldStartLoadWithRequest");
}
body onKeyPress when changed to onKeyDown fixes the issue. Hours of headache over one word
Trying to download PDf file using examples at https://parall.ax/products/jspdf
Relevant HTML Code is as shown below.
It keeps giving error as "Uncaught TypeError: Cannot read property 'config' of undefined jspdf.debug.js
Uncaught TypeError: Cannot read property 'canvas' of undefined" and doesn't generate any PDF file.
Thanks for your help.
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/dist/jspdf.debug.js"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/from_html.js?"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/canvas.js?"></script>
function downloadPDF() {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#overview_tab').first();
var specialElementHandlers = {
'#banking_tab': function(element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
This code works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
function saveAspdf() {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
}
</script>
<body>
<p id="to-pdf">Generating PDF</p>
</body>
</html>
<input type="button" value="save" onclick="javascript:saveAspdf()"/>
Want to implement simple dialog with jquery-mobile on phonegap: http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html
but my LogCat tells me (when I press the button):
05-10 15:02:37.960: V/webview(10536): singleCursorHandlerTouchEvent -getEditableSupport FASLE
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=600; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Prototyp_V.2.0</title>
<link rel="stylesheet" href="js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0a3.min.css" type="text/css" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
.ui-page {
background: #ffffff;
}
</style>
</head>
<body onload="init();" id="stage" class="theme">
<script type="text/javascript">
function test() {
alert("test");
$(document).delegate('#simplestring', 'click', function() {
$(this).simpledialog({
'mode' : 'string',
'prompt' : 'What do you say?',
'buttons' : {
'OK': {
click: function () {
$('#dialogoutput').text($('#dialoglink').attr('data-string'));
}
},
'Cancel': {
click: function () { },
icon: "delete",
theme: "c"
}
}
})
})
}
</script>
<div data-role="page" id="id0">
<div data-role="header" data-theme="c">
<h1>Heading</h1>
</div>
<div data-role="content">
<div id="twitter_"><center>Dialog Box</center>
<p>You have entered: <span id="dialogoutput"></span></p>
Open Dialog
</div>
</div>
</body>
</html>
the alert "test" is called, but I always get this cursor event !
What do you mean "cursor event" ? and
use button lik this:
Open Dialog
And
your function should like this
$(document).delegate('#dialoglink, 'click', function() {
/// Your other code goes here
});
use outside the test function