Develop Reference

How to refresh the WordPress home page without user noticing?

I would like to refresh the home page every X sec. I found this solution:
Install Auto Refresh Single Page plugin
Insert to header.php the lines:
if (is_front_page()) {
echo '<META HTTP-EQUIV="REFRESH" CONTENT="5">' ;
}
It refreshes the page but I notice that the page is reloaded. I would like it to happen smoothly. I don't want the refresh to make the page disappear for milliseconds. I want to refresh without the user noticing.
I have a page build with Wordpress. This page have few divs. Part of them list post type - and I need i to updated in case a new post submitted. Some divs need to change according to time of the day or the week and display different data. The page need to show all the time like a TV and information should be update automatically with no human touch. I tried to use ajax, but I don't know how to point it to reload specific div that built from Wordpress - I have no URL for specific div.

Check this out
if (is_front_page()) {
?>
<script>
setTimeout(function() { window.location = ""; }, 1000); //1 sec = 1000
</script>
<?php
}

I read your question, And as i thinking, you want update your posts on users homepage without any reloading. This can be done using "AJAX PHP". You should find plugins that uses "AJAX PHP" or "AJAX JAVASCRIPT".I hope this would be useful for you.

Open Webpage Section/Tab on Form Submit / page reload

I am using a bootstrap theme and am trying to get my page's form to stay on/open the specific registration form's confirm message. Unfortunately with several Registration Forms on the page, each is "hidden" inside it's own hidden div/tab. I am not too good with JS and have spent about 4 hours so far trying to get this to function properly:
http://middlechambersociety.com/dev/mcs2014/
On any Registration Form completion I want the user to be brought back to and shown that Registration Form's Confirmation Message AND the "Pay with Card" button when it is part of the reg process (the button currently shows when it should). However, the problem is that when my form reloads the best i can do is bring users to the Registration Section and show the Golfer's Reg Form and/or Confirm message only (because it is the default open div/tab). I have tried php and limited JS/jQuery with no success. I have tried adding Class .active to the li i want to display but no luck. I currently have the following trying to fire on each form when submitted to TRY to get the appropriate registration tab to display:
<?php
if ($reg_type == 'Diners' && !empty($confirm_msg)) {
?>
<script type="text/javascript">
alert('Working1');
$(document).ready(function() {
alert('Working');
var tab = $('#reg_diner').parent();
alert(tab);
tab.addClass('active').siblings().removeClass('active');
});
</script>
<?php
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>
please help.
For anyone who may be confused as to what i am looking to accomplish: feel free to complete one of the forms (Dining for instance) and see that the confirm message is hidden until you PHYSICALLY navigate back to the Dining registration tab.

Maybe try an ajax call and on success add active class to new content?
My bad - misunderstood. Heres where I can see your error:
In console.log You've got an $ reference error at your script calling point. Cause you load jQuery in footer. So it cant use scripts before it load fully. (Document Ready doesn't work because he doesn't know this command yet) Put jQuery into head, or your tag after calling jQuery

I understand not wanted to navigate user to a different page but sometimes it is just much easier.
One way though would be to put a $_GET string in the form post then use that to control the display message. Add it to the form action url maybe:
enter code hereaction="index.php?form=golfer1"
Then update your code :
<?php
if ($_GET['form'] == 'golfer1') {
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>

How to run JQuery after the main php page include sub php page

I am building my website and in the main PHP page, I got something like this:
...
<a class="aboutMe" href="?section=aboutMe"></a>
<a class="network" href="?section=network"></a>
<a class="map" href="?section=map"></a>
...
If someone click any of the links above, the in the same page, the PHP will do this:
<?php
if(array_key_exists ("section", $_REQUEST)) {
if($_REQUEST["section"] == "aboutMe") {
include(app_path().'/views/about-me.blade.php');
}
else if($_REQUEST["section"] == "network") {
include(app_path().'/views/network/index.php');
}
else if($_REQUEST["section"] == "map") {
include(app_path().'/views/my-trace.php');
}
}
?>
After the sub page is road, it is placed right under the main page, and I would like to make it automatically scroll down to the joint part so the user could see the sub page immediately, something like this:
<main page>
<- scroll to here
<sub page>
It sounds not difficult, and I've already written some jQuery to do this job. However the whole page was refreshed after the including, and the jQuery is run before the fresh. How could I fix that?
Or is that possible to include sub pages without refresh the whole page? This would be a preferred solution. Many thanks in advance!

PHP runs on the server. It sends a response to the user's browser, then javascript runs in the browser. If you want to execute more PHP code after the response has been sent, the user has to send another request to the server and get a new response. You can do this without reloading the page using ajax: http://learn.jquery.com/ajax/
Alternatively, if there are only the three different pages, you could just include the html code for all three pages in the initial response. Then just use javascript to change what is visible.

Is there any way to redirect to a new page and write some content with jquery on that page?

I am making a function which searches the database for flight information. I want user to be redirected on "ticket.php" if the response is true. I want to update the content of the page "ticket.php" using jquery. But jquery doesn't work. Am I doing something wrong here ? Here's part of javascript. It's an external javascript. It's included in both "search.php" and "ticket.php" page. This function gets invoked by clicking on search button in "search.php" page.
if(data){
setTimeout("location.href = 'ticket.php';",3000); // Redirect to new page
//Change content of "ticket.php" using jquery.
$("#source").text(x);
$("#destination").text(y);
$("#date").text(z);
$("#no_person").text(person);
$("#trip_type").text(type);
}
else
$("#alert").text("Oops! No Flight matches your criteria ! ");

When you set location.href to ticket.php, the user is then redirected to that new page (ticket.php). Then the browser will load that new page and will no longer use the javascript you have on your current page.
You will have to make the data appear on ticket.php, using e.g. url parameters taken from what they searched like this:
window.location.href = 'ticket.php?from=norway&to=sweden';

The reason this is not working for you is because when you redirect to ticket.php the page is reloaded and all of the javascript on the page is refreshed, losing whatever value they had before. To keep the data you have to send the information to ticket.php
There are a couple of ways to accomplish this, ordered in preferred method.
all assuming you are requesting the page like this: ticket.php?from=norway&to=sweden
php on the page ticket.php
<?php
echo $_GET['from'];
echo $_GET['to'];
?>
javascript on the page ticket.php
solution for getting params from this post:https://stackoverflow.com/a/1404100/2033671
alert(getURLParameter('from'));
alert(getURLParameter('to'));
jQuery from a different page on the same domain
$.get('ticket.php',function(response){
$html = $(response);
$html.find("#destination").text(y);
$html.find("#source").text(x);
$("html").html($html);
});

Refresh parent page after closing Iframe Modal box

The basics:
I have a webpage where a user can 'add an article'; when they click to 'add an article' it opens an iframe (a pop-up modal box).
In the Iframe there is a form with 'save' and 'cancel' buttons - what I'm trying to do is make it so when the user hits 'save', it will close the modal box, and then refresh the page.
I have it set so the iframe closes and the data is saved to the database, but I can't get the page to refresh (which would then display the new article)
I've been unable to do this as of yet, despite googling for days. I'm not a javascript pro, but I've learned enough in the past couple days to do a thing or two.
Here is the code for the button:
<a class="toolbar" href="#" onclick="javascript: submitbutton('save'); return false;">
Here is the end of the javascript function that handles the saving of the data:
function submitbutton(pressbutton) {
...
<?php endif; ?>
submitform( pressbutton );
parent.$('sbox-window').close();
}
}

http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity
That link is the fix that I was looking for - this question was originally aimed at the K2 Component for Joomla.
Myself and another person were able to resolve the issue by writing some code of our own. In that thread as well as the one linked in the replies, a solution is arrived upon.
EDIT: A request was made to post the solution here, so here's a short summary
If you have users creating articles from the front end and you want the 'save' button to close the model box window that pops up when they add or edit an article - just follow the steps below to achieve this:
*Note: there are a few other fixes that work to close the box, but not refresh the page - this does both.
The key is passing an extra parameter through the URL that gets created when the user clicks "Save", then we just check to see if that parameter (which I will call 'step') exists - if it does, we refresh the page.
Lets follow along, first we must add this parameter to the URL created -
Open the item.php file located at:
Yoursite->administrator->components->com_k2->models->item.php
On or around line 646 - you will see some text that resembles:
case 'save':
default:
$msg = JText::_('Item Saved');
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&tmpl=component';
else
$link = 'index.php?option=com_k2&view=items';
break;
So what we need to do is add our parameter to that URL so it will look like this (remember I called the parameter 'step', and will be setting it =1) - the code will now look like this:
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&step=1&tmpl=component';
Now when the user clicks 'save' the parameter 'step' is getting passed along, and when the form reloads to show the user their information they had entered, step=1!
So then we have to add the php to check for that - that's simple enough:
Open the form.php file located at:
Yoursite->components->com_k2->views->item->tmpl->form.php
In there you can see where the form actually begins (on or around line 249), what we want to do is just add a little bit of php that checks to see if our 'step' parameter is equal to 1. If it is - we'll refresh the parent page using some javascript, that will automatically close the model box and cause the 'item saved' text to display to the user letting them know what happened.
The existing code looks like :
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<table class="toolbar" cellpadding="2" cellspacing="4">
When finished it will look like this:
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<?php if (JRequest::getInt('step')=='1') { ?>
<script language="javascript">
var XHRCheckin = new Ajax('index.php?option=com_k2&view=item&task=checkin&cid=<?php echo $this->row->id; ?>', {
method: 'get'
});
dummy = $time() + $random(0, 100);
XHRCheckin.request("t"+dummy);
parent.$('sbox-window').close();
window.parent.location.reload();
</script>
<?php } ?>
<table class="toolbar" cellpadding="2" cellspacing="4">
That checks to see if 'step' is =1. If it is - it runs javascript to refresh the parent window - closing the box and refreshing the page automatically. It also checks in the article on the backend.
This ensures the easiest possible thing for the user (i.e. they don't have to click 'back' and 'refresh' which is extremely counter-intuitive) and gives the front end user a back-end experience.
I hope this helps people - it took me a LOT of chasing things in the wrong direction before I thought of this solution.
I'm pretty saddened the developers never helped with something that's affected so many people, but oh well - problem was solved!

Try window.location.reload
You'll also want to get rid of the "return false;" from your onclick handler. That may prevent the page from refreshing. Also in general, put any "return" statements from within the event handler function.

I think you're looking for
parent.location.reload();
Incidentally, you don't actually need to close the iframe - once you reload the parent page, it'll be gone anyway.

Check out jQuery fancyBox.
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
It' has a "Reload page after closing", function.
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});