We Keep Coding

Lightswitch 2013: Save then Refresh in JS

I have the 2 sets of code:
Saves the data
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();
2.Refreshes the page
window.location.reload();
is there a way to make both of these work together on one button, as currently when i click save, the browser recognizes the changes and the (are you sure you want to leave the page) message or something along those lines pops up..
cheers

This is for the HTML client, right?
Assuming that is the case:
saveChanges() is an asynchronous operation, so you'd want to do:
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges().then(function () {
window.location.reload();
});
That way it will wait until it is finished saving the changes before it reloads the screen.
However, there is a smoother way to do it, at least from the user perspective it's smoother.
On the edit screen, leave the Save method out, let LightSwitch handle that. When the user clicks save, it will close the edit screen, and go back to where they were before. Using the options parameter of the showScreen method, we can change that behavior.
Change the method that calls the edit screen like this:
myapp.showEditProject(screen.Project, {
afterClosed: function (editScreen) {
myapp.showViewProject(editScreen.Project);
}
});
This way, after the edit screen is closed, and it has handled the save changes operation for you, the application will automatically navigate to the details view screen of the recently edited item.
If you are instead wanting to refresh the browse screen after adding a new entity:
myapp.showAddEditProject(null, {
beforeShown: function (addEditScreen) {
addEditScreen.Project = new myapp.Project();
},
afterClosed: function () {
screen.Projects.load();
}
});
Those two options, beforeShown and afterClosed, give you a lot of really cool abilities to influence the navigation in your application.

I have learnt that you can save from a add/edit window, and reload the main page you are going back to by doing the following:
For Example: (adding an order to an order screen)
click on your button to add the order
enter the details required.
hit your custom save button with your validation included.
before your commitChanges(); write in the following line: screen.OrderLine.OrderTable.details.refresh(); "This needs applying to your scenario"
when you return to your screen your details should have been updated (for example the total value now displays the correct value in my case)
hope this helps...

How can I hide a button after it was clicked?

I have a stop button,when it is clicked it gets hidden but when I fresh the page the button does appear again.Is it possible to hide the button forever even if there is a page refresh here is what I tried
newContent += Hesto.Html.CreateTD('<input type="button" value="Stop" id="btnStopEvent">');
function GetEventId() {
$(document).on('click', '#btnStopEvent', function () {
var EventId = $(this).parents('tr').attr('id');
var Result = {
EventId: EventId
};
$(this).hide();
});
}

You'll have to persist the button's state somewhere else. Every time you reload the page, your code is re-loaded and any JavaScript variables that were set are initialized again.
You could do something with Local Storage, there are many tools that make using Local Storage easy, here is a very simple example:
// set the value and save it in local storage
localStorage.setItem( "stop_button_state", "disabled" );
// after page re-load, fetch the saved value
var button_state = localStorage.getItem( "stop_button_state" )
You could also use some sort of server side persistance, it could be a session variable (PHP) or even stored in a database of some sorts. You would then retrieve the setting before serving the page to the user.

Cookies might be good for this case. You already use jQuery, so try this plugin
https://github.com/carhartl/jquery-cookie
After that you need to write some simple logic to set cookie when button is clicked and check for cookie before clicking so that it wont show.
Localstorage is also good as someone already mentioned, if you aim only for moden browsers.
http://www.w3schools.com/html/html5_webstorage.asp

Javascript - Reload page after form submit with target="_blank"

I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!

Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}

On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()

Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.

How to stop unloading the page?

I have a page where user needs to enter some data and click save to validate the changes, but my problem is if the user is trying to close the browser window or click on a different link to navigate to a different page..I need to delete all the entries the user has saved so far..
I am doing it the following way
window.onbeforeunload = function()
{
if(confirm('Are you sure you want to navigate'))
{
//Invoke `enter code here`server side method
}
else
{
// return false;
}
}
Everything works fine if he click on Yes, the problem comes when he click on "No"..Even if he click on No..the page unload method is getting called and it is redirected to a different page..but I want it to stay in the same page in same state...can you please help me in achieving this.
Thanks and appreciate your response....

You cannot stop the user from leaving the page. What you can do is alert a message to them, asking if they want to leave or not.
The window.onbeforeunload event should return a string (and only a string). This string will be printed on the alert box made by the browser.
You cannot use your own alert box, or block the user from leaving (or redirect them).
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
Or with jQuery
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
When a user leaves the page, you can use the onunload event to make an AJAX call (you may need to use async: false here).
Example:
$(window).unload(function(){
$.ajax({
url: '/path/to/page/',
async: false, // this may be needed to make sure the browser doesn't
// unload before this is done
success: function(){
// Do something
}
});
});
NOTE: Instead of doing this, why don't you just save everything when the user is completed? Instead of saving it and then removing it if the user doesn't finish?

First of all: you can't! It's impossible. onbeforeunload only accepts a string as return value and will then close if the user wants that.
But then think about what happens if the computer is being without energy and shuts down? Or the browser will closed by the Task Manager? Or even more "realistic": The internet connection get lost! => Then you got invalid data states too!
You are trying to solve a false problem! Your problem isn't this function, your problem is the state of your formular!
Why do you need some kind of function? Do you saving the data before he clicks on save? Then don't! Or make sure to have another query which detects unfinished data in your database and delete it after a timeout!

onbeforeunload only accepts a string as return value. That string will be displayed by the browser with the option to stay on the page or leave it. But that's ll you can do.

You can use something like this, just call the following function on your page
function noBack() {
window.onbeforeunload = function(){window.history.forward()}
}
this disables Back button if window.history is clean, otherwise it works only first time.

Save record on page leave

I am saving records on save button click, if user don't click save button and navigate to another page while clicking on some link even then i want to call the save method.
How can I achieve this functionality?
please provide some sample code ...
thanks in advance for your help

You can make ajax request on
window.onbeforeunload = function(){
////make ajax request
}
Or can prevent the user by giving confirm box
function showalert() {
if (!confirm('Are you sure you want to exit without saving changes?')) {
////make ajax request
}
else {return true;}
}
window.onbeforeunload = function(){ showalert }
For example check this out when I leave this page while answering SO prevent me

Use an ajax post, triggered by window.OnBeforeUnload() to let yourself know that the user has left the page, and pass any information you need.

Well since you want to call the save method even if the user navigates to another page or link
what u need to do is set a hidden field for eg. suppose hdnSave and set its value to say 0
Now when the user navigates or clicks on any another link first check if this hidden field value(hdnSave) is set to 1 or not.If not then Call Save Method.So this hidden Field can be used as an indicator of whether Save Method has been called or not.
Similarly you can use a session(in c# code) for the same purpose as well.