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 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>
I am implementing Jquery UI Popup modal form except that it is not blocking the bckground page. the code i am using is as follows:
<link href="../../Content/css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () { $("#Form").dialog({ autoOpen: false, height: 600, width: 800, modal: true }); });
$("#btnOpen").click(function () {
$("#Form").dialog("open");
});
});
I am opening on button click btnOpen. Please help
I am having an issue working with jaGrid and ASP.NET MVC 2. Everything is working, but when I select a row I get this error on FireBug: uncaught exception: jqGrid - No such method: restoreRow.
Debugin Js I realize that error happend here:
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
I think, the problem is the jqGrid libraries include (or the include order). This is my Index.aspx page.
<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<%--jQuery Library--%>
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>
<%--Must load language tag BEFORE script tag--%>
<script type="text/javascript" src="../../Scripts/grid.locale-es.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../Scripts/grid.jqueryui.js"></script>
<script type="text/javascript" src="../../Scripts/grid.base.js"></script>
<script type="text/javascript" src="../../Scripts/grid.common.js"></script>
<script type="text/javascript" src="../../Scripts/grid.formedit.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.fmatter.js"></script>
<script type="text/javascript" src="../../Scripts/grid.custom.js"></script>
<script type="text/javascript" src="../../Scripts/jqDnR.js"></script>
<script type="text/javascript" src="../../Scripts/jqModal.js"></script>
<script type="text/javascript" src="../../Scripts/grid.import.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<table id="tableAccidentes" border=0>
<tr>
<td><img alt="" src="../../images/icono_victima.png" /></td>
<td><h2>Accidentes Registrados</h2></td>
</tr>
</table>
<script type="text/javascript">
var lastsel;
var Plantas = ['Pablo Podesta', 'Pilar', 'Tigre', 'Otra'];
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Accidentes/ListarAccidentes',
datatype: "json",
colNames: ['Fecha', 'Detalle', 'Accidentado', 'Planta'],
colModel: [
{ name:'Fecha', index:'Fecha', width:150, align:'left',
editable:true },
{ name:'Detalle', index:'Detalle', width:150, align:'left',
editable:true },
{ name:'Accidentado', index:'Accidentado', width:200,
align:'left', editable:true },
{ name:'planta', index:'planta', width:150, align:'left',
editable:true, edittype:"select",
editoptions: { value:Plantas} }
],
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "/Accidentes/GridSave",
edit: {
addCaption: "Agregar Accidente",
editCaption: "Editar Accidente",
bSubmit: "Guardar",
bCancel: "Cancelar",
bClose: "Cerrar",
saveData: "Se modifico el registro! ¿guardar los cambios?",
bYes: "Si",
bNo: "No",
bExit: "Cancelar"
},
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Accidente'
}).navGrid('#pager', { edit: true, add: true, search: false, del: false },
{ closeAfterAdd: true, closeAfterEdit: true });
// add custom button to export the data to excel
jQuery("#list").jqGrid('navButtonAdd','#pager',{
caption:"",
onClickButton : function () {
jQuery("#list").jqGrid('excelExport',
{ url: '/Accidentes/ExportarAccidentes' });
}
});
});
</script>
<%-- HTML Required--%>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
Please, can someone help me?
The restoreRow and editRow methods, which you use, are defined in the grid.inlinedit.js file and are the part of the inline editing module (see more in the jqGrid documentation). Moreover you should remove the file jquery.jqGrid.min.js to avoid having definitions of the same functions twice. Because the method restoreRow was not defined in the jquery.jqGrid.min.js which you use you use probably wrong downloaded jqGrid version. You should download the jqGrid one more time and be sure that you check "Inline Editing" module. If you open jquery.jqGrid.min.js file in the text editor you will see in the comment at the begining of the file all modules which was the part of the download.
Some additional small remarks: in the documentation is described which parameters of the colModel are default. For example, width:150 and align:'left' have defaout values, so you can remove there from the column definition.
The value property for "select" type of the editoptions which you use is wrong. The Plantas should be defined as
var Plantas = { 'Pablo Podesta':'Pablo Podesta', Pilar:'Pilar',
Tigre:'Tigre', Otra:'Otra'};
or as
var Plantas = 'Pablo Podesta:Pablo Podesta;Pilar:Pilar;Tigre:Tigre;Otra:Otra';
See the documentation for details.
The parameter imgpath is deprecated and should be removed. Class "scroll" is also deprecated and the HTML fragment for the jqGrid can be reduced to
<table id="list"></table>
<div id="pager"></div>
See an example here.
The parameter edit is not exist in the jqGrid it is the parameter of editGridRow from the form editing. You can define it as the part of navGrid parameters prmEdit and prmAdd. Currently you use only prmEdit. Probably the usage of grid.locale-XX.js from the i18n directory will make the usage of edit parameter unneeded.
Good morning,
It appears that the jQuery UI Layout is resetting my options after a call to sizePane(). When I load the following into FireFox, then click the "Resize" button, the north pane suddenly becomes resizable, and the hotkeys are suddenly enabled again. Am I doing it wrong? Or is this a bug?
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
function documentReady(){
jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
resizable: false
},
center: {
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />
</div>
</body>
OK, I believe I've found the solution. Calling jQuery('body').layout() a second time appears to replace my previous "layout" object with a brand new one, resetting all the options.
The solution is to maintain a reference to the original declaration and operate on that object, like so:
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
var myLayout;
function documentReady(){
myLayout = jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
},
center: {
enableCursorHotkey: false,
closable: false,
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="myLayout.sizePane('north',100);" />
</div>
</body>
</html>
Also, the "resizable: false" options have to be removed because otherwise the call to sizePane() will not have any effect.
You can add this option to pane:
animatePaneSizing: true