I am trying to show audio and google map in a simple HTML5 page. When I run it in other outside browsers like Chrome, Mozilla everything works perfectly.
But same is not working in my eclipse internal web browser and I want the output in that only.
Here is my project link on GitHub:
https://github.com/Venkatesh-Devale/cmpe273/tree/master/StaticRefresher
Please help me know why this is so?
#CHARSET "UTF-8";
#divVideo, #divAudio {
width:40%;
}
#divMyHeader {
background-color:orange;
}
#map {
height: 400px;
overflow: auto !important;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="hello.css">
</head>
<body>
<div id="divMainPage">
<div id="divMyHeader">
<h1>Venkatesh Devale</h1>
<h6>SJSU ID: 012420148</h6>
</div>
<div id="content">
<p>
I am creating this page to introduce me as we all are pretty new,
through this refresher assignment.
Below is my short video which will tell you about myself.
</p>
<div id="divVideo">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
<p>
Below is my favorite songs audio. Please guess it.
</p>
<div id="divAudio">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div id="divFeedbackShowingInputTypes" style="border-style:groove;">
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="txtFirstName" autofocus></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="txtLastName"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email" title="<any characters>#<your mail account>.com" pattern="[a-zA-Z]+[#][a-zA-Z]+[.com]" required></td>
</tr>
<tr>
<td>Telephone:</td>
<td><input type="tel" name="phone" title="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></td>
</tr>
<tr><td></td>
<td><input type="submit" name="btnSubmit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="myGeoLocatioWithMap">
<div id="map">
</div>
</div>
</div>
<script>
var myMap, myLocationPanel;
function getFirstMap() {
myMap = new google.maps.Map(document.getElementById('map'), {
center: {lat: -58.397, lng: 197.644},
zoom: 7
});
myLocationPanel = new google.maps.InfoWindow;
if (navigator.geolocation) {
console.log("Geolocation is available");
navigator.geolocation.getCurrentPosition(showMyPosition, findLocationNotFoundError);
} else {
handleLocationError(false, myLocationPanel, myMap.getCenter());
}
}
function showMyPosition(position) {
console.log("Geolocation is available");
var myPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
myLocationPanel.setPosition(myPosition);
myLocationPanel.setContent("Your location is here");
myLocationPanel.open(myMap);
myMap.setCenter(myPosition);
var marker = new google.maps.Marker({
position: myPosition,
map: myMap
});
}
function findLocationNotFoundError() {
showLocationError(true, myLocationPanel, myMap.getCenter());
}
function showLocationError(checkDoesBrowserHasLocation, myLocationPanel, mapCenter) {
myLocationPanel.setPosition(mapCenter);
if(checkDoesBrowserHasLocation) {
myLocationPanel.setContent('Somehow geolocation service is not working, we are fixing it');
} else {
myLocationPanel.setContent('Seems that the browser does not support the geolocation');
}
myLocationPanel.open(myMap);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBd-SiW0EEjuidG6nhM6iSeDt9epJPvYno&callback=getFirstMap">
</script>
</body>
</html>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
This post was edited and submitted for review 10 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
After a year of my server working perfectly fine, since last week, I am no longer able to successfully hit the Coinbase API, even though no code has been changed on my side whatsoever. The response I'm currently getting from all calls, is a HTML page, asking me to complete a captcha. This is of course not possible, so I was hoping if anyone could tell me how to let the API know my calls are genuine.
Anytime I call the list transactions endpoint for example GET https://api.coinbase.com/v2/accounts/:account_id/transactions, this is the response I get:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en-US">
<!--<![endif]-->
<head>
<title>Please Wait... | Cloudflare</title>
<meta name="captcha-bypass" id="captcha-bypass" />
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/cf.errors.css" type="text/css"
media="screen,projection" />
<!--[if lt IE 9]><link rel="stylesheet" id='cf_styles-ie-css' href="/cdn-cgi/styles/cf.errors.ie.css" type="text/css" media="screen,projection" /><![endif]-->
<style type="text/css">
body {
margin: 0;
padding: 0
}
</style>
<!--[if gte IE 10]><!-->
<script>
if (!navigator.cookieEnabled) {
window.addEventListener('DOMContentLoaded', function () {
var cookieEl = document.getElementById('cookie-alert');
cookieEl.style.display = 'block';
})
}
</script>
<!--<![endif]-->
<script type="text/javascript">
//<![CDATA[
(function(){
window._cf_chl_opt={
cvId: "2",
cType: "managed",
cNounce: "17494",
cRay: "6ef7c0529ad19570",
cHash: "993127dea6d4a42",
cUPMDTk: "\/v2\/user?&limit=100&__cf_chl_tk=ENzk.33NJDLNBYWzHfXIXyRNVTr2GSNptuhagA9Wgw0-1647876861-0-gaNycGzNB_0",
cFPWv: "b",
cTTimeMs: "1000",
cLt: "n",
cRq: {
ru: "aHR0cHM6Ly9hcGkuY29pbmJhc2UuY29tLy92Mi91c2VyPyZsaW1pdD0xMDA=",
ra: "YXhpb3MvMC4xNy4x",
rm: "R0VU",
d: "q2gpw3wUesAqkklJbRwZ5iKnexNkqnb56VNvMVoWQB9SNIuL0qjzz2OZUn9bzUrLesXpVbug0gfZVPp7KSueqrKuW3ygg/hNIEvzqfgwGZfvvYq7QvXXifI790ciT/AjYOX7NalXhcL1pBIs/YHNigEG08zzhkhhaxXMV1PVLCClOAmLLMMwWoVGPrf89Sj+Zn26hNdP5M2VaufiKQnbmAd5sk0AclAVFgKE7dALXhPLOmu4pFdEYAnLyah9LzNb6sybNgeVKzGqjnygC7ZWv9ZWneRweLPBAO6WWox6pBfla8KIlKvZb8f5UdZe0Ofo9LG7lpAFNmYpn6SGRMmQeDIqUEDGbR2q/pVKcYBpRlpDCdrL7/Q3nJ9/M34UL1kh6hnXpcrKLQB0rMgsEhrShy+o3ZN+c1Zu22LNcwYcBOASzprlwXIMPxFS35VXtUzpImjgAmHkrI1yLgyMg3AxvqSOtgF29iU0iRah31iLjg9wRBVMiXr45gazyyO2q5CmjFX759gOIcLEdOL8DbwOhAJq+d41Q6BNMTaFbIY0ivly3/R70zHZFFGyzFPknWKNKmKMrdTtQSIyxNDAG6eRkDLWSMyXSg8samDwVMxO9iP0Pocquo/yJO6gCjXsNrE5",
t: "MTY0Nzg3Njg2MS44NjQwMDA=",
m: "0Wag3gWELLAplAyr+U68VHPGLi8wHxglclsYp9gHXqw=",
i1: "+BTRsYVCcAHV9rfnaZexSw==",
i2: "pPp+nsgRXaj2mTRYW9DqIQ==",
zh: "gcAsYHC/e1LCLckuTRLI18a2jyXqZLmumNyE/3B9BHQ=",
uh: "ucU4+zhDdQUaYB73OLep7a3a/S/wsDXG6hga3RWCpb8=",
hh: "DEnwA/GqE2zOarLhzSj8/arJrL5U8H7OKffhxYHzEKo=",
}
};
}());
//]]>
</script>
<style type="text/css">
#cf-wrapper #spinner {
width: 69px;
margin: auto;
}
#cf-wrapper #cf-please-wait {
text-align: center
}
.attribution {
margin-top: 32px;
}
.bubbles {
background-color: #f58220;
width: 20px;
height: 20px;
margin: 2px;
border-radius: 100%;
display: inline-block;
}
#cf-wrapper #challenge-form {
padding-top: 25px;
padding-bottom: 25px;
}
#cf-hcaptcha-container {
text-align: center;
}
#cf-hcaptcha-container iframe {
display: inline-block;
}
#keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#cf-wrapper #cf-bubbles {
width: 69px;
}
#-webkit-keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#cf-bubbles>.bubbles {
animation: fader 1.6s infinite;
}
#cf-bubbles>.bubbles:nth-child(2) {
animation-delay: .2s;
}
#cf-bubbles>.bubbles:nth-child(3) {
animation-delay: .4s;
}
</style>
</head>
<body>
<div id="cf-wrapper">
<div class="cf-alert cf-alert-error cf-cookie-error" id="cookie-alert" data-translate="enable_cookies">Please
enable cookies.</div>
<div id="cf-error-details" class="cf-error-details-wrapper">
<div class="cf-wrapper cf-header cf-error-overview">
<h1 data-translate="managed_challenge_headline">Please wait...</h1>
<h2 class="cf-subheadline">
<span data-translate="managed_checking_msg">We are checking your browser...</span> api.coinbase.com
</h2>
</div>
<div class="cf-section cf-highlight cf-captcha-container">
<div class="cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<div class="cf-highlight-inverse cf-form-stacked">
<form class="challenge-form managed-form" id="challenge-form"
action="/v2/user?&limit=100&__cf_chl_f_tk=ENzk.33NJDLNBYWzHfXIXyRNVTr2GSNptuhagA9Wgw0-1647876861-0-gaNycGzNB_0"
method="POST" enctype="application/x-www-form-urlencoded">
<div id='cf-please-wait'>
<div id='spinner'>
<div id="cf-bubbles">
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
</div>
<p data-translate="please_wait" id="cf-spinner-please-wait">Please stand by,
while we are checking your browser...</p>
<p data-translate="redirecting" id="cf-spinner-redirecting"
style="display:none">Redirecting...</p>
</div>
<input type="hidden" name="md" value="Uk9MnLuGCd5oNpE_ju4ST61NOngvF95h8KPqURw1kuM-1647876861-0-Ab-Yosq9cgug51IzehxFR14UtS_3EWFinahhfDD8bTdjhG1wdNwQ8z64cb5I9U75gBM2ijEK96Qs94_QhM6CzTDiVQi4pYEc_Y3Nx6IpdWFy1gEYab8Y9-mKBo4U3Kk-vc3CG0G6VjLujd9AyoXkgjQS0qQxsVSpOdetbkPNQiOs0RP09aCqXTrbIFZeQuLFlTpUxHPKX_qS4o1GhNbXzs5hjP6ElGjnLmjve-5vm-b_ZfRECVtuai7AQEcLqevZWi01InZaBZga0owxo-B9iSrowbjozT9I9l9saaRmVePbPjxGAqkP-pYP0w_pnLMvQnMJWJZUd5MLNLfaVplAErzLIUnOfPMFXxl7coGb7ZV2-01LAuA6LTqXQy8gHV0Rl3xEZO3SyC-QQbiVo3J3Wuy1d_CouffXehq2WDQjqoBPDWCV0LZhW32Xpw3j4q1ymcC6m_rulBNdKs_1qC1sd-W9_QNrULSzlu3jI9S0gKy-u_XYdyQqAwQ7hbOLo_jWQ7SAjEECwLygOBOlXeNEswOGu20nugvwu2hGuoykvY2GC4qynNK_OTmpaooZdWDuK-z01CkLJmQVE-9eCeUXFPdzRA8JJLa67UpqPY_HP6xS4_zAVEXiS1OUowhyZgdh3D4nL81L2PjFU6KHNG8B2bmyyn46L_C9dsGe9EBYXOObisgVL4ipiwSyug2ofMj3tAdV49bA6HbwQ4sEnW4C6igTpltgfi2IvCfCuwzIZ4nZmbBUviuXTA4ZVCpbW_p6uX5GJI1FfylkPtH-daMvub_MyF5TUR3VuUE6F8InRJP4OMKdZVchEr67HWYCrEZihbBKhdFCATtUABe7c41ViQmiLgCqtmoaJuEkZcsC4U1wyI80O0nZVhfHcYlRg6XOrQ" />
<input type="hidden" name="r" value="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">
<input type="hidden" name="vc" value="c235cbc158b8a0beb9f5e0bc41ad4605">
<noscript id="cf-captcha-bookmark" class="cf-captcha-info">
<h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on
and reload the page.</h1>
</noscript>
<div id="no-cookie-warning" class="cookie-warning" data-translate="turn_on_cookies"
style="display:none">
<p data-translate="turn_on_cookies" style="color:#bd2426;">Please enable Cookies
and reload the page.</p>
</div>
<script type="text/javascript">
//<![CDATA[
var a = function() {try{return !!window.addEventListener} catch(e) {return !1} },
b = function(b, c) {a() ? document.addEventListener("DOMContentLoaded", b, c) : document.attachEvent("onreadystatechange", b)};
b(function(){
var cookiesEnabled=(navigator.cookieEnabled)? true : false;
if(!cookiesEnabled){
var q = document.getElementById('no-cookie-warning');q.style.display = 'block';
}
});
//]]>
</script>
<div id="trk_captcha_js"
style="background-image:url('/cdn-cgi/images/trace/captcha/nojs/h/transparent.gif?ray=6ef7c0529ad19570')">
</div>
</form>
<script type="text/javascript">
//<![CDATA[
(function(){
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
var trkjs = isIE ? new Image() : document.createElement('img');
trkjs.setAttribute("src", "/cdn-cgi/images/trace/managed/js/transparent.gif?ray=6ef7c0529ad19570");
trkjs.id = "trk_managed_js";
trkjs.setAttribute("alt", "");
document.body.appendChild(trkjs);
var cpo=document.createElement('script');
cpo.type='text/javascript';
cpo.src="/cdn-cgi/challenge-platform/h/b/orchestrate/managed/v1?ray=6ef7c0529ad19570";
window._cf_chl_opt.cOgUQuery = location.search === '' && location.href.indexOf('?') !== -1 ? '?' : location.search;
window._cf_chl_opt.cOgUHash = location.hash === '' && location.href.indexOf('#') !== -1 ? '#' : location.hash;
if (window._cf_chl_opt.cUPMDTk && window.history && window.history.replaceState) {
var ogU = location.pathname + window._cf_chl_opt.cOgUQuery + window._cf_chl_opt.cOgUHash;
history.replaceState(null, null, "\/v2\/user?&limit=100&__cf_chl_rt_tk=ENzk.33NJDLNBYWzHfXIXyRNVTr2GSNptuhagA9Wgw0-1647876861-0-gaNycGzNB_0" + window._cf_chl_opt.cOgUHash);
cpo.onload = function() {
history.replaceState(null, null, ogU);
};
}
document.getElementsByTagName('head')[0].appendChild(cpo);
}());
//]]>
</script>
</div>
</div>
<div class="cf-column">
<div class="cf-screenshot-container">
<span class="cf-no-screenshot"></span>
</div>
</div>
</div>
</div>
</div>
<div class="cf-section cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<h2 data-translate="why_captcha_headline">Why do I have to complete a CAPTCHA?</h2>
<p data-translate="why_captcha_detail">Completing the CAPTCHA proves you are a human and gives
you temporary access to the web property.</p>
</div>
<div class="cf-column">
<h2 data-translate="resolve_captcha_headline">What can I do to prevent this in the future?</h2>
<p data-translate="resolve_captcha_antivirus">If you are on a personal connection, like at home,
you can run an anti-virus scan on your device to make sure it is not infected with malware.
</p>
<p data-translate="resolve_captcha_network">If you are at an office or shared network, you can
ask the network administrator to run a scan across the network looking for misconfigured or
infected devices.</p>
</div>
</div>
</div>
<div
class="cf-error-footer cf-wrapper w-240 lg:w-full py-10 sm:py-4 sm:px-8 mx-auto text-center sm:text-left border-solid border-0 border-t border-gray-300">
<p class="text-13">
<span class="cf-footer-item sm:block sm:mb-1">Cloudflare Ray ID: <strong class="font-semibold">6ef7c0529ad19570</strong></span>
<span class="cf-footer-separator sm:hidden">•</span>
<span class="cf-footer-item sm:block sm:mb-1"><span>Your IP</span>: 78.19.141.77</span>
<span class="cf-footer-separator sm:hidden">•</span>
<span class="cf-footer-item sm:block sm:mb-1"><span>Performance & security by</span> <a
rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing" id="brand_link"
target="_blank">Cloudflare</a></span>
</p>
</div><!-- /.error-footer -->
</div>
</div>
<script type="text/javascript">
window._cf_translation = {};
</script>
</body>
</html>
Which is a HTML captcha verification check from Cloudflare. Contacted their support and they gave the following response:
Thanks for contacting us. Currently, Coinbase is only providing support through our public API documentation. For help utilizing Coinbase’s API, please use the API key resource/guides found here: https://www.coinbase.com/cloud
If this API is actually usable, then why is there a Cloudflare verification check? Am I doing something wrong from my end? Can anyone from Coinbase kindly look into this and offer a professional response/solution?
I'm using Google App script to enable users to upload PDF files to one of my Google drive folder.
At first sight everything seems to work perfectly but when I go to the folder to check the received PDF files I only get blank PDF !
Did someone already encounter this issue ? If yes, could you help me out please ?
Here are my 2 scripts:
server.gs:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "Travaux_T°S";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
return "Et hop: une copie de plus à corriger ! :)" ;
} catch (error) {
return error.toString();
}
}
form.html:
<!doctype html>
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
<BR>
<BR>
<BR>
<div align="center">
<p><img src="https://cdn.pixabay.com/photo/2017/04/25/22/28/despaired-2261021_960_720.jpg" width="50%" height="50%"></p>
<table width="459" border="0">
<tbody>
<tr>
<td width="462"><div align="center">
<hr>
</div>
<form id="myForm" align="center">
<input type="text" name="myName" placeholder="NOM_Prenom">
<input type="file" name="myFile">
<input type="submit" value="Envoyer le fichier"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
<hr></td>
</tr>
</tbody>
</table>
<h3> </h3>
<p> </p>
</div>
Many thanks in advance ! :)
Uploading with this.parentNode does not always work well for all file types.
Instead, an elegant and reliable upload procedure is with Filereader.
Sample
Code.gs:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(blob, name, description) {
try {
var dropbox = "Travaux_T°S";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = blob.split(",")
var blob = Utilities.newBlob(Utilities.base64Decode(blob[1]), 'application/pdf');
console.log(blob);
var fileName = blob.setName(name).getName();
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + description);
return "Et hop: une copie de plus à corriger ! :)" ;
} catch (error) {
return error.toString();
}
}
form.html:
<!doctype html>
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
<BR>
<BR>
<BR>
<div align="center">
<p><img src="https://cdn.pixabay.com/photo/2017/04/25/22/28/despaired-2261021_960_720.jpg" width="50%" height="50%"></p>
<table width="459" border="0">
<tbody>
<tr>
<td width="462"><div align="center">
<hr>
</div>
<form id="myForm" align="center">
<input type="text" name="myName" placeholder="NOM_Prenom">
<input type="file" name="myFile">
<input type="submit" value="Envoyer le fichier"
onclick="upload()" >
</form>
<div id="output"></div>
<script>
function upload() {
var file = document.getElementsByName('myFile')[0].files[0];
var description = document.getElementsByName('myName')[0].value;
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Google_Dropbox';
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(content, file.name, description);
return false;
}
reader.readAsDataURL(file);
}
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
<hr></td>
</tr>
</tbody>
</table>
<h3> </h3>
<p> </p>
</div>
I am using kendo's mvvm and sortable widget to allow a user to sort multiple tables with data binded to it. I have implemented the following code. It works, but the data seems to be logging correctly to the console. However, the data in the UI jumps around.
$(".sortable-handlers").kendoSortable({
handler: ".move",
hint:function(element) {
return element.clone().addClass("sortable-hint");
},
change: function(e) {
var services = viewModel.get("services");
console.log(e.oldIndex);
var oldIndex = e.oldIndex;
var newIndex = e.newIndex;
services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);
//Set it back to the original list
viewModel.set("services", services);
console.log(JSON.stringify(viewModel.get("services")));
}
});
It's been a long time but adding .trigger("change") works for me (I'm using jquery ui sortable instead of kendo ui sortable).
// Define model with dependent method
var MyModel = kendo.data.Model.define({
fields: {
left: "number",
right: "number"
},
total: function() {
return this.get("left") + this.get("right");
}
});
// Create view model
var viewModel = kendo.observable({
items: []
});
// bindings
kendo.bind($("#myView"), viewModel);
// using $.ui.sortable when list changes
var timeout = null;
viewModel.items.bind("change", function(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#sortable").sortable({
update: function(e, ui) {
// get UID of sorting target
var targetUid = ui.item.attr("uid");
// list before
var beforeIndexes = _.map(viewModel.items, _.iteratee("uid"));
// target's original index
var fromIdx = _.indexOf(beforeIndexes, targetUid);
// list after
var afterIndexes = $("#sortable").sortable("toArray", {
attribute: "uid"
});
// target's new index
var toIdx = _.indexOf(afterIndexes, targetUid);
var changeItem = viewModel.items[fromIdx];
viewModel.items.splice(fromIdx, 1);
if (toIdx >= viewModel.items.length) {
viewModel.items.push(changeItem);
} else {
viewModel.items.splice(toIdx, 0, changeItem);
}
// refresh
viewModel.items.trigger("change");
}
});
}, 500);
});
// add some items to list
viewModel.items.push(new MyModel({
left: 1,
right: 2
}));
viewModel.items.push(new MyModel({
left: 6,
right: 3
}));
viewModel.items.push(new MyModel({
left: 5,
right: 7
}));
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="myView">
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">NOT-SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="template-item">
<tr data-bind="attr: {uid: uid}">
<td>
<span data-bind="text: left" />+
<span data-bind="text: right" />=
<span data-bind="text: total" />
</td>
</tr>
</script>
I must create ModalPopupExtender. for this, I create one simple application and all my expectation wrok. But when i add my popup in master page it doesn't work, How I can fix this problem?
my popup
<asp:Button ID="Button1" runat="server" Text="Click here to show iframe in modalpopup" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
</asp:ModalPopupExtender>
<div id="Panel1" style="display: none;" class="popupConfirmation">
<iframe id="frameeditexpanse" frameborder="0" src="InnerPage.aspx" height="161">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
my script in InnerPage.aspx
<script language="javascript" type="text/javascript">
function okay() {
window.parent.document.getElementById('btnOkay').click();
}
function cancel() {
window.parent.document.getElementById('btnCancel').click();
}
</script>
place this script on same page with extender
<script type="text/javascript">
function clickOk() {
$get("<%= btnOkay.ClientID %>").click();
}
function clickCancel() {
$get("<%= btnCancel.ClientID %>").click();
}
</script>
and instead of parent.window.document.getElementById().click() use parent.window.clickOk() and parent.window.clickCancel()
I'm having some strange behaviour when using the datepicker. When I load the page, and directly click on the datepicker input, nothing happens. When I click again, nothing happens. But when I click on another input field and then try again the datepicker field, it'll show up.
The issue showed up, after I put the datepicker trigger into a live function, because I have input which will be dynamically generated.
This is my code:
$(".date").on('click', function() {
$(this).datepicker({
dateFormat: "dd.mm.yy",
altField: $(this).closest("td").find(".dateFormated"),
altFormat: "yy-mm-dd"
})
})
Edit: I have seen that live() is deprecated as of 1.7. I therefore switched live() for on(). Didn't solve the issue though.
Whole Html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" />
<script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
counter = 0;
$("#addRow").click(function() {
counter++;
rowHtml = '\
<tr class="datarow" id="row' + counter + '">\
<td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>\
<td><input type="text" class="from" /></td>\
<td><input type="text" class="to" /></td>\
<td>\
<select class="type">\
<option value="1">Typ 1</option>\
<option value="2">Typ 2</option>\
</select>\
</td>\
<td class="removeRow" id=' + counter + '>X</td>\
</tr>';
$('#submitButton').before(rowHtml);
})
$(".removeRow").live("click", function() {
id = $(this).attr("id");
$("#row" + id).remove();
})
$("[name=formZeitdaten]").submit(function(i) {
values = "";
$(".datarow").each(function(j) {
tr = $(this);
date = tr.find('td').find('.date').val();
from = tr.find('td').find('.from').val();
to = tr.find('td').find('.to').val();
type = tr.find('td').find('.type').val();
values = values + date + ',' + from + ',' + to + ',' + type + ';';
})
console.log(values);
$("[name=dataset]").val(values);
})
$("#slider").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [30, 210],
slide: function(event, ui) {
$(".date").val(ui.values[0] + ":" + ui.values[1]);
}
});
$(".date").on('click', function() {
$(this).datepicker({
dateFormat: "dd.mm.yy",
altField: $(this).closest("td").find(".dateFormated"),
altFormat: "yy-mm-dd"
})
})
});
</script>
</head>
<body>
<span id="test"></span>
<form name="formZeitdaten" method="post">
<table id="zeitdaten">
<tr>
<td>Datum</td>
<td>Von</td>
<td>Bis</td>
<td>Typ</td>
<td id="addRow"><input type="button" value="Hinzufügen" /></td>
</tr>
<tr class="datarow">
<td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>
<td><input type="text" class="from" /></td>
<td><input type="text" class="to" /></td>
<td>
<select class="type">
<option value="1">Typ 1</option>
<option value="2">Typ 2</option>
</select>
</td>
<td></td>
</tr>
<tr id="submitButton">
<td><input type="submit" /></td>
</tr>
</table>
</form>
<div id="slider"></div>
</body>
</html>
In your addRow function, add:
$("#row"+counter+" .date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
showButtonPanel: true,
showAnim: 'show'
});
after you add the element to the DOM. You can then get rid of the $(".date").on('click',...) statement later.
This should work for you
$('.date').datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
showButtonPanel: true,
showAnim: 'show'
});