Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
In our application we have 4 pages. Each page has 5 check boxs. If I
<--
app flow like this page0 -->page1 -->page4
-->page2 -->page4
-->page3 -->paeg4
go to page 1 and select 2 items,
then go to page 2, and select 4 items,
and after that go to page 3 and select 2 items,
the total count of items selected is 11.
Now, if I now go to page 4, can I somehow store the values from all pages to save.json file which is located under www folder. I am using PhoneGap.
If you are asking if a PhoneGap app can write a JSON file, then the answer is yes. Use the FileSystem plugin to do so. However, if you are just saving a small amount of data, it would be far easier to use LocalStorage.
First you need to create an array , store this array in localStarage, like got to page 1 store two value in array and update your localStorage value on every page on selection, on last page write this localStorage value in file using org.apache.cordova.file plugin. I have done example, you can manage as your rquirement.
a.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_a">
<div data-role="header" class="">
<h3>Fruit</h3>
</div>
<div role="main" id="" class="ui-content">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="apple" id="apple" value="Apple" >
<label for="apple">Apple</label>
<input type="checkbox" name="orange" id="orange" value="Orange">
<label for="orange">Orange</label>
</fieldset>
</div>
Book Order
</div>
</div>
</body>
<script>
var arr_fruit = [];
$("#btn_a").on("click", function(event){
$("input[type=checkbox]:checked").each(function(key){
arr_fruit.push( $(this).val());
});
localStorage.setItem("arr_fruit", arr_fruit);
location.href = "c.html";
})
</script>
<html>
b.html
<div data-role="page" id="page_b">
<div data-role="header" class="">
<h3>Flowers</h3>
</div>
<div role="main" id="" class="ui-content">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="rose" id="rose" value="Rose" >
<label for="rose">Rose</label>
<input type="checkbox" name="sunflower" id="sunflower" value="Sunflower">
<label for="sunflower">Sunflower</label>
</fieldset>
</div>
Book Order
</div>
</div>
<script>
var arr_flow = [];
$("#btn_b").on("click", function(event){
$("input[type=checkbox]:checked").each(function(key){
arr_flow.push( $(this).val());
});
localStorage.setItem("arr_flow", arr_flow);
location.href = "c.html";
})
</script>
c.html
<div data-role="page" id="page_c">
<div data-role="header" class="">
Page A
<h3>Details</h3>
Page B
</div>
<div role="main" id="" class="ui-content">
<p id="fr_title" style="display:none"><h3>Fruits</h3> </p>
<ul data-role="listview" id="list_fruit"></ul>
<p id="fl_title" style="display:none"><h3>Flowers</h3> </p>
<ul data-role="listview" id="list_flow"></ul>
</div>
</div>
<script>
var list_fruit = "";
var arr_fruit = localStorage.getItem("arr_fruit").split(",");
var list_flow = "";
var arr_flow = localStorage.getItem("arr_flow").split(",");
$("#page_c").on("pageshow", function(event){
// Fruits
$("#fr_title").show();
$.each(arr_fruit, function(key, value){
list_fruit += '<li>'+value+'</li>';
});
$("#list_fruit").html(list_fruit).trigger("create");
$("#list_fruit").listview( "refresh" );
// Flowers
$("#fl_title").show();
$.each(arr_flow, function(key, value){
list_flow += '<li>'+value+'</li>';
});
$("#list_flow").html(list_flow).trigger("create");
$("#list_flow").listview( "refresh" );
});
</script>
Related
I'm having a problem with figuring out how to add the name of the pokemon given in the input field, into the url of the api. My goal is to be able to search for the desired pokemon and then view it in a div below. I'm not exactly sure what this specific technique or method would be called in order to achieve this. Thank you in advance.
<!DOCTYPE html>
<!-- Create a full CRUD application of your choice. If you can use an existing API, use AJAX to interact with it. However, you do not have to use an API. If you do not use an API, store the entities you will create, read, update, and delete in an array.
Use a form to add new entities
Build a way for users to update or delete entities
Use Bootstrap and CSS to style your project -->
<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.0">
<title>Choose Your Pokemon Party</title>
</head>
<body>
<div>
<head>
<h2>Choose Your Pokemon Party</h2>
</head>
</div>
<div>
<div id="new-pokemon">
<h2>New Pokemon</h2>
<input type="text" id="new-pokemon-name" class="form-control" placeholder="Pokemon name">
<button type="submit" id="create-new-pokemon">Submit</button>
</div>
<div id="view-pokemon">
<!-- //views the requested pokemon, and you can add the pokemon from here -->
<button type="submit" id="add-pokemon">Add</button>
</div>
<div id="pokemon-party">
<!-- //pokemon party -->
</div>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
Javascript file
let pokeapi_URL = 'https://pokeapi.co/api/v2/pokemon/';
$.get('https://pokeapi.co/api/v2/pokemon/ditto', (data) => {
return console.log(data);
});
$.get('#create-new-pokemon').click(function(){
let pokemonName = $.get('new-pokemon-name').val();
console.log($.get('https://pokemonapi.co/api/v2/pokemon/ + pokemonName'))
});
class PokemonParty{
constructor(pokemon)
{
pokemon = [];
}
}
//When the user submits the name of the pokemon they want, it shows the pokemon, it's name
//typing moves and abilities
//the user can add the pokemon to it's party or search for another pokemon
//takes in the pokemon that are added from the form.
Your current code seems to be confused regarding the function of the $.get() method. This is only for making AJAX requests. It's not for retrieving data from the DOM, or working with jQuery objects in general.
In the case of the Pokemon API, to retrieve data you simply need to concatenate the name of the pokemon to the end of the GET URL.
To do this, hook your event handler to the click of the button and retrieve the val() from the #new-pokemon-name element.
let pokeapi_URL = 'https://pokeapi.co/api/v2/pokemon/';
$('#create-new-pokemon').on('click', () => {
let pokemonName = $('#new-pokemon-name').val();
$.get(pokeapi_URL + pokemonName, data => {
console.log(JSON.stringify(data));
// build the UI based on the response data here...
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
<head>
<h2>Choose Your Pokemon Party</h2>
</head>
</div>
<div>
<div id="new-pokemon">
<h2>New Pokemon</h2>
<input type="text" id="new-pokemon-name" class="form-control" placeholder="Pokemon name" value="squirtle" />
<button type="button" id="create-new-pokemon">Submit</button>
</div>
<div id="view-pokemon">
<!-- //views the requested pokemon, and you can add the pokemon from here -->
<!-- <button type="submit" id="add-pokemon">Add</button> -->
</div>
<div id="pokemon-party">
<!-- //pokemon party -->
</div>
</div>
Note that if you're new to jQuery, I'd suggest reading the excellent beginner's documentation.
I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
You can do it like this:
$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>
select the input tags in the form and track the change event:
$("form :input").on("change", function(){
var $elm = $(this); // the button which is clicked
// do your ajax here
});
I would just like to know how to display AngularJS in Angular 2+ (I have a very unique situation that requires this)
So far this is what I have tried:
https://stackblitz.com/edit/angular-wbbzbz?file=src/app/app.component.ts
To give you an idea of what is happening on stackblitz:
I have a basic html string (which I got from here: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_default):
myHtml = `
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
`;
And through a pipe, I display it using:
<div [innerHTML]="myHtml | pipeSanitizeHtml"></div>
But I end up having this (broken AngularJS):
AngularJS will work if you put this in your Angular 2+ index.html's header:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
I am new to node.js and I'm trying to create an easy way for a user to input data into an html form, then on the click of submit the data is passed to a node.js script. The node.js script is a post script that takes the user's inputed data and then makes a post to a API and takes a return in JSON from the API. I am trying to get the returned JSON to be printed back onto the html page. How do you do this in a clean and easy manner?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Commute | Ad-hoc</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container cf">
<div class="container cf">
<div>
<h1>Manual Query</h1>
<label>Mode</label>
<select id="modes">
<option value="driving">Driving</option>
<option value="walking">Walking</option>
<option value="cycling">Cycling</option>
</select>
<label>Latitude Origin</label>
<input type="text" name="latitude_origin" id="latitude_origin" value="37.791871">
<label>Longitude Origin</label>
<input type="text" name="longitude_origin" id="longitude_origin" value = "-122.396742">
<label>Latitude Destination</label>
<input type="text" name="latitude_dest" id="latitude_dest" value = "37.782461">
<label>Longitude Destination</label>
<input type="text" name="longitude_dest" id="longitude_dest" value = "-122.454807">
<button id="singleQuery" class="singleQuery" input type="default small">Run</button>
</div>
<div>
<h1>Multi-Query (.tsv)</h1>
<label>Upload</label>
<input type="file" name="pic" id="laserPrinters">
<button id="testLaser" class="default small" input type="default small">Run</button>
</div>
<div>
<h1>Result</h1>
<textarea rows="4" cols="50"> </textarea>
</body>
</html>
<script type="text/javascript">
var mode = $("#modes").val();
var latitude_origin = $("#latitude_origin").val();
var longitude_origin = $("#longitude_origin").val();
var latitude_dest = $("#latitude_dest").val();
var longitude_dest = $("#longitude_dest").val();
</script>
My Node.JS post script:
var request = require("request");
var options = { method: 'POST',
url: 'http://blah:8000/blah/blah/blah/blah/[latitude_origin]/[longitude_origin]/',
headers:
{ 'postman-token': 'blah',
'cache-control': 'no-cache' },
body: '{"query1":[latitude_dest,longitude_dest]}' };
request(options, function (error, response, body) {
if (error) throw new Error(error);
console.log(body);
});
First, you have to setup a server to listen to the requests that you will send to your node.js web api.
I really like recommend you use express.js. It is a very powerful web server.
Read more in:
https://expressjs.com/
I am writing some example for you soon.
Hope it help you.
UPDATE 1
Take a look at MEAN Stack
https://github.com/meanjs/mean
UPDATE 2
Here are some examples:
https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
https://developers.openshift.com/languages/nodejs/example-meanstack.html
I'm trying to link to the following html page using
$.mobile.changePage( "myPage.html", { transition: "slide"} );
However, it's not working. The page will load however the alert box with the spinning cirlce and "loading" message never disappears and the page never fully loads in its css content. Can anybody see why based on the above call and the html below? Thanks
HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<link rel="stylesheet" href="./signup.css">
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
// Global declarations - assignments made in $(document).ready() below
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
</script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
<h1>Classroom Tempo</h1>
</div>
<div data-role="navbar">
<ul>
<li>Sign-In</li>
<li>Sign-Up</li>
</ul>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<form id="form1">
<div id="optionSliderDiv" data-role="fieldcontain">
<label for="optionSlider">How Many Options?</label>
<input type="range" name="optionSlider" id="optionSlider" value="2" min="2" max="25" data-highlight="true" />
</div>
<fieldset data-role="controlgroup">
<legend>Numbers or Letters?:</legend>
<input type="radio" name="numbersOrLetters" id="Numbers" value="Numbers" checked="checked" />
<label for="Numbers">Numbers</label>
<input type="radio" name="numbersOrLetters" id="Letters" value="Letters" />
<label for="Letters">Letters</label>
</fieldset>
<script>
$(document).ready(function() {
// Assign global variables
hdrMainVar = $('#hdrMain');
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
sliderValue = $('#optionSlider');
surveyDescriptionVar = $('#SurveyDescription')
form1Var = $('#form1');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
hideContentDialog();
hideContentTransition();
hideConfirmation();
});
$('#buttonOK').click(function() {
hideContentDialog();
//hidePasswordMisMatch();
showMain();
return false;
});
$('#form1').submit(function() {
var err = false;
var passwordError = false;
// Hide the Main content
hideMain();
console.log(sliderValue.val());
// If validation fails, show Dialog content
if(err == true){
console.log("we've got an issue");
showContentDialog();
return false;
}
$('input[name=OnOff]').each(function() {
onOffValue = $('input[name=OnOff]:checked').val();
})
$('input[name=numbersOrLetters]').each(function() {
numbersOrLetters = $('input[name=numbersOrLetters]:checked').val();
})
console.log(onOffValue);
console.log(numbersOrLetters);
// If validation passes, show Transition content
showContentTransition();
// Submit the form
$.post("http://url", form1Var.serialize(), function(data){
console.log(data);
hideContentTransition();
showConfirmation();
});
return false;
});
</script>
</div> <!-- page1 -->
<!-- Page ends here -->
</body>
</html>
The $.mobile.changePage API has undergone some changes from version 1.0 alpha 4 and 1.0.1 of jQuery Mobile. The syntax you are using with option object is of the newer version of jQuery Mobile (at least from 1.0.1).