We Keep Coding

localstorage value is changed on page refresh

I am creating an welcomescreen for my html app. and im using a welcomescreen plugin from github. you can check it here https://github.com/valnub/welcomescreen.js
now i want to show welcome screen when localstorage value is 0. and when close button of welcomescreen is clicked i am changing the localstorage value to 1. but on page refresh the localstorage value is again set to 0.
how to do that this is my js file.
/*jslint browser: true*/
/*global console, Welcomescreen, $*/
// Init method
$(document).ready(function () {
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
if (welcomeTour == 0) {
$(document).ready(function () {
var options = {
'bgcolor': '#0da6ec',
'fontcolor': '#fff',
'onOpened': function () {
console.log("welcome screen opened");
console.log(welcomeTour);
},
'onClosed': function () {
localStorage.setItem("welscreen","1");
var welcomeTour = localStorage.getItem("welscreen");
console.log("welcome screen closed");
console.log(welcomeTour);
}
},
welcomescreen_slides,
welcomescreen;
welcomescreen_slides = [
{
id: 'slide0',
picture: '<div class="tutorialicon">♥</div>',
text: 'Welcome to this tutorial. In the <a class="tutorial-next-
link" href="#">next steps</a> we will guide you through a manual that will teach you how to use this app.'
},
{
id: 'slide1',
picture: '<div class="tutorialicon">✲</div>',
text: 'This is slide 2'
},
{
id: 'slide2',
picture: '<div class="tutorialicon">♫</div>',
text: 'This is slide 3'
},
{
id: 'slide3',
picture: '<div class="tutorialicon">☆</div>',
text: 'Thanks for reading! Enjoy this app or go to <a class="tutorial-previous-slide" href="#">previous slide</a>.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
}
];
welcomescreen = new Welcomescreen(welcomescreen_slides, options);
$(document).on('click', '.tutorial-close-btn', function () {
welcomescreen.close();
});
$('.tutorial-open-btn').click(function () {
welcomescreen.open();
});
$(document).on('click', '.tutorial-next-link', function (e) {
welcomescreen.next();
});
$(document).on('click', '.tutorial-previous-slide', function (e) {
welcomescreen.previous();
});
});
};
});

Change this:
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
to this:
var welcomeTour = localStorage.getItem("welscreen");
if(welcomeTour === undefined || welcomeTour === null) {
localStorage.setItem("welscreen", "0");
welcomeTour = "0";
}

post callback function synchronization

I'm using datatables and after post I want to refresh the page after changes in the database are done. But for now it's pretty much random if the page refreshes before or after the database is updated. I also tried to add 'success:' to the callback function but this doesn't help.
Script for datatables projects.php:
<script> $(document).ready( function () {
var projects = $('#projects').DataTable({
paging:true, dom: 'Blfrtip', colReorder: true, select: {style: 'single'},
buttons: [
{
text: 'Edit',
action: function () {
$projectID = $(projects.row('.selected').node()).data('id');
if ($projectID === undefined)
{
alert("Please select a project.");
} else {
window.location.href = "../projects/editProject.php?projectID=" + $projectID;
}
}
},
{
text: 'Add',
action: function () {
window.location.href = "../projects/addProject.php";
}
},
{
text: 'Delete',
action: function () {
$projectID = $(projects.row('.selected').node()).data('id');
if ($projectID === undefined)
{
alert("Please select a project.");
} else {
$.post("../projects/deleteProject.php",
{
projectID: $projectID,
function() {
window.location.reload(true);
}
}
);
}
}
}
] }); } ); </script>
deleteProject.php:
<?php
require("../database/dbService.php");
require("../projects/deleteProjectService.php");
session_start();
$connection = connectToDB();
// check if input data is set
if (!isset($_POST['projectID'])){
header("Location: ../projects/projects.php");
exit;
}
// input data
$projectID = $_POST['projectID'];
deleteProject($connection, $projectID);
$_SESSION['message'] = "The project has been deleted!";
?>

You placed callback function in the wrong place, it should have been:
$.post(
"../projects/deleteProject.php",
{ projectID: $projectID },
function(){ window.location.reload(true); }
);

Fire ionicModal on ionicPopup close

I want to open ionic modal whenever the user presses the Yes button, but close ionic popup whenever the user presses the No button. How can I do this?
At the moment, ionic popup opens up in each case. Here is my code so far:
services.js
function PopupService($ionicPopup) {
function acceptAppointmentPopup(scope) {
return $ionicPopup.show({
title: 'Are you sure you want to accept this appointment?',
scope: scope,
buttons: [{
text: '<b>Yes</b>',
type: 'button-positive',
onTap: function(e) {}
}, {
text: 'No',
onTap: function(e) {}
}, ]
})
}
return {
acceptAppointmentPopup: acceptAppointmentPopup
};
}
controller.js
function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {
$scope.newMessageModal = function() {
ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
}
$scope.showAcceptAppointmentPopup = function() {
$scope.data = {}
var myPopup = PopupService.acceptAppointmentPopup($scope);
myPopup.then(function(res) {
$scope.newMessageModal();
});
};
}

$ionicPopup supports confirm (a YES, NO dialog) which returns a promise and as an argument passes the result. You can use it like this:
$ionicPopup.confirm({ // example taken from official documentation
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
}).then(function (result) {
if (result) {
// At this point user confirmed that they want to eat the ice cream,
// so lets open a modal to visually show the user how the ice cream is being consumed
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
// This is where the user starts drooling :P
});
} else {
// This user apparently hates ice cream, which is ridiculous...
}
});
You can get more info on the official documentation page.
Integrating my example into your code:
services.js
function PopupService($ionicPopup) {
function acceptAppointmentPopup(scope) {
return $ionicPopup.show({
title: 'Are you sure you want to accept this appointment?',
scope: scope,
buttons: [{
text: '<b>Yes</b>',
type: 'button-positive',
onTap: function(e) {
return true;
}
}, {
text: 'No',
onTap: function(e) {
return false;
}
}]
})
}
return {
acceptAppointmentPopup: acceptAppointmentPopup
};
}
controller.js
function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {
$scope.newMessageModal = function() {
ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
}
$scope.showAcceptAppointmentPopup = function() {
$scope.data = {}
var myPopup = PopupService.acceptAppointmentPopup($scope);
myPopup.then(function(res) {
if (res) { // Here we check if user pressed Yes - Yes button returns true
$scope.newMessageModal();
}
});
};
}

Access jQueryUI Dialog buttons upon creation

How do I access jQueryUI Dialog buttons upon creation and get their size? As a workaround, I could do so when it is opened.
http://jsfiddle.net/1ueho4tq/
var $button1;
var dialog = $('#dialog').dialog({
autoOpen: false,
create: function (event, ui) {
var $button1 = $('#button1');
console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
},
open: function (event, ui) {
if (!$button1) {
$button1 = $('#button1');
console.log("$button1 open", $button1, $button1.outerHeight(), $button1.position().top);
}
},
buttons: [{
id: 'button1',
text: 'Upload',
click: function () {
console.log('button1');
}
}, {
id: 'button2',
text: 'Save',
click: function () {
console.log('button2');
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog("close");
}
}]
});
$('#open').click(function () {
dialog.dialog('open');
});
<div id="dialog"></div>
<button id="open">Open</button>

You can get the jQuery UI dialog buttons using buttons option getter.
Code:
var buttons = $('#dialog').dialog('option', 'buttons');
But if you need to check their dimensions you need to use the array after the dialog is opened.
Code:
open: function (event, ui) {
$.each(buttons, function (i, e) {
console.log($('#'+e.id).outerHeight())
});
},
Demo: http://jsfiddle.net/f4m6z9hc/

Why won't my jQuery-ui modal dialog display two custom buttons?

I have a generic Javascript function for displaying a jQuery-ui modal dialog with two buttons -- essentially "Continue" and "Cancel", though the text varies. I'm calling it in three places in my application. What's happening is that only the second button, the "Cancel" button is being displayed. Here's the function: (String.Format is an external function I always use since Javascript doesn't have one built-in - I know it isn't the problem.)
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the dialog
$('#theDialog').dialog({
width: 400,
height: "auto",
modal: true,
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#theDialog').remove();
$('body').find('#theDialog').destroy();
},
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
},
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
});
return false;
}
And here's a snippet showing how I'm calling it:
if(CheckFormDataChanged() {
var changeTitle = "Data has been changed";
var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
var changeContinue = "Yes, continue without saving";
var changeCancel = "No, let me save";
if (DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)) {
if (obj) obj.click();
return true;
}
}
What's wrong with my function (or the call)?
UPDATE: Here's what I'm working with now. I realized that on one of the modal dialogs I didn't need a cancel button, just an acknowledge button:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
var def = new $.Deferred();
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the button array for the dialog
var buttonArray = [];
buttonArray.push({ text: continueText, click: function () { $(this).dialog('close'); def.resolve(); } });
if (!suppressCancel) {
buttonArray.push({ text: cancelText, click: function () { $(this).dialog('close'); def.reject(); } });
}
//create the dialog
$('#theDialog').dialog({
... dialog options ...
close: function (event, ui) { $('body').find('#theDialog').remove(); },
buttons: buttonArray
});
return def.promise();
}
And the usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
.done(function () { if (obj) obj.click(); return true; })
.fail(function () { return false; });
Just to give you some context, obj is an ASP.Net Button being passed to the client-side function; if the function returns true, the server-side OnClick event is triggered; if false, it isn't. In this case, the server-side OnClick advances to the next tab in a TabContainer (among other things). What's happening is that it's moving to the next tab anyway, even though I'm returning false in the fail() function.

Your curly braces are off:
[{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
}
}, {
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
As you have it, you only have one object in your buttons array.

I can't tell yet why the button doesn't display EDIT, ah, yes I can, there's a missing curly brace.
What I can tell you that your return lines simply won't work.
The dialog box gets displayed, your function returns immediately, and processing continues, so the click callback return values are completely ignored.
What you can do instead is return a promise:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
var def = $.Deferred();
...
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
def.resolve();
}
},
{ // ah - here's your button bug - a missing brace
text: cancelText,
click: function () {
$(this).dialog('close');
def.reject();
}
}
...
return def.promise();
}
with usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)
.done(function() {
// continue was clicked
}).fail(function() {
// cancel was clicked
});