Develop Reference

Loading JavaScript Function when loading new php page

I have a button that includes a location.href = "home.php" This redirects to the home page fine, however if this button is pressed i need a function to run from the JavaScript. I don't want to do a document load in JavaScript as this should only appear when a certain button takes you home. I need to POST value and say if(isset($_POST['value'])) I just cant get this to work.
$(function () {
$('#receiptButton').click(function () {
location.href = "home.php";
show_receipts();
});
});
i need the show_receipts(); to run once home.php is loaded. I believe using ajax is the correct way, but i cant redirect to the page and run the function.

Loader only disappears when refresh page

I'm trying to do a loader animation while page loads.
I have an index page that as a link/button to the page that I want to have the loader. When I click the link the page opens and runs the loader, but the loader never go away only when I refresh the page. After this everything works fine, the loader always disappears when I open the page.
Can anyone suggest a solution for this?
Javascript:
<script type="text/javascript">
$(window).load(function() {
$(".preloader").fadeOut("slow");
});
</script>
HTML:
<div class="preloader"></div>

Try the same with document ready:
$(document).ready(function() {
$(".preloader").fadeOut("slow");
});
An assumption here is, your loader is already there in the HTML and is visible by default.

How to set loading icon for transition between pages?

$(window).load(function() {
$('#loading').hide();
$('#container').show();
});
In all my php file, I have above mentioned code for displaying loading icon till the page loads. For example : If I execute index.php, loading icon will be shown till index.php gets fully loaded.If it is redirected to example.php when redirecting, no loading icon is displayed, its fully blank. And if it is redirected fully then loading icon is displayed till that page loads fully.
Expected:
When redirecting to next page, in that meanwhile too I need loading icon to be displayed .
so How to display loading icon between the transition of pages?

The trick is to start the loading icon immediately when the page is unloaded. Then when the new page is loaded, the loading icon must be shown immediately again, only then when the new page is fully loaded the icon can be hidden.
// Show the icon immediatly when the script is called.
$('#loading').show();
// show the icon when the page is unloaded
$(window).on('beforeunload', function(event) {
$('#loading').show();
});
// hide the icon when the page is fully loaded
$(window).on('load', function(event) {
$('#loading').hide();
});

yii2: update/refresh/reload a page using Pjax different from requesting page

I have asked this question, but I think that wasn't clear enough so I am putting it differently. I have a _form.php page and a grid-view(index.php)page.
I am sending a Pjax request from _form.php and want to update/refresh the grid-view(index.php)page.
on top my _form.php I am having this code.
<?php
$this->registerJs(
'$("document").ready(function(){
$("#new_medicine").on("pjax:end", function() {
$.pjax.reload({container:"#medicine"}); //Reload GridView
});
});'
);
?>
Now the container "#medicine" is not on _form.php page, but grid-view(index.php) page. So how can I modify the above code so that it updates/refresh the container "#medicine" in index.php page.
I think I have explained the situation correctly. please tell me, if more information is needed.
Thanks.

Try using $this::POS_READY instead of wrapping your code in $("document").ready(function(){})
$js = '$("#new_medicine").on("pjax:end", function() {
$.pjax.reload({container:"#medicine"}); //Reload GridView
});'
$this->registerJs($js, $this::POS_READY);
EDIT
Apparently you want to reload the gridview that is open on another client's index.php after data is inserted using _form.php.
It isn't possible to send jQuery commands to another client (browser) and have it executed.
You can for example reload the gridview on the index.php every x seconds or minutes.
$js = 'function refresh() {
$.pjax.reload({container:"#medicine"});
setTimeout(refresh, 5000); // restart the function every 5 seconds
}
refresh();';
$this->registerJs($js, $this::POS_READY);

jQuery mobile how to detect refresh

Some background;
By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
I have a jQuery mobile app with 5 pages "login.html" "menu.html" "account.html" "settings.html" ..etc
I change pages with like;
$.mobile.changepage("account.html")
Also I put all my page load logic to my first page login.html like this;
<script>
$(document).on('pageinit', '#loginpage', function() {
//do some stuff run some ajax scripts and add some html to its body
});
$(document).on('pageinit', '#accountpage', function() {
//do some stuff run some ajax scripts and add some html to its body
});
$(document).on('pageinit', '#settingspage', function() {
//do some stuff run some ajax scripts and add some html to its body
});
</script>
While this app works well, Problem is I find it very fragile and hard to survive from unexpected errors. for example;
Since how every page's body html will load is defined in login.html, this means if any moment user manually refreshs any of these pages, the page will load without running those scripts and load an empty page a without a body. In that moment since the correct DOM is deleted from memory, user is stuck in an app with full of empty pages, only way is he is smart enough to go and type "login.html" to address bar and only then all process can start smoothly.
I think we cant %100 hide address bar, it is visible again after scroll down.
SO this is one problem I come up with, some other weird things can happen and if somehow the DOM gets corrupted only way to use app again is typing login.html address bar, which users probably will not thing about it.
How can I make this app more robust like detecting any DOM corruption or refresh and forward the user to login.html, so he does not stuck in an app with empty pages.

One way to alleviate some pain is to put your page-specific scripts inside data-role="page" element in the appropriate html files and keep scripts that are the same for every page outside that element (at the and of the body and/or head).
That way even if the user refreshes the page all necessary scripts will still be executed.
One problem though, before binding any handlers you need to unbind them first. Otherwise you'll end up having multiple handlers attached.
To illustrate this:
in login.html (updated):
<div data-role="page" id="loginpage">
<script>
$(document).off('pageinit', '#loginpage').on('pageinit', '#loginpage', function() {
$(document).off('click', '#btnaccount').on('click', '#btnaccount', function(){
$.mobile.changePage("jqmaccount.html", {reloadPage: true});
});
console.log("paginit in loginpage");
});
$(document).off('pageshow', '#loginpage').on('pageshow', '#loginpage', function() {
console.log("pageshow in loginpage");
});
</script>
<div data-role="content">
<a id="btnaccount" href="#" data-role="button">Account</a>
</div>
</div>
in account.html (updated):
<div data-role="page" id="accountpage">
<script>
$(document).off('pageinit', '#accountpage').on('pageinit', '#accountpage', function() {
$(document).off('click', '#btnlogout').on('click', '#btnlogout', function(){
$.mobile.changePage("jqmlogin.html", {reloadPage: true});
});
console.log("pageinit in accountpage");
});
$(document).off('pageshow', '#accountpage').on('pageshow', '#accountpage', function() {
console.log("pageshow in accountpage");
});
</script>
<div data-role="content">
<a id="btnlogout" href="#" data-role="button">Logout</a>
</div>
</div>
In this setup if the user refreshes account.html the Logout button on that page will still work.