I am trying to crate an application with phonegap. In this code the 'window.location.href..' works very fine in browsers. But in the apk, I'll created with phonegap it doesn't work.
For testing i created one seperate js funktion, it will be triggered by an onclick on the button.
But this also do not work.
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
if (!(localStorage.getItem('session_id') && localStorage.getItem('user_id'))) {
window.location.href="login.html";
}
function test() {
window.location.href="menu.html";
}
function (){
$.ajax ({
url:'http://marcelkipp.com/quizapp/userinfo.php?user_id='+localStorage.getItem('user_id'),
dataType: 'json',
type: 'get',
cache: false,
success:function(data) {
console.log('JSON erfolgreich ausgelesen!');
var category = data.category_title;
if (category==null) category = "Keine Kategorie gewählt";
localStorage.setItem('username', data.username);
localStorage.setItem('role', data.role);
localStorage.setItem('points', data.points);
localStorage.setItem('total_questions',data.number_pq);
localStorage.setItem('category_title',data.category_title);
window.location.href="menu.html";
}
error:function(data) {
console.log('json failed');
}
});
}
</script>
</head>
<body>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<button onclick="test()">woohoo</button>
<div style="margin:0px auto;text-align:center;color:#ffffff;">loading userdata</div>
</body>
Try
window.location.replace("menu.html");
Related
I want a user to fill in a website url and when clicking on the submit button I want a ajax request to fire and show the response on the same page in <div id="test"></div> but when I fill in the input field and click submit nothing shows. But if I check the console I see the ajax page getting requested.
Here is pagespeed.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<form method="post">
<input type="text" id="website" name="website">
<button id="button_1" value="val_1" name="but1">button 1</button>
</form>
<script>
$("button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/lighthouse.php",
data: {
email: $('#website').val() // < note use of 'this' here
},
success: function(result) {
$('#test').html(data);
},
error: function(result) {
alert('error');
}
});
});
</script>
<div id="test">
</div>
And here is lighthouse.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// INTRODUCTION RIGHT
$("#test").text("Let's get in touch");
});
</script>
So the jQuery function is not showing on the pagespeed.html page because the <div id="test"></div> keeps empty.
Thanks for your time!
You need to change from
$('#test').html(data);
to
$('#test').html(result);
because
Basically i find code on the internet to test and use it.
the problem is that when i reload the page, the data disappears.
what i want to happen is for the data or the value to just stay.
Thanks guys
Here is the code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" class="btn btn-success" onclick="passData();" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function passData() {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function(data) {
$("#message").html(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}
</script>
</html>
and here is my php code
<?php
$pass=$_POST['pass'];
echo json_encode($pass);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" id="success" class="btn btn-success" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#success").click(function () {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function (data) {
$("#message").html(data);
localStorage.setItem("data",data);
},
error: function (err) {
alert(err);
}
});
}
return false;
})
$(document).ready(function () {
var someVarName = localStorage.getItem("data");
console.log(someVarName)
$("#message").html(someVarName);
});
</script>
</html>
First of all i changed your js code to use more jquery syntax, as you already have included it (i trigger the on click event on the script and i don't put it in in html). After that in order not to lose your variable after refresh on ajax success i pass the value of data to localstorage, and after refresh (on document ready) i retrieve it and display it in the label.
Of course every time you put a new value and display it, it over-writes the previous one, so after refresh you display the latest value put in your input field.
I am not sure I understand what you mean but...
Before this line:
<!DOCTYPE html>
enter
<?php session_start(); ?>
In this line add
<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">
and in your php file:
<?php session_start();
$pass=$_POST['pass'];
$_SESSION['VAL'] = $pass;
echo json_encode($pass);
?>
My html page nextPage.html. Here I am trying to post 'category-id' $ 'category_name' into a list, but I can't. Below are my code portions:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<body>
<center>
<div id="report" data-role="page">
<div id="loading" > </div>
<div data-role="main" class="ui-content">
<!-- <div data-role="content"> -->
<form id="nextForm" method="post">
<ul data-role="listview" data-inset="true" id="category">
</ul>
</div>
<!--<input type="submit" value="get" id="submitButton"> -->
</form>
</div>
</div>
</center>
</body>
</html>
Here is my js page nextPage.js
var serviceURL = base_url;
$(document).on("pageinit","#report", function() {
$("#loading").css("display", "block");
var form = $("#nextForm");
var $categorylist= $('#category');
var submitUrl = serviceURL+"categorylist/get_categorylist";
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response) {
alert("ok");
},
error: function() {
alert("error")
}
});
});
My controller is categorylist.php
public function get_categorylist()
{
$cat=$this->categorylist_model->get_cat();
echo json_encode($cat);
}
Model is categorylist_model.php
public function get_cat()
{
$this->db->select('category_id,category_name');
$this->db->from('amm_report_category');
$query = $this->db->get();
return $query->result_array();
}
I downloaded handlebars from GitHub
and it contained handlebars.js and plugin.js in the source folder.As for told in the documentation the way to use the render function to fetch template from a file is as follow:
$.handlebars({
templatePath: 'path/to/templates',
templateExtension: 'hbs'
});
// now this will fetch <path/to/templates/content.hbs>
$('#some-element').render('content', {
// ...
});
and what i did did to use it is:
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>
$.handlebars({
templatePath: 'lib/assets',
templateExtension: 'html'
});
var data = {"username":uname};
$('.container').render('lockscreen', data);
lib/assets/lockscreen.html contains code like this:
<div class="center">
<div class="headline text-center" id="time"></div>
<div class="lockscreen-name" style="font-weight:600;font-size:16px;"><b>{{username}}</b></div>
<div class="lockscreen-item">
<div class="lockscreen-image"><img src="images/avatar5.png" alt="user image"/></div>
<div class="lockscreen-credentials">
<div class="input-group">
<input type="password" class="form-control" placeholder="password" id="pa_asd"/>
<div class="input-group-btn">
<button class="btn btn-flat"><i class="fa fa-arrow-right text-muted"></i></button>
</div>
</div>
</div>
</div>
<div class="lockscreen-link">Or sign in as a different user</div>
</div>
And I still can't get it done.I tried it using otherway...using a static function created by koorchik
function render(tmpl_name, tmpl_data) {
if ( !render.tmpl_cache ) {
render.tmpl_cache = {};
}
if ( ! render.tmpl_cache[tmpl_name] ) {
var tmpl_dir = '/lib/assets';
var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
var tmpl_string;
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType: 'html',
success: function(data) {
tmpl_string = data;
}
});
render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
}
return render.tmpl_cache[tmpl_name](tmpl_data);
}
var rendered_html = render('lockscreen', data);
but got some sort of error like
_ is undefined
Can anybody help me????
That's because your code uses underscore.js, which is an external utility library, and _.template() is actually a function from that library. Your code doesn't find it because you haven't included the underscore.js script.
Here is a link to the latest minified version of underscore.js: http://underscorejs.org/underscore-min.js
You should include it before loading your resources, like this:
<script src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>
I'm reading a tutorial and I'm having some problems with the examples... I tried to run the examples but i dont have results:
app.html
<!DOCTYPE HTML>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/
jquery.min.js"></script>
<script>
function readSinglePost (url,target_div) {
var URL = url
jQuery.ajax({
url: URL,
dataType: 'json',
success: function(data) {
jQuery(target_div).html(data.post.content);
}
});
}
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
var url = "http://www.recorramisiones.com.ar/api/get_post/? json=get_post&dev=1&p=934";
var target_div = "#contents";
readSinglePost(url, target_div);
});
</script>
</header>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html>
if you try to test this url: http://www.recorramisiones.com.ar/api/get_post/? json=get_post&dev=1&p=934
works fine. But when i test app.html just appear "Hello World" and nothing more. Any idea?
Try add contents id like this to the html:
<div id="contents"></div>
</div>