In spite of including all the references for the Weekline plugin the browser shows the error that weekline is not a function. I am trying this in an ASP.Net MVC View
<script src="~/bootstrap-3.3.6-dist/js/jquery.weekLine.js"></script>
<script src="~/Scripts/jquery.weekLine.min.js"></script>
<link href="~/bootstrap-3.3.6-dist/css/jquery.weekLine-white.css" rel="stylesheet" />
<script src="~/bootstrap-3.3.6-dist/js/jquery-latest.min.js"></script>
<table border="1">
<tr>
<td height="50" width="100">
<div class="weekDays" title="weekdays" id="weekdays"></div>
</td>
</tr>
<tr>
<td height="25" width="100">
<div id="selectedDays"></div>
</td>
</tr>
</table>
$("#weekdays").weekLine();
$("#weekdays").weekLine({
onChange: function() {
$("#selectedDays").html($(this).weekLine('getSelected', 'indexes'));
}
});
Related
I am working on Intranet web application. it has developed using Strust2 and run on the weblogic 12c server. application working on dev environment without any issue IE(11) and Edge(41) Microsoft browser.
But after deploying Production it only working IE(11).it doesn't work on Edge.we can launch login page after that but can't navigate on Edge.
Edge browser console we can see below error.
CSP14321 Resource violated directive 'default-src 'self'' in Content-security-Policy:inline script https://xx.xxx.x.xx/dms/login.action at line
19 column 30.Resource will be blocked
Note: Our Web Application supports work with IE11 and Edge.
I tried with the different approach but couldn't navigate from the login page
1.i remove the meta tags like
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
2.add meta tags like
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
above approach doesn't work.to change Content Security Policy no any configurations files in our application .plase help with this
This is the login page.
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sx" uri="/struts-dojo-tags"%>
<%# page contentType="text/html;charset=UTF-8" language="java"%>
<%# page import="tvm.ka.TvsGlobals"%>
<%# page errorPage="/tvs/ka/common/KvsCommonError.jsp"%>
<head>
<title><s:text name="title.login" /></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=KvsConfigMgr.strCSS%>" type="text/css" />
<script language="JavaScript" src="<%=kvsConfigMgr.strJS%>KvsCommon.js">
</script>
<script language="JavaScript" src="<%=KvsConfigMgr.strJS%>KvsLogin.js">
</script>
<script language="JavaScript">
var MSG_USERID = "<s:text name="msg.login.userid"/>";
var MSG_PASSWORD = "<s:text name="msg.login.password"/>";
</script>
</head>
<body background="<%=KvsConfigMgr.strLstBg%>" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0" onLoad="focusFirst()">
<s:form action="login" method="POST">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" background="<%=KvsConfigMgr.strIMG%>topbg.gif">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
background="<%=KvsConfigMgr.strIMG%>topbg.gif">
<tr>
<td><table width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="13%"
background="<%=KvsConfigMgr.strIMG%>logo_bg.jpg"><img
src="<%=KvsConfigMgr.strIMG%>default_01.jpg" width="133"
height="77" alt=""></td>
<td width="87%"
background="<%=KvsConfigMgr.strIMG%>top_bg.jpg"><img
src="<%=KvsConfigMgr.strIMG%>default_02.jpg" width="645"
height="77" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div align="left"></div></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="40%"> </td>
<td class="errorText">
<%-- <s:if
test="${not empty ${KmsGlobals.GLOBAL_ERR_MSG_LIST}.null}"
scope="request">
<s:iterator value="${KmsGlobals.GLOBAL_ERR_MSG_LIST}.null"
indexId="count" id="errMsg" type="java.lang.String">
<s:property value="errMsg.null" />
<br>
</s:iterator>
</s:if> --%> <s:if test="hasActionErrors()">
<div class="error">
<s:actionerror />
</div>
</s:if>
</td>
</tr>
<tr>
<td class="bodyTextSmall"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>To begin, please key in your user id and<br />password
below, and click on login.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="80"
height="8" /></td>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="150"
height="8" /></td>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="80"
height="8" /></td>
</tr>
<tr>
<td class="bodyTextBold">User ID</td>
<td><input type="text" name="strUserId" size="20"
tabindex="1" /></td>
<td> </td>
</tr>
<tr>
<td class="bodyTextBold">Password</td>
<td>
<%--
<!--html:password property="strPasswd" autocomplete="off" size="20" tabindex="2"/ -->
I-WAPT-8 Password autocomplete attribute was enabled
Application Penetration Test Fix
--%> <input type="password" name="strPasswd"
autocomplete="off" size="20" tabindex="2" />
</td>
<td><input class="button" style="width: 70px" type="submit"
value="Login" onClick="return validate()" tabindex="3" /></td>
</tr>
<tr>
<td colspan="3" class="errorText">For authorised use only.
Unauthorised use is strictly prohibited.</td>
</tr>
</table>
</td>
</tr>
</table>
<%-- <s:hidden name="dispatch" value="login" /> --%>
<input type="hidden" name="dispatch" value="login" />
</s:form>
<div id="version-tag"><%=KvsConfigMgr.strVer%></div>
<style>
#version-tag {
position: absolute;
bottom: 0;
left: 0;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: rgba(0, 0, 0, 0.6);
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
vertical-align: text-top;
border-color: #0085E0;
}
</style>
</body>
Along with content-security-policys you cannot use inline Javascript like onLoad="focusFirst()" and
<script language="JavaScript">
var MSG_USERID = "<s:text name="msg.login.userid"/>";
var MSG_PASSWORD = "<s:text name="msg.login.password"/>";
</script>
https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution
Inline Javascript code will simply not be executed.
Instead, create a Javascript file with this code:
document.addEventListener('load', focusFirst);
Make sure focusFirst function is known at that point.
Depending on what focusFirst does it might improve the performance if you instead attach the listener to the DOMContentLoaded event (which triggers when all HTML is parsed, whereas load only triggers much later once all linked resources like images etc. have been loaded).
Please note that inline <script> blocks will also not be executed with a content security policy active.
I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the moment. I want the user to get redirected to the second page. I have tired linking the pages but it did not work. ANy Suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
<div data-role="content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id=document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id=="")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj =jQuery.parseJSON(str);
var destination=obj.results[0].destination;
document.getElementById("to").innerHTML=destination;
var origin=obj.results[0].origin;
document.getElementById("from").innerHTML=origin;
var arrivaldatetime=obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML=arrivaldatetime;
var departuredatetime=obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML=departuredatetime;
document.getElementById("resultDiv").style.display="block";
}
});
});
</script>
</body>
</html>
Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if (!bus_stop_id) {
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json",
dataType: 'json',
success: function(results) {
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div class="ui-content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true"></div>
<div class="ui-content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
</body>
</html>
Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
your above example
I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>
So I'm working on a very simple web app. When I do a cache clear and hard reset, or I open the page in a different browser, it won't display everything. But then every refresh after that the display is fine. Is this something wrong with my code? Here's a copy of my HTML.
<!DOCTYPE html>
<html>
<head>
<title>Small Store</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body ng-app="myApp" ng-controller="store">
<div id="wrapper">
<div class="box" id="Store">
<table>
<thead>
<tr>
<td colspan="3" style="text-align:center">Store</td>
</tr>
</thead>
<tbody>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Price</em></td>
</tr>
<tr ng-repeat="item in store">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Price|currency}}</td>
<td>
<button ng-disabled="store.money<item.Price" ng-click="buy(item)">Buy</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Stock" ng-hide="stock.length===0">
<table>
<tbody>
<tr>
<td colspan="3" style="text-align:center">Stock</td>
</tr>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Quantity</em></td>
</tr>
<tr ng-repeat="item in stock" ng-hide="item.Quantity<1">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Quantity}}</td>
<td>
<button ng-click="sell(item)">Sell</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Cart" ng-hide="cart.length===0">
<!-- TO IMPLEMENT -->
</div>
</div>
<div id="Editor">
<!-- TO IMPLEMENT -->
</div>
<div id="money">
Remaining money: {{money|currency}}
<p>
<input type="checkbox" name="Edit" value="true"> Edit store
<br>
</p>
</div>
<script src="app.js"></script>
</body>
</html>
And here it is in codepen with the css and javascript. The error persists in codepen so I think the error is in my code but I'm not exactly sure..
I have the following HTML table:
<div class="someClass" id="someID">
<!-- Move all images inside the td's here -->
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
</td>
</tr>
....
</tbody>
</table>
What I want is go trough each td and remove the image and insert it before the table. And than remove the entire table.
What is the best way to do this?
Thanks.
You can use jQuery and use each() to iterate through all of the td elements and move all of the images within td before the table.
$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});
SEE DEMO
I got this working:
WORKING FIDDLE
$(document).ready(function(){
$('.bvz_beeldthumb').each(function(){
$('.someClass').append(this);
});
$('#mainTable').remove();
});
Document ready means that when the document is ready the code will be fired.
It finds all images with class bvz_beeldthumb on the page and moves it to the div someClass. After that it removes the table.
Try This
$("#mainTable td").each(function() {
var Img=$(this).find("img");
$("#someID").prepend(Img);//here element 'id' in which you want to put these images.
$(this).find("img").html('');
});
I hope this helps you!!
You can try something like
$('#mainTable img').insertBefore('#mainTable')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
</td>
</tr>
</tbody>
</table>