So am experimenting with Webix and so far I like it. Am playing around with the mobile calendar/scheduler and am getting stuck with saving new events into mysql database. I have followed the tutorials and docs about saving data to the database and indeed I am able to save new events. Problem is that it is saving the new events twice, and I have failed to figure out why. Here is the code:
webix.ready(function(){
webix.ui.fullScreen();
webix.ui({
rows:[
{
view: "toolbar", id:"toolbar", elements:[
{
view: "icon", icon: "bars",
click: function(){
if( $$("menu").config.hidden){
$$("menu").show();
}
else
$$("menu").hide();
}
},
{
view: "label",
label: "JPlan"
}
]
},
{
view: "scheduler",
id: "scheduler",
url: "data/getEvents.php",
save:{
"insert":"data/saveEvents.php",
"update":"data/update.php",
"delete":"data/delete.php"
}
}
]
});
});
And the php code to save the new events:
<?php
include('mysql.class.php');
$db = new MySQL();
$values = array();
$now = time();
$values["eventTitle"] = MySQL::SQLValue($_POST['text']);
$values["eventJudge"] = MySQL::SQLValue($_POST['judge']);
$values["eventStart"] = MySQL::SQLValue($_POST['start_date']);
$values["eventEnd"] = MySQL::SQLValue($_POST['end_date']);
$values["eventNotes"] = MySQL::SQLValue($_POST['details']);
$values["eventAddedTime"] = MySQL::SQLValue($now);
$values["eventAddedBy"] = MySQL::SQLValue('');
// Execute the insert
$result = $db->InsertRow("tbl_events", $values);
?>
The app loads all events from the database well. It is just that when I save a new event, it saves the evet twice in the database. I have not yet worked on the update and delete code.
Any help?
Client side code expects some valid JSON response from a server-side, as confirmation that the save operation was successful. Otherwise, a client-side code may make another attempt to save a data.
$result = $db->InsertRow("tbl_events", $values);
$id = get_id_of_new_record();
echo "{ id: $id }";
Related
I'm trying to build a webapp that will work offline.
I found JS Service worker and i have now implemented it in my app to store some static pages.
Now i'd like to build a HTML FORM where the user fills in stuff that will be saved to the cache if the user is offline.. but directly sends to mysql when the user is online.
It will be like a list with querys that will execute when user comes online.
How can i save a query string to the cache, and then check if online and send it with Ajax? to php and mySQL.
First off, how do i save a query string to the cache?
Second.. how do i find out when online and then fetch the query string from the cache?
This is what i got to cache my pages:
importScripts('cache-polyfill.js');
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('offlineList').then(function(cache) {
return cache.addAll([
'/app/offline_content/'
]);
})
);
});
self.addEventListener('fetch', function(event) {
console.log(event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
EDIT
I'm now reading up on HTML/JS "localStorage"..
Well i solved this by adding data to localStorage:
//ADD DATA
localStorage.setItem(key, JSON.stringify(value));
Then i check for internet connection:
//CHECK INTERNET CONNECTION
const checkOnlineStatus = async () => { //console.log('CHECKING INTERNET..');
try {
const online = await fetch("/img.gif");
return online.status >= 200 && online.status < 300; // either true or false
} catch (err) {
return false; // definitely offline
}
};
const result = await checkOnlineStatus();
result ? updateMysql() : console.log('NO INTERNET..');
In the updateMysql() function i load all the localStorage and send it with ajax to php and mySQL.
var query = JSON.parse(localStorage.getItem(key));
I developing an application using ionic1 and AngularJS.When i want to go back to previous view i must save some data into sqlite database using sqlite plugin from https://github.com/litehelpers/Cordova-sqlite-storage.git.When i press button to go back i see a lag when it pass from a view to another.The sqlite table structure have two columns:
->Id -primary key -integer
->data-string
In this table i want to save data field as string(from json).
Does anyone knows how to make this process faster? I'm using an iPad for testing.
I'm posting my code here to show how save function is implemented.Thanks for any help. :)
$scope.storeProfileDataCourses = function(data) {
console.log('insertData');
var querySelect = "SELECT * FROM Table where Id=?";
$cordovaSQLite.execute(db, querySelect, [crewId]).then(function(res) {
console.log('Rows:' + res.rows.length);
if (res.rows.length > 0) {
var queryUpdate = "UPDATE Table SET data=? WHERE Id=?";
$cordovaSQLite.execute(db, queryUpdate, [JSON.stringify(data), crewId]).then(function(res) {
console.log('update');
console.log(res);
}, function(err) {
console.error(err);
});
} else {
console.log('Need to insert');
var query = "INSERT INTO Table(Id,data) VALUES (?,?)";
$cordovaSQLite.execute(db, query, [Id, JSON.stringify(data)]).then(function(res) {
console.log("INSERT ID -> " + res.insertId);
}, function(err) {
console.error(err);
});
}
});
}
I have a template that I am loading from a route like so:
this.route('formEdit', {
path: '/admin/form/:_id',
data: function() { return Forms.findOne({_id: this.params._id}); },
onBeforeAction: function() { AccountUtils.authenticationRequired(this, ['ADMIN']); }
});
In which I have a template defined like:
<template name="formEdit">
<div id="formContainer">
...
{{#each header_fields}}
<div class="sortable">
{{> headerFieldViewRow }}
</div>
{{/each}}
</div>
</template>
And:
<template name="headerFieldViewRow">
{{#with header_field}}
...
{{/with}}
</template>
I then make the container around all the header fields sortable using jQuery UI Sortable:
Template.formEdit.rendered = function() {
$('.sortable').sortable({
axis: "y",
stop: function(event, ui) {
var form = Blaze.getData($('#formContainer')[0]);
var newFormHeaders = [];
$('#headerFieldsTable div.headerField').each(function(idx, headerFieldDiv) {
var header = Blaze.getData(headerFieldDiv);
header.sequence = idx;
Meteor.call('saveHeaderField', header);
newFormHeaders.push({header_field_id: header._id});
});
form.header_fields = newFormHeaders;
Meteor.call('saveForm', form);
}
});
}
Basically, when sorting stops, loop through all the headers, getting the data for each and updating the sequence number, then re-build the array in Forms and save them back. In the server code I have printouts for the two save calls, and the do properly print out the correct order of both the headers and the form.
The problem I am running into is that, after sorting, the visual display of the form and it's headers "snaps" back to the pre-sorted state, even though the data in the DB is correct. If I simply reload the form, either by hitting enter in the Address bar or by simply re-loading it from the menu, everything is displayed correctly. It's as if the reactive piece isn't working.
I have noted that I am getting an error when I update the client code in my server log that reads:
=> Client modified -- refreshing
I20141010-18:25:47.017(-4)? Failed to receive keepalive! Exiting.
=> Exited with code: 1
I don't think this is related as I was getting that error prior to adding this sorting code.
Update: Adding code for saveForm and saveHeader
saveForm:
// Saves the Form to the DB
saveForm: function(params) {
// Structure the data to send
var formEntry = {
title: params.title,
client_id: params.client_id,
header_fields: params.header_fields,
form_fields: params.form_fields,
created_by: Meteor.userId(),
created_on: new Date()
};
if (params._id == null) {
console.log("Saving new Form entry: %j", formEntry);
formEntry._id = Forms.insert(formEntry);
} else {
formEntry._id = params._id;
console.log("Updating Form entry: %j", formEntry);
Forms.update({_id: formEntry._id}, formEntry);
}
return formEntry;
}
saveHeader:
// Saves the HeaderField to the DB
saveHeaderField: function(params) {
// Structure the data to send
var headerFieldEntry = {
label: params.label,
field_type: params.field_type,
field_options: params.field_options,
form_id: params.form_id,
required: params.required,
allows_pictures: params.allows_pictures,
record_geo: params.record_geo
};
if (params._id == null) {
console.log("Saving new HeaderField entry: %j", headerFieldEntry);
headerFieldEntry._id = HeaderFields.insert(headerFieldEntry);
} else {
headerFieldEntry._id = params._id;
console.log("Updating HeaderField entry: %j", headerFieldEntry);
HeaderFields.update({_id: headerFieldEntry._id}, headerFieldEntry);
}
return headerFieldEntry;
}
I think the issue here is that Meteor.call will run on the server - you either need to use a callback or invalidate your template, if you want to return a value Meteor.call. From the docs:
On the client, if you do not pass a callback and you are not inside a stub, call will return undefined, and you will have no way to get the return value of the method. That is because the client doesn't have fibers, so there is not actually any way it can block on the remote execution of a method.
There is more info in this answer and this answer and the Meteor.call docs.
Hope that helps!
I'm working in an implementation using SignalR and the Kendo Scheduler. When a new task is created (for exemple), the SchedulerDataSource transport send the connection hub id to the server as an additional parameter:
transport: {
read: { url: global.web_path + 'Home/Tasks' },
update: { url: global.web_path + 'Home/UpdateTask', type: 'PUT', contentType: 'application/json' },
create: { url: global.web_path + 'Home/CreateTask', type: 'POST', contentType: 'application/json' },
destroy: { url: global.web_path + 'Home/DeleteTask', type: 'DELETE', contentType: 'application/json' },
parameterMap: function (options, operation) {
if (operation == "destroy" && options.models) {
return JSON.stringify({ taskId: options.models[0].Id, callerId: $.connection.hub.id });
}
if (operation !== "read" && options.models) {
return JSON.stringify({ tasks: options.models, callerId: $.connection.hub.id });
}
}
},
The server do whatever it has to do, and send a notification to every other user, except de caller:
[HttpPost]
public JsonResult CreateTask(List<ScheduledEvent> tasks, string callerId)
{
...create task and other stuff
//broadcast the newly created object to everyone except caller
var hubContext = GlobalHost.ConnectionManager.GetHubContext<Notebooks.Hubs.SchedulerHub>();
hubContext.Clients.AllExcept(callerId).UpdateSchedule(task);
//return the object to caller
return Json(task);
}
Once the other clients receive a new task from the hub, it is added to the SchedulerDataSource:
hub.client.updateSchedule = function (scheduledEvent) {
schedulerDataSource.add(scheduledEvent);
}
Everything seems to work fine, and it really took me some time to realize this behavior: if a client have the scheduler window open, this window is closed once the schedulerDataSource is updated. This is expected or am I doing something wrong?
Edit: I just realized how old this question is, so you have probably moved on to other things by now, or the pushCreate method may not have existed back then.
I think this may be how it works, but it seems like it should be able to add those events behind the scenes without having to close the edit window. Have you tried the pushCreate method? If that doesn't work, since the add automatically closes the edit dialog, maybe when the events come in, if the dialog is open, you could store the new events, then add them when the user closes the edit dialog.
My answer is now even older ;) but I faced this very same issue today.
First, I'm quite sure this is indeed the expected behavior. You can see in the kendo sources the call of the close editor window method in the transport update and create methods of the scheduler.
Below is what I've done to bypass the issue .
The idea is as simple as to prevent the edit window to close when an appointment modification comes from another hub client.
Server-side : modify the hub methods (example with update method)
public MyAppointmentViewModel Update(MyAppointmentViewModel appointment)
{
if (!appointmentService.Update(appointment))
throw new InvalidOperationException("Something went wrong");
else
{
Clients.Others.PrepareBeforeAddOrUpdateSignal(appointment.Id);
Clients.Others.Update(appointment);
return appointment;
}
}
Here you see we inform every other clients (through PrepareBeforeAddOrUpdate) we're about to update an appintment.
Client-side now (in index.cshtml for instance)
schedulerHub.client.prepareBeforeAddOrUpdateSignal = function(id){ lastModifiedRdvId = id; };
schedulerHub.client.create = function(appointment){ lastModifiedRdvId = 0; }; /* reset the variable for next time */
schedulerHub.client.update = function(appointment){ lastModifiedRdvId = 0; }; /* reset the variable for next time */
function SchedulerEditor()
{
return $(".k-scheduler-edit-form").data("kendoWindow");
}
var eventBeforeChanges = null;
var lastModifiedRdvId = 0;
function onEditorClose(e) {
if (eventBeforeChanges != null) {
if (lastModifiedRdvId > 0 && eventBeforeChanges.Id != lastModifiedRdvId)
e.preventDefault();
else {
var editWin = SchedulerEditor(); /* unbind this callback and use default behavior again */
editWin.unbind('close', onEditorClose);
}
}}
function onEditRdv(e) {
var editWin = SchedulerEditor();
if (editWin != null) /*Bind the close event */
editWin.unbind('close', onEditorClose).bind('close', onEditorClose);
eventBeforeChanges = e.event;
/* continue onEditRdv */
}
you see here the close event is prevented when the appointment id is not the appointment id beeing updated by the current client.
And fortunately, preventing the close event prevents the annoying behavior of having a sort of ghost appointment after one has been changed by another hub client.
I'm sorry if I'm not clear or if the code isn't clear enough. I can provide more information if necessary.
Bye
I am trying to set up an autocomplete input box on a form and although everything seems to work I an getting no data passed to the input box. Firebug reports a success but nothing there. I was wondering if some one could look at my code to see if there are any glaring errors that may be causing it.
Script is:
(function($){
$("#town").autocomplete({
source :"drivers/driver_gettown",
minLength : 3,
dataType:'JSON',
type:'POST'
});
})(jQuery);
Input Box is:
<div class="div">
<input name="town" id="town" type="text" class="txtSelect input required" value="<?php echo set_value('town'); ?>" />
<?php echo form_error('town'); ?>
</div>
Model is:
class Driver_model extends CI_Model
{
public function __construct() {
// Load the Database
parent::__construct();
$this->load->database();
}
function driver_get_towns($q)
{
// Get a list of Towns
// Search for row "place_name" from Table called "tbk_towns"
$this->db->select('place_name');
$this->db->like('place_name', $q);
$query = $this->db->get('tbk_towns');
if($query->num_rows > 0)
{
foreach ($query->result_array() as $row)
{
//build an array for the towns
$row_set[] = htmlentities(ucfirst($row['place_name']));
}
//format the array into json data
// header('Content-Type: application/x-json; charset=utf-8');
// echo json_encode($row_set);
$this->output
->set_content_type('application/json')
->set_output(json_encode($row_set));
}
}
}
and Finally the controller:
class Drivers extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->model('driver_model');
$this->load->helper('url', 'form', 'html', 'json');
}
function index()
{
// Just loads the main Page of the Drivers Area
$data['metatitle'] = "Auto Ninja | Drivers Members Area | Locally Rated Garages & Mechanics";
$data['metadescription'] = "Garages & Mechanics";
$data['metakeywords'] = "Car Repair, Car Service, Car MOT";
$this->load->view('drivers/header_drivers.inc.php', $data);
$this->load->view('drivers/index');
$this->load->view('drivers/footer_index.inc.php');
}
public function driver_gettown()
{
if (isset($_GET['term'])){
exit;
}
$this->load->model('driver_model');
$q = ucfirst($_GET['term']);
$this->driver_model->driver_get_towns($q);
}
}
and comments/help would be gratefully appreciated.
function driver_addjob()
{
// Loads the Add New Job Form for the Website
$this->load->helper('form');
$this->load->library(array('form_validation', 'session'));
$this->load->model('driver_model');
$this ->form_validation->set_error_delimiters('<span class="error">', '</span>');
// Validate the form fields
$this->form_validation->set_rules('town', 'Nearest Town or City', 'trim|required|xss_clean');
// Populates dropdown "town" from the database ???
if ($this->form_validation->run() == FALSE)
{
$data['metatitle'] = "Auto Ninja | Drivers - Add New Job | Locally Rated Garages & Mechanics";
$data['metadescription'] = "Garages & Mechanics";
$data['metakeywords'] = "Car Repair, Car Service, Car MOT";
$this->load->view('drivers/header_drivers.inc.php', $data);
$this->load->view('drivers/driver_addjob.php');
$this->load->view('drivers/footer_index.inc.php');
}
else
{
$townid = $this->input->post('town');
$work_jobtitle = $this->input->post('jobtitle');
$this->driver_model->driver_add_job ($townid);
$this->session->set_flashdata('message', 'your work request has been added to the system');
$data['metatitle'] = "Auto Ninja | Drivers - Add New Jobs Success | Locally Rated Garages & Mechanics";
$data['metadescription'] = "Garages & Mechanics";
$data['metakeywords'] = "Car Repair, Car Service, Car MOT";
$this->load->view('drivers/header_drivers.inc.php', $data);
$this->load->view('drivers/driver_addjob_success');
$this->load->view('drivers/footer_index.inc.php');
}
}
Ok I finally figured this one out. For some reason the response URL is coming out at
http://php.codeigniter.server/drivers/drivers/driver_gettown?term=ed
so the controller is being added twice. I updated the Java to
(function($){
$("#town").autocomplete({
source :"driver_gettown",
minLength : 3,
dataType:'JSON',
type:'POST'
});
})(jQuery);
ie not including the controller and it works!!! So a tad confused as to how it knows which controller to find the method in but who cares it works. It would be nice to know though as it will probably still annoy me... Possibly the JSON call bring it over in the URL maby?