I am using asp.net mvc 4 and jqGrid. Is it possible to add more than 1 jqGrid to the same page? if so, could you tell me how? I have two jgGrid, both in the same page, but one appears in one tab and the another in another tab. I have a jquery ui tab. My problem is that only one is shown, the another not. Any ideas what's wrong?
<div id="jqGrid" class="jqGrid">
#Html.Partial("../Grids/_ComponentGrid")
</div>
<div id="jqGridCapsules" class="jqGrid">
#Html.Partial("../Grids/_CapsuleGrid")
</div>
Partial views:
../Grids/_ComponentGrid:
<table id="_componentGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_componentPager" style="text-align: center;">
</div>
../Grids/_CapsuleGrid:
<table id="_capsuleGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_capsulePager" style="text-align: center;">
</div>
I have debugged it with Internet explorer and as I can see, it seems like jqGrid is being applied correctly for first (I post main div, within them there are others divs nested):
<div class="jqGrid" id="jqGrid">
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox__componentGrid" style="width: 790px;" dir="ltr">
<div class="ui-widget-overlay jqgrid-overlay" id="lui__componentGrid"/>
<div class="loading ui-state-default ui-state-active" id="load__componentGrid" style="display: block;">
<div class="ui-jqgrid-view" id="gview__componentGrid" style="width: 790px;">
<div class="ui-jqgrid-resize-mark" id="rs_m_componentGrid">
<div class="ui-state-default ui-jqgrid-pager ui-corner-bottom" id="_componentPager" style="width: 790px; text-align: center;" dir="ltr">
</div>
However, for second is not being applied as generated code is:
<div class="jqGrid" id="jqGridCapsules">
<table id="_capsuleGrid" cellspacing="0" cellpadding="0">
<div id="_capsulePager" style="text-align: center;">
as you can see for second, the code generated is completely different from the first. It should be the same as first. So it seems like jqGrid style is not being applied to the second one, Why? What's happening? any ideas, please?
Related
I have implemented JQuery UI Datepicker on a site.
I have an issue where that when I click to show the calendar dropdown, where the dropdown overlays the bootstrap card in the next row, anything over the card-header cannot be clicked on.
If I scroll the page, the calendar position remains static, but the non-clickable area moves to wherever the card-header is positioned.
The z-index of the calendar is 9999, whilst that of the card-header is only 3.
I have tried adding
style="overflow: visible !important"
to the card based on another answer on stackoverflow, but no dice.
I have screenshot rendered html below, marking the datepicker, and the overlaid card-header:
In case relevant, I am using:
Bootstrap 4.6
ASP.NET Webforms
Material Dashboard 2.1.0
JQuery UI 1.13.2
JQuery 3.6.0
Any ideas why this is happening, and how to resolve? Thanks.
Edit 1 - 2023-01-11
I have put up a minimal example Here
I have added an inline style to the card-header that is being overlaid to increase the height, so that the problem is more apparent.
(I have stripped out a load of script references for this example that are now causing a few console errors, but these are not related to the issue.)
I am unable to replicate your code as it has links to content that is local to your web site. Consider the following more basic example.
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header">
<h4>Card with Datepicker</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-borderless mb-0">
<tbody>
<tr>
<th class="pl-0 w-50 pt-1 pb-1 border-top-0" scope="row"><strong>Select Date</strong></th>
<td class="pt-1 pb-1">
<span class="bmd-form-group is-filled"><input name="LastContactedCal" type="text" id="LastContactedCal" class="datepicker form-control" value="05/10/2022"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header" style="height: 200px;">
<h4>Another Card</h4>
</div>
<div class="card-body">
<p>Some Stuff</p>
</div>
</div>
</div>
</div>
This works as expected without the issue that you reported. I suspect that some other component that my example is not using is interfering with the click event in your sites code. I would suggest you remove all additional libraries except for Bootstrap and jQuery UI, then add them back in one at a time or in other orders, to see when the functionality you are seeing returns.
Below is the code I'm using in my ASP MVC view. I'd like the tab order to go from the first to last text box inputs in the fieldsets below in this order:
AgentTypeFields
BasicFields
AddressFields
CommunicationFields
DistributionFields
DRMFields
DSSAgentIds
DSSFields
Right now when the focus of the page is on the first input box of AgentTypeFields, which is the fieldset in the leftDiv of the topDiv. When the user is done tabbing through this fieldset, the focus then shifts to the first input of DistributionFields. Basically I need the tab index to move from the leftDiv fieldsets going from the topDiv, middleDiv, to the bottomDiv, and then back up through the rightDiv elements of the same top/middle/bottom divs.
I've tried puttint a tabindex property on the div and fieldset elements but this simply puts the focus on the element itself, not the inputs contained within it. Not the greatest when it comes to HTML/CSS so any suggests/help would be greatly appreciated. Thanks!
<div id="BigDiv" style="clear:both;">
#Html.HiddenFor(model => model.CreatedDate)
#Html.HiddenFor(model => model.CreatedOperator)
#Html.HiddenFor(model => model.ReferenceNumber)
#Html.HiddenFor(model => model.ReferenceType)
#Html.HiddenFor(model => model.ExtRepType)
#Html.HiddenFor(model => model.Region)
#Html.HiddenFor(model => model.INDDist)
<div id="topDiv">
<div class="LeftDiv" style="width: 450px; float:left;">
<fieldset id="AgentTypeFields" style="width: 400px;">...</fieldset>
</div>
<div class="RightDiv" style="width: 450px; float:left;">
<fieldset id="DistributionFields" style="width: 400px;">...</fieldset>
</div>
</div>
<div id="middleDiv">
<div class="LeftDiv" style="width: 450px; float:left;">
<fieldset id="BasicFields" style="width: 400px;">...</fieldset>
</div>
<div class="RightDiv" style="width: 450px; float:left;">
<fieldset id="DRMFields" style="width: 400px;">...</fieldset>
</div>
</div>
<div id="bottomDiv">
<div class="LeftDiv" style="width: 450px; float:left;">
<fieldset id="AddressFields" style="width: 400px;">...</fieldset>
<fieldset id="CommunicationFields" style="width: 400px;">...</fieldset>
</div>
<div class="RightDiv" style="width: 450px; float:left;">
<fieldset id="DSSAgentIds" style="width: 400px;">...</fieldset>
<fieldset id="DSSFields" style="width: 400px;">...</fieldset>
</div>
</div>
<p>
<input type="submit" value="Save" />
#Html.ActionLink("Back to Search", "Index", "Agent")
</p>
</div>
Put the tabindex on the first field in those fieldsets rather than the fieldset itself. However, this is really going to screw with the blind individuals who come to your site.
I found a question with my exact problem that nobody answered:
https://stackoverflow.com/questions/11218707/jquery-mobile-data-rel-dialog-not-firing
I have a dialog that should open when the user presses on a button. It works fine on ALL desktop browsers and Android browser. It does NOT work in Safari on iPhone or iPad. If you refresh the page on the iDevice, it works.
Here is my button:
#Model.selectedDate.ToShortDateString()
Here is my dialog:
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
#using (Html.BeginForm()) {
<div data-role="fieldcontainer">
#Html.LabelFor(model => model.selectedSystem, "Select a date for System " + Model.selectedSystem)
#Html.HiddenFor(model => model.selectedSystem)
#Html.LabelFor(model => model.selectedDate, "Date:")
#Html.TextBoxFor(model => model.selectedDate, new { type = "date" })
</div>
<button type="submit" data-theme="b">Select</button>
}
</div>
Here is the page source for the rendered page:
<div data-role="page" id="mainpage" data-theme="b">
<div data-role="header" data-theme="b" data-position="fixed">
<center>
<a href="/Home/Main">
<img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
</center>
</div>
<div style="text-align: center; padding-top: 5px">
<center>
<a href="/mobileDemo/Home/Main">
<img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Counts">
<img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Inventory">
<img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Vehicle">
<img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/SSAR">
<img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/STAR">
<img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/EXECDASH">
<img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
</center>
</div>
<div style="padding-left: 20px; padding-top: 10px">
<strong>Body Dashboard for System 1</strong>
</div>
<div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">
<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right"
data-transition="pop">11/7/2012</a>
<hr />
<ul data-role="listview" data-inset="true">
<li>Production</li>
<li>Body OEE</li>
<li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&date=11-07-2012">Doukie-Seisan
KPI</a></li>
<li>Down Time</li>
</ul>
</div>
</div>
Production Date
Select a date for System 1
Date:
Select
Also worth noting, I am passing a parameter to the view. The URL looks like this:
http://internal-server/mobileDemo/ExecDash/Body/1
Which goes to this when the dialog IS being displayed is:
http://internal-server/mobileDemo/ExecDash/Body/1#&ui-state=dialog
When is DOES NOT work (prior to refresh) on an iDevice, this is what is displayed when I hold down on the button and it gives me the OPEN/OPEN IN NEW TAB option:
http://internal-server/mobileDemo/ExecDash/Body/1#popup
What am I doing wrong?
I got your example working with some small tweak.
Created new project using VS2012 selected the mobile template.
Then in my Home/Index.cshtml I added your tag i.e. the button that fires the popup. Change the code to text be #DateTime.Now.ToShortDateString() since I didnt have your model.
I took your dialog and pasted it in the _Layout.cshtml immediately after the closing for the data-role="page" see code below:
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
#if (IsSectionDefined("Header")) {
#RenderSection("Header")
} else {
<h1>#ViewBag.Title</h1>
#Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
#RenderBody()
</div>
</div>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
#using (Html.BeginForm()) {
<div data-role="fieldcontainer">
<label>hello world</label>
</div>
<button type="submit" data-theme="b">Select</button>
}
</div>
</div>
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#RenderSection("scripts", required: false)
As you can see I also took out some of your code as I don't have your model, so I substituted my "hello world" label instead. So why did I do it all that way? Well, I tried to put the dialog in the index.cshtml BUT that meant the dialog HTML was getting output inside data-role="page" . So it wasn't firing for me. Once I moved it outside the data-role="page" div it worked. Tested out on iPhone5 and it worked (without refresh). The one thing I did notice about your markup in this post was that you were missing one closing DIV. So I'm not sure it was a copy/paste error or what. Try my exact steps and you should see it working on and iDevice just fine.
We have a section that looks like that ...
{{#PRIZES}}
<div style="text-align: left;TTS={{date}}">{{date}}</div>
<div style="text-align: left;TTS={{sign}}">{{sign}}</div>
<div style="text-align: center;TTS={{number}}">{{number}}</div>
<div style="text-align: right;TTS={{serie}}">{{serie}}</div>
<br>
{{#ADD}}
<div style="text-align: left;TTS={{sign}}">{{sign1}}</div>
<div style="text-align: left;TTS={{number}}">{{number}}</div>
<div style="text-align: right;TTS={{serie}}">{{serie}}</div>
<br>
{{/ADD}}
{{/PRIZES}}
We want that section add looks sometimes 0, or sometimes N for each iteration of Prizes section.
The problem is that I only can repeat ADD section same times for each prizes section.
I am new to Jquery-Mobile date box. I want to get the text from the date field using the ID and set that text in the table. But I am not getting it. Please, can anybody help me?
code
<div data-role="page" id="Goal_Weight_Screen">
<div data-role="header" data-theme="b" >
<h1>Goal Count</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="mydate">Choose Start Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "datebox","disableManualInput": true}'>
</div>
Submit
</div>
</div>
<div data-role="page" id="Calorie_Tracker">
<div data-role="header" data-theme="b" >
<h1>Calorie</h1>
</div>
<div data-role="content" id="table">
<table id="calorie_table" border="1">
<tr>
<th>Date</th>
<th>Food</th>
</tr>
<tr>
<td id="date1">'+$('#mydate').val()+'</td>
<td id="FI_1"></td>
</tr>
</table>
</div>
</div>
You should write a <script> tag and use the JQuery-Mobile method pageshow. Try something like this:
<script type="text/javascript">
$('#Calorie_Tracker').live('pageshow', function(event, ui){
$('#date1').val($('#mydate').val());
});
</script>
Try this. It gives me some weird error but you can see an alert with the date. I hop it will work in you application.