I am working through Chapter 23 of Javascript for Web Developers. Why does running
applicationCache.update()
from Chrome's console
return
Uncaught DOMException: Failed to execute 'update' on 'ApplicationCache': there is no application cache to update.
??
My HTML file
<!DOCTYPE html> <html manifest="offline.appcache">
<head>
<title>Dynamic Quiz</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Here is the question and its possible answers -->
<div class="questionEntire">
<h3 class="questionTitle">Question title goes here</h3>
<form>
<button type="submit">Next</button>
<div class="choices">
<!-- <input type="radio" name="answer" value="0"><span>Choice 1</span><br> -->
<!-- <input type="radio" name="answer" value="1"><span>Choice 2</span><br> -->
<!-- <input type="radio" name="answer" value="2"><span>Choice 3</span><br> -->
<!-- <input type="radio" name="answer" value="3"><span>Choice 4</span><br> -->
</div>
</form>
</div>
<!-- This is the div that should be shown at the end -->
<div class="totalDiv hideThis">
<h3 class="total">Your Score is</h3>
<p>total</p>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="eventUtilities.js"></script>
<script src="main.js"></script>
</body>
</html>
My offline.appcache file
CACHE MANIFEST
#Comment
CACHE:
https://code.jquery.com/jquery-2.1.1.js main.js
main.js
NETWORK:
*
I am unable to see any files in Chrome's web dev tools under Resource->Application Cache. When I run applicationCache.status, 0 is always returned.
http://jsfiddle.net/michaellatch/uxtawuwv/
Thank you in advance!
Related
I've been struggling to make this as reusable as possible. I have written it such that if I put the id's of both the target fieldset and the input checkbox it works. However, I have a number of form elements that must all act the same, so this isn't a great way to deal with it.
When a user enables or disables the checkbox switch, then I want the following form field to disable or enable accordingly. I've tried multiple different ways to accomplish this and cleaned up my javascript based on suggestions in other threads, but when I attempt to activate the switch I get the below error. Any help would be amazing!
form_enable.js:2 Uncaught TypeError: Cannot set property 'disabled' of null at enable_disable (form_enable.js:2) at HTMLInputElement.onchange (Trim.htm:11)
My trimmed down HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes" onchange="enable_disable(report_url_disable_fieldset,report_url_active_yes)">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset disabled id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
And my form_enable.js file:
function enable_disable(target_id,check_id) {
document.getElementById(target_id).disabled = !check_id.checked;
}
Try:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
</html>
And form_enable.js:
document.getElementById("report_url").setAttribute("disabled", "true");
document.getElementById("report_url_active_yes").addEventListener("change", function() {
document.getElementById("report_url_active_yes").checked ? document.getElementById("report_url").removeAttribute("disabled") : document.getElementById("report_url").setAttribute("disabled", "true")
});
I am trying to make a dropdown menu for a date and time picker within a multiple step form. The issue here is that the jQuery libraries are conflicting each other (specifically in between the </form> and the </body>), where the multiple step form works when the date and time picker libraries are disabled, and vice versa. I Looked online but nothing seem to resolve the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery -->
<!-- Custom styles for this template-->
<link href="coupons_Example.css" rel="stylesheet">
<title>Title of the document</title>
</head>
<body>
<!-- jQuery -->
<!-- multistep form -->
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Discount Setup</li>
<li>Type of Discount</li>
<li>Discount Time Period</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create Discount</h2>
<h3 class="fs-subtitle">Step 1</h3>
<input type="text" name="email" placeholder="Name of Discount" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Type of Discount</h2>
<h3 class="fs-subtitle">Step 2</h3>
<!-- Picking the date and time -->
<input type="text" name="datetimes" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Discount Time Period</h2>
<h3 class="fs-subtitle">Step 3</h3>
<input type="text" name="discountstart" placeholder="Discount Start Period" />
<input type="text" name="discountend" placeholder="Discount End Period" />
<input type="text" name="speekeasy" placeholder="Speekeasy" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="app.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
</body>
</html>
Please try below link
https://api.jquery.com/jQuery.noConflict/
Or for use multiple versions for jquery in same page, include jquery migrate:
https://code.jquery.com/jquery-migrate-1.4.1.min.js
But best advice do not user multiple jQuery library
Why dont you find the same module that requires the same jquery major version instead?
I did a research while it can be achieved by separating the scope, havent done it
you might want to check it by yourself in this link
https://www.tutorialspoint.com/How-to-use-multiple-versions-of-jQuery-on-the-same-page
Don't Use Multiple jQuery Core Library. Use either 3.4 or 1.9
In order to get Date etc work, you need to update(recall) that js after ajax call.
All I've done is to include Angular in my chrome extension and right of the bat it gives me a ´Uncaught ReferenceError:minErr is not defined´. I've tried multiple versions of Angular but the issue persists.
This is all I've done:
<!DOCTYPE html>
<html>
<head>
<title>Typography</title>
<script type="text/javascript" src="bower_components/angular-latest/src/Angular.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/core.css">
<body ng-app="" ng-csp>
<h1>Typography</h1>
<div class="viewport">
<form>
<label for="baseline">Baseline</label>
<div class="row clear">
<input type="range" name="baselineRange" id="baselineRange" min="0" max="144" step="1" />
<input type="input" name="baseline" id="baseline"/>
</div>
<label for="offset">Baseline offset</label>
<input type="text" name="offset" id="offset" />
<button type="submit" id="send">Generate</button>
</form>
<p>Typography was created by Joel Sanden</p>
</div>
</body>
</html>
I am experiencing a weird issue... when I load the page the first time this works completely:
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
but if I try POSTing to the same page again, with my "Add" or "Remove" button, the above function doesn't work any longer. In other works, the phone field will be perfect and filtered when the page is first loaded, but when you try and add more club fields, the phone filter no longer works. Why isn't the phone field being masked anymore, am I doing something wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Test Page</title>
<meta http-equiv="cache-control" content="no-cache"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/framework.css">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" class="page-header">
</div>
<!--/header -->
<form style="" method="POST">
<fieldset style="text-align: center;">
<label for="phone">Cell Phone</label>
<input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />
<br />
<?php
if(isset($_POST['add']))
$_POST['club_num']++;
if(isset($_POST['remove']) && $_POST['club_num'] > 1)
$_POST['club_num']--;
if(!isset($_POST['club_num']))
$_POST['club_num'] = 1;
?>
<input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
<h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
<?php
$count = 0;
do {
$count++;
?>
<label for="clubs<?=$count?>"><?=$count?>. Club</label>
<input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
<?php if($count == $_POST['club_num']){ ?>
<div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
<input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
</div>
<?php
}
} while ($count < $_POST['club_num']);
?>
</fieldset>
</form>
<br />
<!-- footer -->
<div data-role="footer" class="footer">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:120px">
</div>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
When one of the buttons is pressed the page content is reloaded using AJAX. This means the original element '#phone' (that you bound the mask function to) is replaced.
I can't see where you are doing the AJAX request from, but you need to call $("#phone").mask("(999) 999-9999"); again once the page has reloaded.
I figured out how to solve this problem, by using jd182 answer and jeroen comment and link here: http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html
Since it is submitting an ajax form, like jd182 stated, and because it was mobile jquery, all post automatically send as a ajax post.
All I had to do was change
<form style="" method="POST">
to
<form style="" method="POST" data-ajax="false">
and it fixed the problem, because it posted regularly!
Thanks jeroen and jd182!
I am new to BootStrap 3 and am having problems with my divs overlapping. I'm probably missing something simple, but can't seem to find the problem. Here is the html.
You can also find a working copy of what I am trying to do in Bootstrap at wibberding.info/SolarTime.
Thanks for any help you can give.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Solar Time</title>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<div class="jumbotron">
<div class="container clearfix">
<h1 id="clock">Solar Time</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>This web app allows you to find Solar Time in two ways:</p>
<p> 1. Find Solar Time by reading the location data from your device. You will have to have this turned on. </p>
<p> 2. By entering a longitude. You can find the longitude of your zipcode here.</p>
</div>
<div class="col-md-4">
<form id="form">
<input id="device" type="radio" name="locationData" value="device" checked onchange="solarTime.checkLocationMethod()">
<label for="device">Use my device location.</label><br>
<input id="latLong" type="radio" name="locationData" value="latLong" onchange="solarTime.checkLocationMethod()">
<label for="latLong">Enter Longitude</label>
<input type="text" size="10" maxlength="30" id="longitude" onFocus="solarTime.changeToLong()"></input> (Enter postive longitude for East and negative for West. All of the United States is negative.) <br>
<input type="button" onclick="solarTime.checkLocationMethod()" value="Find Solar Time" />
</form>
</div>
</div>
</div>
</body>
</html>
So it looks like I missed a closing DIV tag. It now works :-) Thank you everyone for your help . . .