I have a simple grid showing some information about the items in the database. this is index.php. When the user wants to edit one of the records they click on the link which opens another page (edit.php). When they are finished editing I would like to find a way to refresh the index.php so it has the updated info. Is there a way to do this?
I found this and modified it, seems to work well.
function onFocus(){
location.reload();
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
For refresh parent window from child window using javascript
opener.location.reload();
function onFocus(){
location.reload();
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
Related
I am working on making a dynamically loaded website using some php code to swap out content from various other files. While on top of that I am using jquery to beautify this swap out.
Relevant PHP:
<?php
// Set the default name
$page = 'home';
// Specify some disallowed paths
$disallowed_paths = array('js.php','css.php','index.php');
if (!empty($_GET['page'])){
$tmp_page = basename($_GET['page']);
// If it's not a disallowed path, and if the file exists, update $page
if (!in_array($tmp_page, $disallowed_paths) && file_exists("{$tmp_page}.php"))
$page = $tmp_page;
}
// Include $page
if(!file_exists("$page.php")){
$page = 'home';
}
else{
include("$page.php");}
?>
Relevant jquery:
$(function (a) {
var $body = $('body'),
$dynamo = $('.dynamo'),
$guts = $('.guts');
$body.fadeIn('slow');
if (history.pushState) {
var everPushed = false;
$dynamo.on('click', 'a', function (b) {
var toLoad = $(this).attr('href');
history.pushState(null,'',toLoad);
everPushed = true;
loadContent(toLoad);
b.preventDefault();
});
$(window).bind('popstate', function () {
if (everPushed) {
$.getScript(location.href);
}
everPushed = true;
});
} // otherwise, history is not supported, so nothing fancy here.
function loadContent(href) {
$guts.hide('slow', function () {
$guts.load(href, function () {
$guts.show('slow');
});
});
}
a.preventDefault();
});
What is happening is when I link to a page using ?page=about it will work but it will instead of just swapping out the content it will load the entire page including the content inside the dynamically loaded div.
If I were to link straight to about.php it would work beautifully with no fault whatsoever, but anybody who wanted to share that link http://example.com/about.php would get just the content with no css styling.
If I were to change the jquery in "loadContent" to:
$guts.load(href + ' .guts', function () {
EDIT 1:
, ' .guts'
to
+ ' .guts'
It would then work but any script, java, jquery, or the like would not work because it gets stripped out upon content load.
check out http://kazenracing.com/st3
EDIT 2:
It also seems to be that the site does not work properly in the wild either.
No background and none of the icons show up, but it still gets the general problem across.
I can fix that myself, it will just take some time. For now my focus is on the recursion problem.
EDIT 3: Site no longer needs to be worked on, problem never solved but we are letting that project go. So the link no longer is a valid URL.
In my website authors (users) can mark posts as favorite.
It works this way:
if ($favinfo == NULL || $favinfo == "") {
$favicon = "ADD"; .
}
else {
$favicon = "REMOVE";
}
Its suposed to look dynamic, it works, when user click ADD, it adds the post to his favorites and reload the page with the REMOVE link.
The problem is its not really dynamic it reloads all the page.
How can i only reload that link (wich is inside a div)?
I know i have to use ajax, jquery, etc, but i tried some examples found here in S.O. but no success.
$('a').on('click', function(e){
// the default for a link is to post a page..
// So you can stop the propagation
e.stopPropagation();
});
Including this stop you page from reloading your entire page
If you want it to be dynamic, you will need to use AJAX. jQuery has ajax support which makes this really easy. If you are not familiar with ajax or javascript you should read up on it first.
PHP
if ($favinfo == NULL || $favinfo == "") {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"add\" href=\"".$siteurl."/author/favorites.php"\">ADD</a>"; .
}
else {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"remove\" href=\"".$siteurl."/author/favorites.php"\">REMOVE</a>";
}
JavaScript
$('a.fav-btn').on('click', function(e){
var $this = $(this), // equates to the clicked $('a.fav-btn')
url = $this.attr('href'), // get the url to submit via ajax
id = $this.attr('data-id'), // id of post
action = $this.attr('data-action'); // action to take on server
$.ajax({
url: url+'?'+action+'='+id
}).done(function(){ // once favorites.php?[action]= is done...
// because this is in .done(), the button will update once the server has finished
// if you want the link to change instantly and not wait for server, move this outside of the done function
if(action === 'add'){
$this.attr('data-action', 'remove').html('REMOVE'); // update the button/link
}else{
$this.attr('data-action', 'add').html('ADD');
}
})
return false; // prevent link from working so the page doesn't reload
}
If you are okay with using JQuery, you have some tools to accomplish this.
Have a structure / method of identifying your links.
You can have a click() listener on your add button that will call a JQuery $.post(url, callback) function.
In that callback function, you can have it update the corresponding DIV (that you defined in #1) with a 'remove' link. i.e if you identify the DIV by ID, you can retrieve it via $('#id') and then update that object.
The same idea can apply with the 'remove' link that you add.
So, generally...
<button id="add">Add</button>
<div id="links"> ...</div>
<script>
$('#add').click(function() {
$.post('your url',
function(data) {
var links = $('#links');
// update your links with 'remove' button, etc
}
);
});
</script>
hey guys I'm having a problem with an upload form I've made. It works in Firefox and IE but it wont work with Safari and Chrome so I assume it's a webkit problem.
First I run the php form and change the target to an iframe. Then once it's finished uploading I get PHP to echo a div iwth a statement true/false back into the iframe.
The problem i'm having is that PHP isn't echoing the statement into the iframe.
here's the code i've got:
in the php:
//do all the appropriate checks etc and if it's uploaded do the following
if ($success == true)
{
echo '<div id="result">success</div>';
} else {
echo '<div id="result">error</div>';
}
then in my javascript I do a few checks to see if the forms filled out etc and then if all is well I call submit() first and then I call iframeCheck()
function submit()
{
//change the target of the upload form to upload to the iframe.
$('#contactForm').attr('target','uploadIframe');
//submit the iframe
$('#contactForm').submit();
//fade in the sending message
$('#sendingMessage').fadeIn(200);
}
function iframeCheck()
{
//get the contents of iframe
var elem = $('#uploadIframe').contents().find('div#result');
var result = elem.html();
//if there's nothing in it, upload hasn't finished...
if ( elem.length <= 0)
{
//check it again in 2"
clearTimeout(timer);
var timer = setTimeout(iframeCheck, 2000);
} else if (result =='success'){
//if it contains a success message, display the success message
$('#sendingMessage').fadeOut(200);
$('#successMessage').fadeIn(500);
inputButton.removeAttr('disabled');
} else {
if (result == 'error')
{
//otherwise display the error message
$('#sendingMessage').fadeOut(200);
$('#failureMessage').fadeIn(500);
inputButton.removeAttr('disabled');
}
}
}
It works fine in ff and IE but as i said chrome and safari wont echo into the iframe.
Thanks for your help folks!
Is the iFrame URL the same domain as the general homepage? Perhaps it has something todo with cross domain policy.
Thanks heaps for your guys help. John it was a problem with my javascript. I was disabling the send button as soon as it was clicked. This worked fine except that webkit didn't like it so what I had to do was add onsubmit="document.getElementById('submitButton').disabled=true;" and that works fine now.
Cheers
I have several divs that a user can Minimize or Expand using the jquery toggle mothod. However, when the page is refreshed the Divs go back to their default state. Is their a way to have browser remember the last state of the div?
For example, if I expand a div with an ID of "my_div", then click on something else on the page, then come back to the original page, I want "my_div" to remain expanded.
I was thinking it would be possible to use session variables for this, perhaps when the user clicks on the expand/minimize button a AJAX request can be sent and toggle a session variable...IDK..any ideas?
There's no need for an ajax request, just store the information in a cookie or in the localstorage.
Here's a library which should help you out: http://www.jstorage.info/
Some sample code (untested):
// stores the toggled position
$('#my_div').click(function() {
$('#my_div').toggle();
$.jStorage.set('my_div', $('#my_div:visible').length);
});
// on page load restores all elements to old position
$(function() {
var elems = $.jStorage.index();
for (var i = 0, l = elems.length; i < l; i++) {
$.jStorage.get(i) ? $('#' + i).show() : hide();
}
});
If you don't need to support old browsers, you can use html5 web storage.
You can do things like this (example taken from w3schools):
The following example counts the number of times a user has visited a
page, in the current session:
<script type="text/javascript">
if (sessionStorage.pagecount) {
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else {
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
Others have already given valid answers related to cookies and the local storage API, but based on your comment on the question, here's how you would attach a click event handler to a link:
$("#someLinkId").click(function() {
$.post("somewhere.php", function() {
//Done!
});
});
The event handler function will run whenever the element it is attached to is clicked. Inside the event handler, you can run whatever code you like. In this example, a POST request is fired to somewhere.php.
I had something like this and I used cookies based on which user logged in
if you want only the main div don't use the
$('#'+div_id).next().css('display','none');
use
$('#'+div_id).css('display','none');
*Here is the code *
//this is the div
<div id = "<?php echo $user; ?>1" onclick="setCookie(this.id)" ><div>My Content this will hide/show</div></div>
function setCookie(div_id)
{
var value = '';
var x = document.getElementById(div_id);
var x = $('#'+div_id).next().css('display');
if(x == 'none')
{
value = 'block';
}
else
{
value = 'none';
}
console.log(div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/")
//alert(x);
document.cookie = div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/";
}
function getCookie(div_id)
{
console.log( div_id );
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==div_id)
{
return unescape(y);
}
}
}
function set_status()
{
var div_id = '';
for(var i = 1; i <= 9 ; i++)
{
div_id = '<?php echo $user; ?>'+i;
if(getCookie(div_id) == 'none')
{
$('#'+div_id).next().css('display','none');
}
else if(getCookie(div_id) == 'block')
{
$('#'+div_id).next().slideDown();
}
}
}
$(document).ready(function(){
get_status();
});
Look about the JavaScript Cookie Method, you can save the current states of the divs, and restore it if the User comes back on the Site.
There is a nice jQuery Plugin for handling Cookies (http://plugins.jquery.com/project/Cookie)
Hope it helps
Ended up using this. Great Tutorial.
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
I'm setting the URL after the hashmark with a jquery click event. The URL is getting set properly but when I use the browsers back button it doesn't take me to the previous page.
Before my click event the URL looks like this:
http://example.com/menu.php?home
My click event looks like this:
$('#visits').click(function() {
$('#main').load("visits.php?type=1&view=1", function () {
location.href = "#visits";
});
return false;
});
My URL now looks like this:
http://example.com/menu.php?home#visits
It seems as though menu.php doesn't get called with the browsers back button.
Any idea what I'm missing?
You could code something like this:
var _hash = '';
function myHashChangeCallback(hash) {
// handle hash change
// load some page using ajax, etc
}
function hashCheck() {
var hash = window.location.hash;
if (hash != _hash) {
_hash = hash;
myHashChangeCallback(hash);
}
}
setInterval(hashCheck, 100);
Use the onhashchange event of the window, to check if the hash changes. This is getting called when you hit the back Button of your browser.
$(window).bind('hashchange',function() {
if (location.hash != '#visits') {
//Code to revert the changes on the page
}
}
Older versions of IE don't support hashchange, so you have to cheat by using setInterval to poll a few times a second and check if it's changed.
if($.browser.msie && $.browser.version < 7){
setInterval(function(){
if(window.location.hash != window.lastHash){
hashChangeHandler();
window.lastHash = window.location.hash;
}
}, 100);
}
else{
$(window).bind('hashchange',function() {
if (location.hash != '#visits') {
hashChangeHandler();
}
}
}