In my phonegap application i updated my datas for that i have the following code in that i got the window.location.hash(* indicate error line) value will be empty.
function init() {
$("#homePage").live("pageshow", function() {
getDatas();
});
$("#editPage").live("pageshow", function() {
***var loc = window.location.hash;***
alert("loc" + loc);
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1, loc.length);
var detailId = qs.split("=")[1];
$("#editFormSubmitButton").attr("disabled", "disabled");
dbShell.transaction(function(tx) {
tx.executeSql("select id,name,age,city,occupation from nameDetail where id=?", [detailId], function(tx, results) {
$("#mId").val(results.rows.item(0).id);
$("#mName").val(results.rows.item(0).name);
$("#mAge").val(results.rows.item(0).age);
$("#mCity").val(results.rows.item(0).city);
$("#mOccupation").val(results.rows.item(0).occupation);
$("#editFormSubmitButton").removeAttr("disabled");
});
}, dbErrHandler);
} else {
alert("empty");
$("#editFormSubmitButton").removeAttr("disabled");
}
});
}
function getDatas() {
dbShell.transaction(function(tx) {
tx.executeSql("select id,name,age,city,occupation,date from nameDetail order by date desc", [], renderEntries, dbErrHandler);
}, dbErrHandler);
}
function renderEntries(tx, results) {
if (results.rows.length == 0) {
$("#mainContent").html("<p>Don't have any Details</p>");
} else {
var s = "";
for (var i = 0; i < results.rows.length; i++) {
s += "<li><a href='addEdit.html?id="+results.rows.item(i).id + "'>" +results.rows.item(i).name + "</a></li>";
alert("" + s);
}
//alert(S);
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Names</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/index.js"></script>
</head>
<body onload="init();">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Names</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul>
</div>
<div data-role="footer" class="ui-bar">
Add Note
</div>
</div>
</body>
</html>
and addEdit.html:
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Details</h1>
</div>
<div data-role="content">
<form id="addEditForm" method="post">
<input type="hidden" name="mId" id="mId" value="">
<div data-role="fieldcontain">
<label for="mName">Name</label>
<input type="text" name="mName" id="mName"/>
</div>
<div data-role="fieldcontain">
<label for="mAge">Age</label>
<input name="mAge" id="mAge"/>
</div>
<div data-role="fieldcontain">
<label for="mCity">City</label>
<input name="mCity" id="mCity"/>
</div>
<div data-role="fieldcontain">
<label for="mOccupation">Occupation</label>
<input name="mOccupation" id="mOccupation"/>
</div>
<div data-role="fieldcontain">
<input type="submit" id="editFormSubmitButton" value="Save Note">
</div>
</form>
</div>
<div data-role="footer" class="ui-bar">
Return Home
<input type="button" data-role="button" id="sync" name="sync" value="Sync" data-icon="arrow-d"/>
</div>
</div>
how to solve this some body help to solve this...
EDIT :
issue solved using this one.
solution link
I got the solution using following method
var loc = $(location).attr('href');
if (loc.indexOf("?") >= 0) {
var url = loc.substr(loc.indexOf("?") + 1, loc.length);
listId = url.split("=")[1];
it will be helpful for someone like me.
I solved my issue using this link Refer
I'm assuming this javascript works the same way as javascript on a traditional browser here ..
Judging by the comments in the code, it looks like you're expecting the hash to hold the query string, perhaps ?
The hash only holds what's after the hash in a url
eg
www.this.com/apage.html?firstval=value&anothervalue=45#locationinpage
in this url,
window.locationhash will equal "#locationinpage"
but
window.locaton.search will equal "?firstval=value&anothervalue=45"
That is : the query string excluding the part after the hash
perhaps you need window.locaton.search instead, or as well ?
Related
I am using this dynamic form generation code . https://www.jqueryscript.net/form/dynamic-forms-fields.html#google_vignette
Example : https://www.jqueryscript.net/demo/dynamic-forms-fields/
I have modified the html to take option value as input . I am adding options from an array. I want all the options to be shown from that array , on "Add" new form again the same options should come.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery Dynamic Forms Plugin Example</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<style>
.container { margin: 150px auto; }
h1 { margin-bottom: 50px; }
</style>
<script>
$(document).ready(function() {
var dynamic_form = $("#dynamic_form").dynamicForm("#dynamic_form","#plus5", "#minus5", {
limit:10,
formPrefix : "dynamic_form",
normalizeFullForm : false
});
$("#dynamic_form #minus5").on('click', function(){
var initDynamicId = $(this).closest('#dynamic_form').parent().find("[id^='dynamic_form']").length;
if (initDynamicId === 2) {
$(this).closest('#dynamic_form').next().find('#minus5').hide();
}
$(this).closest('#dynamic_form').remove();
});
});
function addLocation() {
var input_object1 = JSON.parse('[{"id":1,"name":"Pune","facilityType":"CAMPUS","feedback":true,"roomStateMode":2,"asDm":true,"defaultSlotId":3,"timezone":"Asia/Kolk ata","visitorKioskOtpAllow":true,"visitorKioskQrCode":true,"defaultSlotStartBefore":5,"visitorCheckInTemplate":"","visitorPassTemplate":"visitor-pass-horizontal","s howAttendance":true,"employeePassTemplate":"employee-pass-template_1.html","employeePassPreapprovedTemplate":"employee-pass-preapproved-template_1.html","employeePa ssAdminApprovalRequired":true,"employeePassMaxDays":15,"employeePassAllowExternalUsers":true,"employeePassAdminApprovalExternalUsers":true,"attendanceReportTemplate ":1,"visitorQuickCheckInTemplate":"visitor_quick_checkin_email_template.html","level":2,"deskGroupBookingAllow":true,"deskGroupBookingMaxPeople":5,"latitude":18.520 4,"longitude":73.8567,"city":"Pune","streetAddress":"","rosterMax":50,"rosterConfigType":1,"rosterAllowedUptoDays":30,"deskBookIfRoster":false,"disableDeskBookShift Option":true,"healthDeclarationNotificationPreHours":2,"healthDeclarationDeskBookingAutoCancelDays":3,"countryCode":"25","healthDeclarationDisableDeskCheckinWithout Pass":false,"deskBookingKioskQrCodeCheckin":true,"disableDeskBookAmenityOption":true,"deskBookMaxEndDays":10,"deskBookAvailableLevelWise":true,"deskBookingDisableCo worker":false,"deskBookingDefaultDuration":9,"deskBookingCovidVaccinationCertDisable":true,"visitorQuickInviteAllow":true,"visitorQuickInviteTitle":"test","visitorQ uickInvitePurpose":"Other","defaultRoomDisplayTheme":{"id":1,"name":"foo","homeImageId":215,"homeImageChecksum":"7c858c1e9e6c971cc360141e92fc918e","homeFontColor":" e5e0ec"}}]') ;
var input_object2 = JSON.parse('[1,8,11,83,37,88,40,42,41]');
var campush_from_dashboard = null;
// for the edit , it should look for the id
$.each(input_object1, function (index, value) {
if(campush_from_dashboard == null){
if (jQuery.inArray(value.id, input_object2) !== -1) {
$('<option>').val(JSON.stringify({
"campusId": value.id
})).text(value.name)
.appendTo('[id^=location]');
}
}
$.each(input_object1[index].facilities, function (index1, value1) {
if (jQuery.inArray(value1.id, input_object2) !== -1) {
$('<option>').val(JSON.stringify({
"campusId": value.id,
"buildingId": value1.id
})).text(value.name + value1.name)
.appendTo('[id^=location]');
}
$.each(input_object1[index].facilities[index].facilities, function (index2,
value2) {
if (jQuery.inArray(value2.id, input_object2) !== -1) {
$('<option>').val(JSON.stringify({
"campusId": value.id,
"buildingId": value1.id,
"floorId": value2.id
})).text(value.name + value1.name + value2.name)
.appendTo('[id^=location]');
}
});
});
});
};
</script>
</head>
<body>
<div class="container">
<form method="POST">
<label class="form-label">Advanced Properties for Desk Usage Analysis (Optional)</label>
<div class="form-group" id="dynamic_form">
<div class="row">
<div class="col-md-12 ">
<label for="location" class="form-label">Location</label>
<select class="form-select" name="location" id="location" placeholder="Location"
aria-describedby="teamsFeedback" required class="selectpicker" multiple>
</select>
</div>
<div class="button-group mt-2 mb-2 col-12">
<a href="javascript:void(0)" class="btn btn-primary " id="plus5" >Add More Advance Properties</a>
Remove
</div>
</div>
</div>
</form>
</div>
</body>
I'm rather new to Javascript, so please excuse simple mistakes if I made any. I need to make a task board page. The user inputs a value (a task and a date) and JS saves it into an object. The object is pushed into an array and saved to Local Storage. After that, it fades in a note (did this with an image and CSS effects) and prints the value on top of it. To accomplish this I tried using a For loop to go through the array when I get it back from local storage, but it only keeps printing the first value the user entered.
This is my code:
var taskArray = [];
var imgs = document.getElementsByTagName("img");
$(document).ready(function hideImages() {
$("img").hide();
})
function saveToLocalStorage() {
//debugger;
var taskName = document.getElementById("task").value;
var taskDate = document.getElementById("date").value;
var task = {
name: taskName,
date: taskDate
}
taskArray.push(task);
var arrayToString = JSON.stringify(taskArray);
localStorage.setItem("user tasks", arrayToString);
var mainDiv = document.getElementById("maindiv");
var arrayFromStorage = localStorage.getItem('user tasks');
arrayFromStorage = JSON.parse(arrayFromStorage);
for (let index = 0; index < arrayFromStorage.length; index++) {
mainDiv.innerHTML += `
<span class="relative">
<img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
<span class="centerOnNote" id="textspan">
Your task = ${arrayFromStorage[x].name}
Complete by = ${arrayFromStorage[x].date}
</span>
`
x++
addText();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title></title>
</head>
<body class="background-image">
<h1 class="pageheader">My Task Board</h1>
<form class="" action="index.html" method="post">
<div class="container">
<div class="row">
<input type="text" class="form-control col-sm centerInput" id="task" placeholder="Enter a Task">
<input type="date" class="form-control col-sm centerInput" id="date" value="">
</div>
<div class="form-group">
<input type="button" class="form-control btn btn-success" id="submit" value="Submit Task" onclick="saveToLocalStorage()">
</div>
<div class="form-group">
<input type="reset" class="form-control btn btn-success " id="reset" value="Reset Form">
</div>
</div>
</form>
<div class="imgContainer" id="maindiv">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<!-- load the script at the end of body tag -->
</body>
</html>
Any help would be greatly appreciated, cheers!
Try putting index instead of x in your loop.
for (let index = 0; index < arrayFromStorage.length; index++) {
mainDiv.innerHTML +=
`
<span class="relative">
<img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
<span class="centerOnNote" id="textspan">
Your task = ${arrayFromStorage[index].name}
Complete by = ${arrayFromStorage[index].date}
</span>
`
}
Hello I have this code using javascript & html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Signup Form</title>
<!-- css -->
<link rel="stylesheet" href="style.css">
<style>
.box {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- js -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="hero is-fullheight is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-centered">Test</h1>
<div class="box">
<!-- our signup form ===================== -->
<form id="signup-form" #submit.prevent="processForm">
<!-- name -->
<div class="field">
<label class="label">Username</label>
<input
type="text"
class="input"
name="name"
v-model="name">
</div>
<!-- email -->
<div class="field">
<label class="label">Password</label>
<input
type="password"
class="input"
name="email"
v-model="email"
#blur="validateEmail">
<p class="help is-danger" v-if="errors.email">
Please enter a valid email.
</p>
</div>
<!-- submit button -->
<div class="field has-text-right">
<button type="submit" class="button is-danger">
Log In
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#signup-form',
data: {
name: '',
email: '',
errors: {
name: false,
email: false
}
},
methods: {
processForm: function() {
console.log({ name: this.name, email: this.email });
onclick="test.html";
},
validateEmail: function() {
const isValid = window.isValidEmail(this.email);
this.errors.email = !isValid;
}
}
});
function isValidEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>
</body>
</html>
And I would want that when I click on the button I can go to the page by the name of test.html I tried to use href = "test.html but it does not work. I think I have to write it in Javascrit but even using action = "test.html" it does not work...
Could you help me please ?
Thank you very much!
It seems like what you're trying to do is redirect to a new page. Try:
window.location = "test.html";
instead of:
onclick="test.html";
to my knowledge, all onclick="test.html" does is create a variable "onclick" with the string value "test.html". Setting window.location with the URL you would like to redirect to will navigate the user to that URL. More on window.location here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I have two inputs on my form whose value I would like to change when the document has loaded.
This is my code:
<?php
$base = dirname(dirname(__FILE__));
include($base."/include/db.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eMail Stationery | Installation for iPhone/iPad</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../css/plugins/steps/jquery.steps.2.css" rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="">
<center>
<img src="../img/esignia.png">
<h3>iPhone/iPad Installation</h3>
<p>Follow the steps provided to install your signature</p>
</center>
</div>
<div id="wizard">
<h3>Enter your details</h3>
<section>
<center>
<div class="row"></div>
<p><h2>Enter your details</h2></p>
<p>Enter your email address and unique pin number into the fields below to receive an email with a link to your signature.</p>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<form id="submitForm" method="post">
<center>
<div class="form-group">
<input id="email" name="email" type="email" placeholder="Email address" class="form-control" required>
</div>
<div class="form-group">
<input id="pin" name="pin" type="number" placeholder="Unique PIN" class="form-control" required>
</div>
<button class="btn btn-success">Submit</button>
<p>
</p>
</center>
</form>
</div>
</div>
</center>
</section>
<h3>Copying your signature</h3>
<section>
<center>
<p><h2>Copying your signature</h2></p>
<p>Once you have followed the link we provided in the email, you will see your signature displayed fully on your device's web browser.</p>
<p>Simply highlight all of your signature and copy it to your device's clipboard as demonstrated below.</p>
<p><img src="../img/install/iphone_2.png" width="320px" height="480px"></p>
</center>
</section>
<h3>Locating your signature settings</h3>
<section>
<center>
<p><h2>Locating your signature settings</h2></p>
<p>Great! We've copied your signature and it is now ready to be installed!</p>
<p>We just need to find your mail's signature settings.</p>
<p>These are located at <b>Settings -> Mail, Contacts, Calendars -> Signature</b>
<p><img src="../img/install/iphone_3.png" width="320px" height="480px">
<img src="../img/install/iphone_4.png" width="320px" height="480px"></p>
</center>
</section>
<h3>Installing your signature</h3>
<section>
<center>
<p><h2>Installing your signature</h2></p>
<p>Now that we have your signature settings open, you'll find an empty box ready for your signature to be pasted.</p>
<p>So all you need to do now is paste what we copied earlier into the box.</p>
<p><img src="../img/install/iphone_5.png" width="320px" height="480px"></p>
<p>One final thing you'll need to do is give your phone a quick shake to undo any of the modifications that your device will attempt to make to your signature's HTML code.</p>
<p>This is necessary for your signature to appear <i>exactly</i> how it appeared when you opened it.</p>
<p><img src="../img/install/iphone.gif"></p>
<p class="text-navy"><b>Congratulations, you've now successfully installed your signature to your device!</b></p>
</center>
</section>
</div>
</div>
</div>
<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/steps/jquery.steps.js"></script>
<script>
$(document).ready(function() {
var email = getUrlParameter("email");
var pin = getUrlParameter("pin");
if(email != undefined && pin != undefined) {
$("#email").val(email);
$("#pin").val(pin);
}
$("#wizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
$("#submitForm").submit(function() {
var email = $("input[name='email']").val();
var pin = $("input[name='pin']").val();
$.get("../api/installed.php", {
email: email,
pin: pin
});
});
$("a[href='#finish'").click(function() {
window.location.href = "index.php";
});
});
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
</script>
</body>
</html>
This does not work.
However, I replicate the same code in chrome's console and it works perfectly. My only assumption is that these controls are being messed with and/or recreated with Bootstrap/jQuery after the document has been loaded.
But I can't figure out where or why, or what I should do.
This might because of DOM not ready, try using below code
$(window).load(function() {
var email = getUrlParameter("email");
var pin = getUrlParameter("pin");
if(email != undefined && pin != undefined) {
$("#email").val(email);
$("#pin").val(pin);
}
}
If still not work try to change your Ids of element to check weather its conflict with other element or not
I am new to Angular.js and i did the tutorial Shaping up with angularjs in codeschool.com so please forgive me if the problem i am trying to solve might be too easy to resolve.
So, i am just trying to show a data i get from $http.get() which is JSON object into my document.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>League of legends</title>
<!-- Load StyleSheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Load Javascript Libraries -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="LeagueOfLegends">
<!-- Navbar menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-controller="searchSummoner as summoner">
<!-- Search Form -->
<div ng-show="summoner.status.showSearch">
<form ng-submit="summoner.search()">
<div class="well">
<div class="form-group">
<label for="summonerName">Summoner Name</label>
<input type="text" class="form-control" placeholder="Enter Summoner Name" id="summonerName" ng-model="summoner.form.name">
</div>
<div class="form-group">
<label ng-repeat="region in summoner.region">
<input type="radio" ng-model="summoner.form.region" ng-value="region">{{region}}
</label>
</div>
<input type="submit" class="btn btn-default" value="Search"></input>
</div>
</form>
</div>
<p ng-show="summoner.status.showResult">Get request from: {{summoner.data.name}}</p>
</div>
</div>
</body>
app.js (module-controller):
var app = angular.module('LeagueOfLegends', []);
app.controller('searchSummoner', ['$http', function($http)
{
var form = {};
this.data = {};
this.form = {};
this.status = {
showSearch: true,
showResult: false
};
this.region = ['br', 'eune', 'euw', 'lan', 'las', 'na', 'oce', 'kr', 'tr'];
this.search = function()
{
form = this.form;
this.form = {};
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
});
// hide form
this.status.showSearch = false;
this.status.showResult = true;
};
}]);
function getApiUrl(form)
{
var apiKey = 'fe9eb24f-5800-4f2a-b570-15328062b341';
return 'https://lan.api.pvp.net/api/lol/' + form.region + '/v1.4/summoner/by-name/' + form.name + '?api_key=fe9eb24f-5800-4f2a-b570-15328062b341'
}
after $http.get was successfully made, i make a log just to check if the data i retrieve is the one i need, but it does not show the object property in html
You're using this in the wrong closure. This is what you should do :
var that = this;//give controller scope access
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
that.data = data[form.name];
console.log(that.data);
});
You could also bind your context like this:
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
}.bind(this));
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind