I have problems with displaying icons in a popup.
Here is a fragment of my code:
head:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
Popup with the button (button is not displayed just text):
<div id="highscores" data-role="popup" class="ui-content" data-theme="e" data-overlay-theme="a" style="min-width:400px">
Close
<div data-role="header">
<h1> Summary </h1>
</div>
<div data-role="content">
<p> Your results are shown below </p>
<table>
<tr>
<td>Correct: </td>
<td id="correctTd"></td>
</tr>
<tr>
<td>Incorrect: </td>
<td id="incorrectTd"> </td>
</tr>
<tr>
<td>Ratio: </td>
<td id="ratioTd"></td>
</tr>
</table>
</div>
</div>
</head>
How should I proceed with it?
Firefox log:
[15:21:22.120] GET
http://uwf.edu/CDE/MobileWeb/ajax.cfc?method=getOptions&_cf_ajaxproxytoken=74929DDA92ACB52984&returnFormat=json&argumentCollection=%7B%22questionId%22%3A1%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=80E1FEFCAEF84777C986F41BD95A9374&_cf_rc=1
[HTTP/1.1 200 OK 23ms]
--
[15:21:47.964] GET http://uwf.edu/cde/mobileweb/selfcheck.cfm [HTTP/1.1 200 OK 1465ms]
[15:21:49.457] GET http://uwf.edu/cfscripts/ajax/messages/cfmessage_en_US_.js [HTTP/1.1
304 Not Modified 2ms]
[15:21:49.458] GET http://uwf.edu/cfscripts/ajax/package/cfajax.js [HTTP/1.1 304 Not Modified 2ms]
[15:21:49.459] GET http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
[HTTP/1.1 304 Not Modified 30ms]
[15:21:49.460] GET http://code.jquery.com/jquery-1.8.2.min.js [HTTP/1.1 304 Not Modified 240ms]
[15:21:49.460] GET http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
[HTTP/1.1 304 Not Modified 30ms]
[15:21:49.461] GET http://uwf.edu/cde/mobileweb/js/script.js [HTTP/1.1 304 Not Modified 14ms]
[15:21:49.462] GET http://uwf.edu/cde/MobileWeb/css/style.css [HTTP/1.1 304 Not Modified 10ms]
[15:21:49.712] Empty string passed to getElementById(). # http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js:2
[15:21:49.776] Setting Video
[15:21:49.776] Resource id is undefined.
[15:21:49.820] GET http://code.jquery.com/mobile/1.2.0/images/ajax-loader.gif [HTTP/1.1
304 Not Modified 195ms]
[15:21:49.821] GET http://code.jquery.com/mobile/1.2.0/images/icons-18-white.png
[HTTP/1.1 304 Not Modified 443ms]
[15:21:49.822] GET http://uwf.edu/CDE/MobileWeb/ajax.cfc?method=getOptions&_cf_ajaxproxytoken=74929DDA92ACB52984&returnFormat=json&argumentCollection=%7B%22questionId%22%3A3%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=80E1FEFCAEF84777C986F41BD95A9374&_cf_rc=0
[HTTP/1.1 200 OK 504ms]
Adding rel="external" to your anchor tag may fix the issue.
Related
Hello I built an application in Spring with Thymeleaf and I am displaying the forms on one page and the results on another page and I would like to show both on the same page.
Here is my index page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau e-mail</title>
</head>
<body class ="bg-light" >
<h2 text-align="center">Cautare telefon sau email</h2>
<div class ="text-center" >
<form method ="post" action ="/raspuns" >
<div class="form-group">
<input type ="number" minlength="10" maxlength="10" class="form-control" name ="text2" th:value ="${text2_value}" placeholder="Numar telefon" pattern="[0-9]{10}" required/>
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
<br></br>
<form method ="post" action ="/raspuns2" >
<div class ="form-group" >
<input type ="email" class ="form-control" placeholder ="Adresa email" th:value="${email_value}"
name ="email" />
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
</div>
</body>
</html>
An here is my results page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau email</title>
</head>
<body>
<form action="/">
<button class ="btn btn-primary">Acasa</button>
</form>
<h1> Cautare telefon</h1>
<table class="table">
<tbody>
<tr th:each="map : ${map_list}" >
<td> CNP:</td>
<td th:text ="${map.get('cif')}" ></td>
<td> Nume:</td>
<td th:text ="${map.get('den_client')}" ></td>
</tr>
</tbody>
</table>
</body>
</html>
How can I make them appear on the same page ? I would appreciate if someone could give me a small example please. Thanks
Hook executed successfully but returned HTTP 403:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Error 403 No valid crumb was included in the request</title>
</head>
<body>
<h2>HTTP ERROR 403 No valid crumb was included in the request</h2>
<table>
<tr>
<th>URI:</th>
<td>/job/pipeline3</td>
</tr>
<tr>
<th>STATUS:</th>
<td>403</td>
</tr>
<tr>
<th>MESSAGE:</th>
<td>No valid crumb was included in the request</td>
</tr>
<tr>
<th>SERVLET:</th>
<td>Stapler</td>
</tr>
</table>
<hr>Powered by Jetty:// 9.4.27.v20200227
<hr/> </body>
</html>
Screenshot
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!
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>
Opera is displaying my new site as XML and I can't for the life of me figure out why.
Here's what firebug has to say
Server ASP.NET Development Server/10.0.0.0
Date Mon, 08 Nov 2010 22:58:32 GMT
X-AspNet-Version 4.0.30319
X-AspNetMvc-Version 2.0
Content-Encoding gzip
Cache-Control private
Content-Type text/html; charset=utf-8
Content-Length 1835
Connection Close
Here's what W3C has to say
Line 3, column 6: application/xhtml+xml is not an appropriate Content-Type for a document whose root element is not in a namespace.
<html>
Line 3, column 6: Unnamespaced element html not allowed in this context. (Suppressing further errors from this subtree.)
<html>
Here's the markup
<!DOCTYPE html>
<html>
<head>
<title>What's happening around you right now! - My App</title>
<meta content="no" http-equiv="imagetoolbar" />
<link rel="search" type="application/opensearchdescription+xml" title="My App" href="/assets/xml/opensearch.xml" />
<link rel="stylesheet" type="text/css" href="/MYREALLYCOOLAPP/Extras/siteMaster.Css/1" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<div id="urban-now-logo">
<span>My App</span>
</div>
</div>
<div id="logindisplay">
<span id="logindisplaywrapper">log in | <a href="/MYREALLYCOOLAPP/modalwindow/selectregion"
title="Change Region" class="RegionWindow">Calgary</a> | about | faq
<span style="padding-left: 20px;"></span>
<form action="/MYREALLYCOOLAPP/search" id="searchForm" method="get">
<input id="search-text" name="q" tabindex="1" type="text" maxlength="80" size="28" placeholder="search..." />
</form>
</span>
</div>
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a class="youarehere" href="/MYREALLYCOOLAPP/">Now</a></li>
<li>Coming</li>
<li>Hot</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li>Add Event</li>
</ul>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="main">
<h2>What's Happening Within The Next 24 Hours!</h2>
<hr />
<div id="innermain">
<div class="twocolumn-left">
<div id='bingMap' class="largeMap">
<noscript>
<img src="http://developer.multimap.com/API/map/1.2/OA10091719904371779?zoomFactor=11&width=550&height=400&lat_1=51.18468&lon_1=-114.497999&lat_2=51.169858&lon_2=-114.32549&lat_3=51.083277&lon_3=-114.203964&lat_4=51.063097&lon_4=-114.092031&lat_5=50.939664&lon_5=-113.973568" />
</noscript>
</div>
</div>
<div class="twocolumn-right">
</div>
</div>
<div id="footer">
<ul id="footernavigation">
<li>© 2010 - My App - All Rights Reserved</li>
<li><span class="colorgreen increasesize-140">■</span> about | <span class="colorgreen increasesize-140">
■</span> faq | <span class="colorgreen increasesize-140">■</span> <a href="/MYREALLYCOOLAPP/about/advertise">
advertise</a> | <span class="colorgreen increasesize-140">■</span> legal</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript" src="/MYREALLYCOOLAPP/Extras/MYREALLYCOOLAPP.js/1"></script>
<script type="text/javascript">
var zoomLevel = 10
var json_object = [{ "lat": 51.063097, "lon": -114.092031, "title": "Jubilee Auditorium", "desc": "Some great concerts go down here"}];
</script>
<script type="text/javascript" src="/MYREALLYCOOLAPP/Extras/bingmaps.js/1"></script>
</body>
</html>
Basically, when I launch the website in Opera, the top says
This document had no style information.
and then all of my markup is displayed (like xml).
It looks like your server is sending the file as text/html to Firefox, but application/xhtml+xml to Opera.
Opera (10.63) has a firebug-like interface you can check this with. Right click on a page to bring up the context menu, select "Inspect Element". Select the "Network" tab and expand the relevant request line. Then open either "Headers" or "Raw" and it will show you the content-type used to send the page to Opera.
To allow Opera to process the page correctly as application/xhtml+xml, add
xmlns="http://www.w3.org/1999/xhtml"
as an attribute to the html element as LukeH says.
Doesn't your DOCTYPE need to specify the appropriate DTD etc? For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And/or do you need to specify a namespace for your <html> element? For example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">