How to connect to existing sqlite database in phonegap - phonegap-build

I use phonegap for create an android application.
I did these steps :
1. Wrote html, css and jquery mobile codes.
2. Include phonegap.js into .
3. Create the database via sqlite manager firefox extension and copy to root the project directory (beside index.html).
4. use this code:
<script>
$(function() {
onDeviceReady();
queryDB();
$("#links").niceScroll();
});
</script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
var db = window.openDatabase("shia.sqlite", "1.0", "shia", 100000);
}
function queryDB(tx) {
tx.executeSql('SELECT * FROM posts', [], querySuccess, errorCB);
}
function querySuccess(tx, results) {
console.log("Returned rows = " + results.rows.length);
// this will be true since it was a select statement and so rowsAffected was 0
if (!results.rowsAffected) {
console.log('No rows affected!');
return false;
}
// for an insert statement, this property will return the ID of the last inserted row
console.log("Last inserted row ID = " + results.insertId);
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
</script>
This error displayed into console :
Uncaught TypeError: Cannot read property 'executeSql' of undefined
Please help me .

#Behzad,
your code has the function
function queryDB(tx) {
tx.executeSql('SELECT * FROM posts', [], querySuccess, errorCB);
}
However, when you call queryDB, you did not pass the handle. So in this function the parameter tx is null because you did not pass the handle.

Related

Cannot using (id) that selected from (select option) and put it into my list object to find price?

i am work on laravel framework i want to get price by selected option , in the script i get (id) but i cannot use this (id) in to my object to get the price.
<script>
$(document).ready(function() {
$('select[name="surgSelect"]').on('change', function() {
var id=document.getElementById("surgSelect").value;
var price={{$list->where('sdf_id',id)->pluck('price')->first()}}
document.getElementById("price").value = price;
});
});
</script>
Error Exception
"Use of undefined constant id - assumed 'id' (this will throw an Error in a future version of PHP)
What you're trying to achieve is not possible because the PHP code is outputted to the HTML on the server side way before the idĀ from your javascript becomes available so what you need to do is to send an Ajax request to get the price like so
$(document).ready(function() {
$('select[name="surgSelect"]').on('change', function() {
var id = document.getElementById("surgSelect").value;
$.post('/getPrice', {id: id})
.done(function(response) {
document.getElementById("price").value = response;
});
});
});
And in the Backend (for example routes\web.php)
Route::post('getPrice', function() {
return $list->where('sdf_id', request('id'))->pluck('price')->first();
});

How to add live search function into Laravel

I have Japan postal zip code live search function. It works at my xampp. I tried to add this into Laravel app but the search doesn't work.
Here is my whole code which works at XAMPP.
https://jsfiddle.net/blueink/rnsftzg8/
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
$('#postcode').jpostal({
postcode : [
'#postcode1'
],
address : {
'#address1' : '%3',
'#address2' : '%4',
'#address3' : '%5',
'#address1_kana' : '%8',
'#address2_kana' : '%9',
'#address3_kana' : '%10'
},
trigger : {
'#address1_kana' : true,
'#address2_kana' : true,
'#address3_kana' : false
}
});
$("#address1_kana").on("change", function() {
var val = $("#address1_kana").val();
val = "onchange_" + val;
$("#address1_kana_onchange").val(val);
});
$("#address2_kana").on("change", function() {
var val = $("#address2_kana").val();
val = "onchange_" + val;
$("#address2_kana_onchange").val(val);
});
$("#address3_kana").on("change", function() {
var val = $("#address3_kana").val();
val = "onchange_" + val;
$("#address3_kana_onchange").val(val);
});
});
</script>
What I tried is ...
First I save all js into public/js folder but it didn't work. So
I simple save js file app.blade.php which is header.
Then I save html code into index.blade.php.
I'm wondering why it works at xampp only?
Could you teach me what I missing please?
You can do it like so (depending on your Laravel version, mine is 5.7) :
First, create a route in the "routes" folder like this :
Route::get('test', 'TestController#test')->name('test');
You will be able to access to this road in the /test URL.
In your TestController.php file (usually in app/Http/Controllers), create a method :
public function test(){
return view('test');
}
Then, in resources/views, create a file named test.blade.php
In this file, put the HTML part of this fiddle:
https://jsfiddle.net/dayLkp4s/
After that, you can split header, footer, scripts parts in other files to use them elsewhere.
Useful resources
https://laravel.com/docs/5.7/blade

how to select all records in the grid in order to export the data

I am trying to select all the data present in the jqgrid table in order to export in to an excel file. But the data present in the first page of the grid is only getting exported. i.e., if a total of 25 records are present in the grid and 5 records are present in the first page, then only first 5 records are getting exported.
The following code is responsible for displaying records 'only' in the first page of the grid..
var gridData = $("#list").jqGrid('getRowData');
The following code is responsible for displaying records present in all the pages in the grid..
var gridData1 =jQuery("#list").jqGrid('getGridParam','data');
how to use the above code such that I can select all the records present in the grid. also, I am trying to apply filter on the records present in the grid. In such a case, how to get the filtered number of records in order to export them..?
Thanks,
You can do it server side.
<script type="text/javascript">
$(document).ready(function () {
$('#list').jqGrid({
caption: "test",
// ...
}).navGrid(
// ...
}).jqGrid('navButtonAdd', '#pager', {
caption: "", buttonicon: "ui-icon-print", title: "export",
onClickButton: function () {
$("#list").jqGrid('excelExport', { url: 'path......' });
}
});
});
</script>
excelExport method, sends the current page number, sort field, filtering, etc to the specified url. now you have time to process these parameters and create a new output.
You may want to try below script and function:
<script type='text/javascript'>
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.outerHTML }
window.location.href = uri + base64(format(template, ctx))
}
})();
$(document).ready(function () {
...declare & setup the jqGrid with 'big row page', e.g. ...
rowNum: 9999,
rowList: [50, 100, 200, 9999],
.........then add below navigation button after setup the grid...
$("#list").jqGrid('navButtonAdd', pgrid1, {caption:"Download",title:"Download report contents", buttonicon :'ui-icon-circle-arrow-s',
onClickButton:function(){
tableToExcel('list', 'export data')
}
});
}
</script>
Alternatively, another way to exporting can refer to related question:
How to enable jQgrid to Export data into PDF/Excel

ajax function database update not working

The following function is not working. Database is updated when sending data directly to php script using form action but when sent to php script through AJAX function the database is not updated but I receive success message.
the ajax
<script src="ajax.min.js" type="text/javascript"></script>
<script type="text/javascript">
function addRecord()
{
var first_first_name= $('#first_firstname').val();
var first_last_name = $('#first_lastname').val();
var team_name = $('#team_name').val();
if(team_name == ' '){
$('#propspectDiv').html('Enter A Valid Name');
$('#TeamName').addClass('error');
return;
}else{
$('#TeamName').removeClass('error');
$('#propspectDiv').removeClass('error');
$('#propspectDiv').html('Entering Team Name.<img src="images/processing.gif" />');
$.ajax({url : 'rpmh_open_update_prospects.php',
data:{
"team_name" : team_name,
"first_firstname" : first_first_name,
"first_lastname" : first_last_name,
},
success : function(data){
window.setTimeout(function()
{
$('#propspectDiv').html('Team Name Added!');
$('#data').css("display","block");
$('#data').html(data);
}, 2000);
}
});
}
}
</script>
The php
$stmt = $mysqli->prepare("UPDATE mytable SET Team=? WHERE FirstName = ? AND LastName = ?");
$stmt->bind_param('sss', $team, $first, $last);
$team = $_POST['team_name'];
$first = $_POST['first_firstname'];
$last = $_POST['first_lastname'];
/* execute prepared statement */
$stmt->execute();
/* close statement and connection */
$stmt->close();
Isn't GET the default type of your .ajax method ?
Since you use POST you should precise it if it's the case.
In JQuery you would add type: 'POST'

Load JavaScript when partial is called via ColorBox?

It seems when loading a Razor partial view via ColorBox (not using an iframe), the JavaScript libraries do not initialize properly or it is an artifacte of the partial. If I include the libraries in the parent page, the JavaScript function runs inside the partial jsut fine. I don't see any errors coming from the browser when the library is in the partial, but it is not working. If I move the library (in this case fileuploader.js) outside of the partial and keep the function in the partial it works fine.
Example:
<script src="#Url.ContentArea("~/Scripts/plugins/ajaxUpload/fileuploader.js")" type="text/javascript"></script>
<div id="file-uploader">
<noscript>
<p>
Please enable JavaScript to use file uploader.</p>
</noscript>
</div>
<script>
$(function () {
var fileCount = 0;
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/Admin/Avatar/AvatarUpload',
debug: true,
params: {
'userId': '#ViewBag.UserId'
},
onSubmit: function (id, fileName) {
fileCount++;
},
onComplete: function (id, fileName, responseJson) {
if (responseJson.success) {
if (createAvatar(responseJson.file, responseJson.imageId)) {
fileCount--;
} else {
fileCount--;
}
} else {
$("span.qq-upload-file:contains(" + fileName + ")").text(responseJson.errorMessage);
fileCount--;
}
if (fileCount == 0) {
.....
}
},
onCancel: function (id, fileName) {
fileCount--;
if (fileCount == 0) {
....
}
}
});
});
<script>
You may want to check whether there are duplicate references to the JavaScript libraries you are using (one in the parent and one in the partial).
This is a common issue and it will not raise any errors whatsoever, but will stop your JavaScript code from executing.
I think this is a time line problem.Before the "Partial View" load(or appending the div) JavaScript try to bind it and fail.So it cannot find a element which is in your Partial View document.I had a problem with like this with "ColorBox".I have found a solution for this problem.For example : When you call GET or POST method ,after the query put a control point like this .For example for binding "colorbox" :
function getMyPartial(partialname) {
var resultDiv = document.getElementById("content");
$.ajax({
type: "GET",
url: partialname,
async: false,
success: function (data) {
resultDiv.innerHTML = "";
resultDiv.innerHTML = data.toString();
}
});
var indd = 0; //This is Control Point
if (partialname == "YourPartialName") {
var yourelementinpartial= document.getElementById("example");
while (!yourelementinpartial) {
indd++;
}
$(".group4").colorbox({ rel: 'group4' }); //binding point
}
}
At the control point, if any of the element in your PartialView document has found it will bind.

Resources