I'm completely new to jQuery Mobile and just trying to get a feel for how it might to work in my environment.
One Page 1 I'm displaying values that come down from the server. What I want to do is go to Page2 to set the values and then pressing "Back" have page 1 show the updated values.
Currently when I hit back, it's showing the original values and I need to do a manual partial or full refresh to get them updated.
How can I tell jQuery Mobile to auto refresh a page on hitting the back button? I'm using data-rel="back".
I guess I'm looking to see if there's a universal setting for this or something. Similar to $.mobile.ajaxEnabled = false; which I needed to turn on in my environment to get things working.
Thanks
UPDATE:
I've added some code here per request. Not sure it will really help. But here's what's going on. I'm trying to use jQuery Mobile in the context of an IBM XPages application. XPages is basically Java Server Faces but it has Dojo 1.8.1 built into it do to certain things like a Partial Refresh of a Div automatically. So for instance on a button I can write server side code - int a Java Managed Bean, get a result, and have it partial refresh a div on the webpage. Cool stuff. But the problem I GUESS is conflicts between jQuery Mobile and the build in Dojo that makes those things work. I don't want to use the mobile portion of Dojo because jQuery seems so much better.
Anyway - I got jQuery Mobile to work by making sure it loaded BEFORE the dojo pieces loaded. The other way around it wouldn't work at all. I'd like to work with individual pages rather then virtual pages in one.
I'm not sure if I care about much caching really as the pages will almost always be changing. I'm working on an inventory application with iPads and barcode scanners. So for instance on page1 I scan an item. Then I might move to page 2 to let the user do something with the item, on hitting the back button I want page 1 to refresh so it's updated with any new information
Thanks for any advice!!!
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js"></script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientDojo')</script>
<link rel="stylesheet" type="text/css" href="/jqm.nsf/themes/czarnowskiMobile.min.css">
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/jqm.nsf/home.xsp" class="xspForm" enctype="multipart/form-data">
<div data-role="page" data-theme="b">
<div data-role="header">
<h1><span id="view:_id1:_id2:computedField1" class="xspTextComputedField">Scanner</span></h1></div>
<div data-role="content">
<div id="view:_id1:_id2:callback3">
<ul data-role="listview"><li><a id="view:_id1:_id2:callback3:link2" href="/jqm.nsf/menuFacility.xsp" class="xspLink">Facility Menu</a></li><li><a id="view:_id1:_id2:callback3:link3" href="/jqm.nsf/menuShow.xsp" class="xspLink">Show Menu</a></li></ul><br><div id="view:_id1:_id2:callback3:_id12:timePanel">
<table><tr><td><span id="view:_id1:_id2:callback3:_id12:label1" class="xspTextLabel">viewScope</span></td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField1" class="xspTextComputedField"></span></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button1" id="view:_id1:_id2:callback3:_id12:button1" data-role="none">Update</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button3" id="view:_id1:_id2:callback3:_id12:button3" data-role="none">Clear</button></td>
</tr>
<tr><td><span id="view:_id1:_id2:callback3:_id12:label2" class="xspTextLabel">sessionScope</span></td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField2" class="xspTextComputedField"></span></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button2" id="view:_id1:_id2:callback3:_id12:button2" data-role="none">Update</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button4" id="view:_id1:_id2:callback3:_id12:button4" data-role="none">Clear</button></td>
</tr>
<tr><td>Current Time</td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField3" class="xspTextComputedField">7:39:40 PM</span></td>
<td></td>
<td></td>
</tr>
<tr><td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button5" id="view:_id1:_id2:callback3:_id12:button5" data-role="none">Partial Refresh</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button6" id="view:_id1:_id2:callback3:_id12:button6" data-role="none">Full Refresh</button></td>
<td></td>
<td></td>
</tr>
<tr><td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div id="view:_id1:_id2:callback2">
Footer Test</div>
</div>
</div>
<script> $.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;</script>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!dgljtbhtgw!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler1", "view:_id1:_id2:callback3:_id12:button1", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler3", "view:_id1:_id2:callback3:_id12:button3", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler2", "view:_id1:_id2:callback3:_id12:button2", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler4", "view:_id1:_id2:callback3:_id12:button4", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:_id32", "view:_id1:_id2:callback3:_id12:button5", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachEvent("view:_id1:_id2:callback3:_id12:_id34", "view:_id1:_id2:callback3:_id12:button6", "onclick", null, true, 2);
});
</script>
</body>
</html>
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.
I was using a trial version of kendo grid then after the license expired my employer bought it so i was able to download (they gave access to my account - employer's account is separate)
telerik.kendoui.professional.2016.3.1118.commercial.msi
Now the problem is this is still not working, I have done the following steps to install kendo grid
I have run this installer, and have also manually added to my asp.net-mvc application
js folder under my application's Scripts/kendo folder
css files (styles folder) under my application's Content/kendo folder
My code
#Scripts.Render("~/Scripts/kendo/jquery.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
#Scripts.Render("~/Scripts/kendo/kendo.all.min.js")
#Styles.Render("~/Content/kendo/kendo.common.min.css")
#Styles.Render("~/Content/kendo/kendo.default.min.css")
<script type="text/javascript">
//shorter version of document.ready
$(function () {
//kendo.ui.Grid
$("#grid").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 1
},
pageable:true,
resizable: true,
columnMenu: true,
scrollable:true
}
);
});
</script>
<div id="examplegrid">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
</tbody>
</table>
My browser does not have any errors. But i cannot see a kendo grid there.
get support it says you are not licensed for any products (which is confusing because i downloaded the commercial version from there)
I have also posted this to their forums (from my employer's account) but it takes them at least 3 days to respond!!
Page Source snap shot
I am also adding view source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
UPDATE
When i re-opened visual studion it gave me option to update my telerik version which i said yes and it showed me the following screen.
After all this grid is still the same - without kendo-grid skin :S
UPDATE
I read this topic Widgets Are Unavailable or Undefined
So i removed a redundant jquery reference and now the grid looks like the attached image.
Note: this was a separate test appication and i intend to incorporate this grid into my main application. Now the grid looks like this
I found my answer from Bundle of Kendo UI is not working in IIS
So as soon as i renamed the bundle
bundles.Add(new StyleBundle("~/Content/kendo").Include(...));
To
bundles.Add(new StyleBundle("~/Content/kendoui").Include(...));
It worked great!
Folks,
I just noticed something interesting developing my first ASP.Net Mvc application and Its when you mouse over on a submit button in Mozilla the full Url is shown in the status bar! Is it a normal behavior?! how can i prevent that?
Try the following code:
<html>
<body>
<form id="myForm">
<input type="text">
<!-- <input type="submit" value="Send" > -->
<input type="button" value="Send" onclick="onClick(this)">
</form>
<script type="text/javascript">
function onClick (e)
{
document.forms["myForm"].submit();
}
</script>
</body>
</html>
I'm beginning a web app using Materialize CSS v0.97, jQuery Mobile v1.4.5, and jQuery v2.1.4.
I'm trying to use the mobile collapse tutorial to have a navbar in the jQuery Mobile header, which on mobile devices changes to a hamburger button with the menu appearing when clicked.
When I resize my browser (Chrome, latest on Mac v10.11) to mobile size, the hamburger appears but clicking or hovering or anything does not make the menu appear.
The only thing I have changed was commenting out a line in jQuery Mobile JS because of this post about how to fix the Chrome security warning.
Could that be why the nav bar isn't working? My site doesn't load at all with the below code because of that warning, so I have everything js and css saved locally with relative links to them. But this snippet worked in the snippet preview...
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<div data-role="page" id="home">
<div data-role="header">
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<table class="centered">
<thead>
<tr>
<th data-field="collection">Collection</th>
<th data-field="description"></th>
<th data-field="progress"></th>
<th data-field="link"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff 1</td>
<td>Description of things in Stuff 1. Stuff 1 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 2</td>
<td>Description of things in Stuff 2. Stuff 2 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 3</td>
<td>Description of things in Stuff 3. Stuff 3 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
</tbody>
</table>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
Such is life -- as soon as I complain, the next thing I try works.
I kept the above code and only changed the jQuery Mobile import to point to the local, edited version, and now it runs in Chrome and the menu works.
Most likely something's messed up with me localizing the rest of the dependancies, but for now I'm good.
I have an input form using FLAT UI KIT that MUST contain a datepicker, so I chose to use jQuery's widget. But when I run it in Chrome the datepicker shows up, whilet on Firefox it is shows as a simple text input.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My test ยท stuff with datepicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/prettify.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico">
<!-- my addition jQuery UI for datepicker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<style>
.containerx {
background-color: #1abc9c;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
}
.titluedit{
margin: 0 0 0 0;
font-size:14px;
}
.titlueditx{
margin: 0 0 0 0;
font-size:14px;
color:red;
}
fieldset { margin: 0 0 10px 0; }
</style>
<script>
</script>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker();
});
});
</script>
</head>
<body>
<img src="images/logo2.png" alt="logox" height="81" width="305">
<h1 class="demo-panel-title" style="text-align:center; color:#d35400">XXXXXXXXX</h1>
<h3 class="demo-panel-title" style="text-align:center; color:#1abc9c">New info</h3>
<div class="container" style="width:900px; margin:0 auto;">
<form action="save.php" method="post">
<div class="container" style="width:700px; margin:0 auto;">
<fieldset>
<p class="titlueditx">Name *:</p>
<input type="text" name="nume" value="" placeholder="Name" class="form-control" />
</fieldset>
<fieldset>
<p class="titlueditx">Medium time *:</p>
<input type="text" name="durata" value="" placeholder="minutes" class="form-control" />
</fieldset>
<p class="titlueditx">Start date *:</p>
<input type="date" id="ui-datepicker" name="dataang" value="" class="form-control"/><br>
<fieldset>
<p class="titlueditx">Some other stuff *:</p>
<input type="text" name="sefutzul" value="" placeholder="Other relevant stuff" class="form-control" />
</fieldset>
</div>
<br><br>
<div class="container" style="width:700px; margin:0 auto;">
<table>
<tr>
<td>
<input type="hidden" id="idhidfirma" name="idfirma" value="1" />
<input type="hidden" id="idhnumefirma" name="numefirma" value="xxxxx" />
<button type="submit" class="btn btn-hg btn-primary"> Save info </button>
</form>
</td>
<td>
<form action="mylist.php" method="post">
<INPUT TYPE="hidden" NAME="idfirma" value="1">
<INPUT TYPE="hidden" NAME="numefirma" value="xxxxx">
<button type="submit" class="btn btn-hg btn-danger"> Cancel </button>
</form>
</td>
</tr>
</table>
</div>
</div>
</body></html>
What can I do to make it work in Firefox TOO?
Also in Chrome how can I make the calendar to close onClick on a day? Right now the calendar stays shown until i click somewhere else on the screen.
The problem is not Firefox, you are defining:
an input type=date with id ui-datepicker
binding a jQuery UI datepicker to an id datepicker
The 2nd selector not match any element so the jQuery UI datepicker is not binded to anything; by using an input type=date Chrome renders automatically a calendar control, so you see a calendar in Chrome because of the input type (see. https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec)
To fix the issue in all browser you can set input type=text in your ui-datepicker element, and set the correct selector.
Code:
$(document).ready(function () {
$("#ui-datepicker").datepicker();
});
Demo: http://jsfiddle.net/IrvinDominin/zAKQe/
Date picker is working with firefox, but z-index of datepicker is in "-". So it's not appearing in firefix browser.
Show update the z-index of datepicker through jquery it will appear.
$(".datepicker").css("z-index","100");
it will work on mozila firefox if is not working update your firefox version .
i run this it works. thanks
<head>
<meta charset="UTF-8" />
<title>Datepicker fadein</title>
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('.datepicker').datepicker({showAnim: "fadeIn"});
})
</script>
in your body of the page use the input
<input class="datepicker">