Can't handle input "change" event or value after document load - javascript

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

Related

Page reloads after uploading a file using ajax

I am using ajax to upload a file to the server and generate a url for a specific purpose. But whenever the file upload is successful, the page reloads automatically. Even the console shows "File uploaded" for a second and then reloads. Can someone help me sort this problem.
Here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut ico n" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InShare - File Sharing Made Easy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="./logo.png" alt="Inshare logo" class="logo">
<section class="upload-container">
<form action="">
<div class="drop-zone">
<div class="icon-container">
<img src="file.svg" draggable="false" class="center" alt="File Icon">
<img src="file.svg" draggable="false" class="left" alt="File Icon">
<img src="file.svg" draggable="false" class="right" alt="File Icon">
</div>
<input type="file" id="fileInput">
<div class="title">Drop your Files here or, <span id="browseBtn">browse</span></div>
</div>
</form>
<div class="progress-container">
<div class="bg-progress"></div>
<div class="inner-container">
<div class="status">Uploading...</div>
<div class="percent-container">
<span class="percentage" id="progressPercent">0</span>%
</div>
<div class="progress-bar"></div>
</div>
</div>
<div class="sharing-container">
<p class="expire">Link expires in 24 hrs</p>
<div class="input-container">
<input type="text" id="fileURL" readonly>
<img src="./copy-icon.svg" id="copyURLBtn" alt="copy to clipboard icon">
</div>
<p class="email-info">Or Send via Email</p>
<div class="email-container">
<form id="emailForm">
<div class="filed">
<label for="fromEmail">Your email</label>
<input type="email" autocomplete="email" required name="from-email" id="fromEmail">
</div>
<div class="filed">
<label for="toEmail">Receiver's email</label>
<input type="email" required autocomplete="receiver" name="to-email" id="toEmail">
</div>
<div class="send-btn-container">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</section>
<div class="image-vector"></div>
<div class="toast">Sample message</div>
<script src="index.js"></script>
</body>
</html>
Here is the ajax section of javascript code:
const uploadFile = () => {
console.log("file added uploading");
files = fileInput.files;
const formData = new FormData();
formData.append("myfile", files[0]);
//show the uploader
progressContainer.style.display = "block";
// upload file
const xhr = new XMLHttpRequest();
xhr.open("POST", uploadURL);
xhr.send(formData);
// listen for response which will give the link
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
onFileUploadSuccess(xhr.responseText);
}
};
};
const onFileUploadSuccess = (res) => {
fileInput.value = ""; // reset the input
console.log("Uploaded");
// remove the disabled attribute from form btn & make text send
emailForm[2].removeAttribute("disabled");
emailForm[2].innerText = "Send";
progressContainer.style.display = "none"; // hide the box
const { file: url } = JSON.parse(res);
console.log(url);
sharingContainer.style.display = "block";
fileURL.value = url;
};
Even e.preventDefault() has been used to prevent page reload. But still it does. Can someone help me solve this. Thank you in advance..

Uncaught TypeError: Cannot read properties of null (reading 'vlaue')

A few days ago, I started studying DOM and I tried to clone the code the Instagram for practicing. At this moment, I got this error message "Uncaught TypeError: Cannot read properties of null (reading 'vlaue')" This is my DOM(JS file)
const id = document.getElementById('text')
const password = document.getElementById('password')
document.addEventListener('keyup', function(e) {
if(!id.value && !password.value){
let color = document.querySelector('login-btn');
color.style.backgroundColor = "#FF0000";
}
});
and this is my index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
I tried const id = blabla.value
password = blabla.value
Also, I tried using "querySelctor" all of them but still have same issue. Could you help me out this error? I really appreciate it! I struggling with this whole day...
Thank you for helping me out in advance.
I've added an else block, hope you won't mind, it's meant to make the difference. If you are using querySelector you must add the . class symbol, before login-btn like that .login-btn Additionally - you do not close the body tag.
If you set JavaScript in the head tag, you need to use the script tag for that, not link tag. For example, like <script src = "script.js" defer> </script>
Now It's should works fine, Best regards !
const id = document.getElementById("text");
const password = document.getElementById("password");
document.addEventListener("keydown", function (e) {
if (!id.value && !password.value) {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#FF0000";
} else {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#008000";
}
});
<body>
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<div class="login-container">
<div class="id">
<input
type="text"
id="text"
placeholder="Phone number, username, or email"
/>
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password" />
</div>
<div class="bt">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</body>
you should use identifiers when querySelector is in your code so:
let color = document.querySelector('.login-btn');

How to go to a link with using Javascript?

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

How to stop reload of page after submit

I have a page with a form that is being used to ask a question. When the submit button is clicked, it does the follow, determines if the user checked the right box, displays the answer and explanation, and disables the checkboxes and submit button to prevent re-answering the question.
My issue is that when the user clicks the submit button the answers, and the disabling appear for only a split second before the page reloads. How do I stop this, I want the user to see if they are correct and not be able to change their answers. When I run it in Dreamweaver where I am building the pages, it runs fine in live view.
Code is below:
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"
rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="../styles/casestyles.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<!-- show all on submit and show checked answer -->
<script type="text/javascript" src="../js/submit_answers.js"> </script>
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="../js/fancybox.js"></script>
<script type="text/javascript">
/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" diagnosis")
this.checked=false
}
}
}
}
</script>
<!-- disable checkboxes -->
<script type="text/javascript">
function disablefields(){
{
document.getElementById('check1').disabled='disabled';
document.getElementById('check2').disabled='disabled';
document.getElementById('check3').disabled='disabled';
document.getElementById('check4').disabled='disabled';
document.getElementById('ex3').disabled='disabled';
document.getElementById('ex3').value='Answers Submitted'; }
}
</script>
</head>
<script type="text/javascript">
function myfunction(){
//call disable checkbox
disabled(document);
//call disable submit
checkForm(form) ;
}
</script>
.explanation {
display: none;
}
.correct {
display:none;
}
.incorrect {
display:none;
}.explanation {
display: none;
}
.correct {
display:none;
}
.incorrect {
display:none;
}
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<ul class="nav nav-pills nav-stacked">
<li>History of Present Illness </li>
<li>Review of Systems </li>
<li>Past Medical History </li>
<li>Physical Examination </li>
<li>Essential Differential Diagnosis</li>
<li>Relevant Testing</li>
<li>Diagnosis</li>
<li>Treatment</li>
<li>Questions</li>
<li>About the Case</li>
</ul>
</div>
</div>
<form name="limit" onreset="disablefields();" onSubmit="disablefields();" >
<div id="main" class="container-fluid">
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"> <i class="glyphicon glyphicon-chevron-left"></i> </button>
</p>
<!-- Footer Code -->
<div id="footer" style="overflow-y:hidden; overflow-x:hidden;">
<div class="container" style="overflow-y:hidden; overflow-x:hidden;">
<p class="muted credit"><img src="img/prev.png" width="24" height="21" / > <a href="relevant_testing.html" > Relevant Testing </a> | <a href="treatment.html" > Treatment </a><img src="img/next.png" width="24" height="21" />
</div>
</div>
<!-- Change the Heading -->
<h3>Diagnosis</h3>
<h5>At this time, the most likely diagnosis is</h5>
<p>Please choose only one.</p>
<!-- First Column-->
<div class="col-md-3">
<div class="bootstrap-demo">
<!-- content goes here -->
<p style="margin-bottom:0px">
<input id="check1" name="field" type="checkbox" value="incorrect" />
Acute bronchitis</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">Although the patient has a productive cough, he also has an infiltrate on chest x-ray.</div>
<p style="margin-bottom:0px">
<input id="check2" name="field" type="checkbox" value="correct" />
Community-acquired pneumonia</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">The chest x-ray shows a definite infiltrate.</div>
<p style="margin-bottom:0px">
<input id="check3" name="field" type="checkbox" value="incorrect" />
Health-care associated pneumonia</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">The patient was not a resident in a nursing home or other long-term care facility.</div>
<p style="margin-bottom:0px">
<input id="check4" name="field" type="checkbox" value="incorrect" />
Lung cancer</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">Although an obstructing cancer may cause an infiltrate, it is not the most likely cause of this patient’s acute symptoms.</div>
<p> <br />
<input type="submit" value="Submit" id="ex3" onclick="show_all();" >
</p>
</div>
</div>
<!-- Second Column -->
<div class="col-md-3">
<div class="bootstrap-demo">
<!-- content goes here -->
<p>Click <a class="fancybox fancybox.iframe" href="relevant_testing_all.html">here</a> to see the tests and explanations for this diagnosis</p>
</div>
</div>
<div class="col-md-3"> <img src="../img/patient-001.png" width="231" height="184" alt="Patient 001" /></div>
</div>
</div>
</form>
</div>
<!-- Bootstrap script -->
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lightbox/js/lightbox.min.js"></script>
<link href="../lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
<script type="text/javascript">
var one="";
var two="";
function check(browser)
{
//document.getElementById("answer").value = browser
one = browser
updateIt()
}
function check1(browser)
{
//document.getElementById("answer").value += " " + browser
two = browser
updateIt()
}
function updateIt()
{
document.getElementById("answer").value = one +" "+ two
}
</script>
<!--Script to call limit checkbox code-->
<script type="text/javascript">
//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.limit.field, 1)
</script>
As of right now your code is not "determining if the user checked the right box, displaying the answer and explanation" as you explained but that is OK and easy to implement after. Here is the answer to your question.
You should replace your id="ex3" button with the anchor tag code provided below (anchor tag is for simplicity but you can use another element to call the function with a click event). Either way, you do not need to submit a form as you are not posting information according to your requested behavior.
<a id="ex3" href="javascript:disablefields()">submit</a>
Update your function with this:
function disablefields() {
{
document.getElementById('check1').disabled = 'disabled';
document.getElementById('check2').disabled = 'disabled';
document.getElementById('check3').disabled = 'disabled';
document.getElementById('check4').disabled = 'disabled';
document.getElementById('ex3').disabled = 'disabled';
document.getElementById('ex3').innerHTML = 'Answers Submitted';
}
}
You will then get the exact behavior requested in your question minus the validation process that you described. It is easy to add that to this solution with a conditional statement or calling a validation function and then if valid calling the disablefields function.
function formVal() {
{
//put all of your validation requirements here and see if
var isValid = [check form function here]
if(isValid){
disablefields();
}else {
//send a message to user to correct fields and do not disable
}
<a id="ex3" href="javascript:formVal()">submit</a>
If you do choose to submit the information to the server at some later date simply make an AJAX call sending the form information after your disablefields call.
Fixed it by calling both function from the onClick and changing the type to button.
<input type="button" value="Submit" id="ex3" onclick="show_all(); disablefields();" >

window.location.hash always shows empty

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 ?

Categories