I am developing an application in ExtJs using Rails, wherein there's a tab panel. The main tab contains the list of buttons on the left . Clicking on each button would open a new tab, and would render a grid or form. When i add new record from the form, it is displayed at once on the grid, but if i close the tab panel and click on the button again, no grid is displayed.
How to load the grid along with the data again ?
P.S: when i manually refresh the browser, it's displayed again !!
Thanks in advance !!
MyCode :
//** MyUnit.js in Units controller**//
MyUnit = Ext.extend(MyUnitUi, {
initComponent: function() {
MyUnit.superclass.initComponent.call(this);
//Insert records...
var sbtn=Ext.getCmp('btnSave');
sbtn.on('click',function(){
var grid = Ext.getCmp('maingrid');
var unitname = Ext.getCmp('unitname').getValue();
var description = Ext.getCmp('description').getValue();
var frm=Ext.getCmp('myform');
Ext.Ajax.request({
url: '/units',
method: 'POST',
params: {'data[unitname]':unitname,'data[description]':description}
});
var grid=Ext.getCmp('maingrid');
grid.store.reload();
grid.show();
frm.hide();
});
});
//** MyViewport.js in Test1 Controller **//
var unit_bt =Ext.getCmp('btnUnit');
unit_bt.on('click', function(){
var unit_el =Ext.getCmp('tabcon');
var tab = unit_el.getItem('tab_unit');
if(tab)
{
tab.show();
}else{
unit_el.add({
title : 'Unit of Measurement',
html : 'I am new unit',
activeTab: 0,
closable : true ,
id: 'tab_unit',
autoLoad:{url:'/units',scripts:true}
//store.load({params:{start:0, limit:25}})
}).show();
}
});
//** Units/index.html **//
<!DOCTYPE html>
<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unit.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="MyUnit.ui.js"></script>
<script type="text/javascript" src="MyUnit.js"></script>
<script type="text/javascript" src="MyUnitStore.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
</head>
<body></body>
</html>
#All : Thanks for your effort. Well my friend found the solution.
The problem got solved just by adding the following line of code in units.js again :
var grid=Ext.getCmp('maingrid');
grid.store.reload();
Related
I have created a SAP UI5 Popover using Fragment. The fragment has XML code for opening the popover window.
My requirement is that when the popover is open and when the mouse pointer goes outside the popver (not mouse click outside), then the popover should close automatically.
Please help me with this.
You can use so called "Event Delegates".
See this little Demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.f"
data-sap-ui-theme='sap_fiori_3'></script>
<script>
var btn = new sap.m.Link({
text:'Hello World',
press: function(evt){
var pop = new sap.m.Popover({
title: "MyPopOver",
placement: "Bottom",
contentWidth: "200px",
content: [new sap.m.Text({text: "My Text"})]
})
pop.addEventDelegate({
onmouseout: function() {
pop.close()
}
}, this);
pop.openBy(evt.getSource());
}
});
btn.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Beware, this one already closes, if you touch a text inside the popup, but you'll get the generell idea.
Can I make an Ajax Call to my Controller and Action method to get some data, from a HTML page instead of CSHTML page.
I have exactly the same content but instead of cshtml, I want to use a HTML page.
If Yes, please give me a sample code.
EDIT
The Actual Problem was different and I'm sorry for being unclear About it.
The Actual problem is I'm trying to generate a PDF using Rotativa.
And i wanted to add a footer to it and it contains some dynamic part.
string header = System.IO.Path.Combine(HostingEnvironment.ContentRootPath, "Views/Home/header2.html");
string footer = System.IO.Path.Combine(HostingEnvironment.ContentRootPath, "Views/Home/Footer.html");
string customSwitches = string.Format("--header-html \"{0}\" " +
//"--header-spacing \"0\" " +
"--page-offset 0 --header-right \"Page: [page] of [toPage]\" " +
"--footer-html \"{1}\" " +
"--footer-spacing \"10\" " +
//"--footer-font-size \"10\" " +
"--header-font-size \"10\" ", header, footer);
var pdfResult = new ActionAsPdf("CreatePDF1", headerData)
{
FileName = "quotation.pdf",
PageOrientation = Orientation.Portrait,
PageSize = Size.A4,
CustomSwitches = customSwitches
};
The Following is my Footer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="icon" href="~/Assets/Images/logo.png" />
<link href="~/css/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="~/css/cupertino/theme.css" rel="stylesheet" />
<script src="~/js/jquery-2.1.3.js"></script>
<script src="~/js/jquery-ui-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<div id='divContent'></div>
</body>
</html>
<script>
$.ajax({
url: "/Quotation/ReturnFooterData",
type: 'get',
async: false,
success: function (data) {
document.getElementById("divContent").innerHTML = data;
},
error: function (data) {
document.getElementById("divContent").innerHTML = "error";
}
});
</script>
That part data should be present in the PDF at the footer.
Here the ajax call what I make doesn't hit the action method.
This was my actual problem, and my apologies for not providing the exact information about the problem.
Yes, something like
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
contentType: "application/json",
dataType: 'json',
type: 'POST',
url: '/Shop/FilterRinglet',
data: data,
success: function (result) {
//alert("success");
}
});
});
</script>
inside your html.
Don´t forget to load jquery in your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I currently have a mobile site I am building and I am having trouble with integrating a custom JQuery widget. For some reason the the pageshow event is firing twice for whichever page is loaded first.
For ease of understanding I have created two HTML pages
Page 1
<!doctype html>
<head>
<meta charset="utf-8">
<title>One</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-one">
<div role="main" class="ui-content" id="one-content">
One<br/>
back to two
</div>
<script type="text/javascript">
(function($, undefined) {
$.widget("test.stuff", {
_create : function() {
console.log("create");
},
_init : function() {
console.log("_init");
},
destroy: function () {
this.element.empty();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).on("pageshow", "#content-one", function () {
console.log("pageshow1");
$("#content-one").stuff({});
});
$(document).on("pagebeforeshow", "#content-one", function () {
console.log("pagebeforeshow1");
});
</script>
</div>
</body>
</html>
Page 2
<!doctype html>
<head>
<meta charset="utf-8">
<title>Two</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-two">
<div role="main" class="ui-content">
Two<br/>
back to one
</div>
<script type="text/javascript">
$(document).on("pageshow", "#content-two", function () {
console.log("pageshow2");
});
$(document).on("pagebeforeshow", "#content-two", function () {
console.log("pagebeforeshow2");
});
</script>
</div>
</body>
</html>
To recreate load page one first, navigate to page two using link, then navigate to page one using link.
When page one is loaded again the pageshow event is fired twice. I have the reloadPage set to true as I have dynamic content for my pages and I cannot serve cached pages.
I very well could be using the events incorrectly.
Try substituting your $(document).on("pageshow",...) with $(document).one("pageshow", ...), which restricts the event to one call http://api.jquery.com/one/.
The problem is that using on in the inline script creates a new event each time the page is loaded. So the first time you load the page, the inline script is executed and the pageshow event is triggered. The second time a new event is triggered again, but the first one is still listening to content-one pageshow. In fact, if you repeat the process you'll see the log three, four, ... times.
Another option could be to create a script in the head section which sets up all required triggers in $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...). In this case, the script will only be initialized once, so it will work.
Wasted about 2 hours trying to do all the fixes on here and other sites. I gave up and put an if statement in their to prevent it from firing again
var hasDownload = false;
$(document).on("pageinit", "#mypage",function(event){
if (hasDownload === false) {
hasDownload = true;
// do some work
}
);
Try to remove the page on hide event, like so :
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
$(docuement).on('pagehide', function (event, ui) {
$(event.target).remove();
});
});
Remenber that if you don't disable ajax, all request will be with AJAX
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 downloaded this piece of code to test try out some stuff but somehow it doesn't seem to be able to read the xml although it is in the same folder. Any idea how to get it to work??
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<title>Reading XML with jQuery</title>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){
var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
$('<div class="items" id="link_'+id+'"></div>').html(''+title+'').appendTo('#page-wrap');
$(this).find('desc').each(function(){
var brief = $(this).find('brief').text();
var long = $(this).find('long').text();
$('<div class="brief"></div>').html(brief).appendTo('#link_'+id);
$('<div class="long"></div>').html(long).appendTo('#link_'+id);
});
});
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Reading XML with jQuery</h1>
</div>
</body>
</html>
Try running it through a web server like Apache. I don't believe that XmlHttpRequest is reliable across browsers against the local file system. Technically it is meant to make HTTP requests to a web server.
See this SO answer
https://stackoverflow.com/a/5469527/1649198