I am not sure if what I am trying to do is possible but here it is.
I have a header, inside that header is a php include for "login.php"
On "login.php" is a link that takes the user to "forgot.php".
What I would like to do is, instead of the user being taken to "forgot.php" is to just refresh the page with "login.php" include replaced with "forgot.php" or do some sort of content switch out, sort of like using an Iframe.
I dont want to bring the user to a new page, I just want to switch out the content displayed inside my header.
Thanks for any help you can provide, code samples appreciated.
If you are trying to accomplish this without reloading the page you will need to use AJAX.
If you want to just keep the login.php you can perhaps do something like:
link
with php something like
<?
if ( isset($_GET['p']) && $_GET['p']=="forgot") {
include('forgot.php');
} else {
include('login.php');
}
PHP is parsed in it's entirety before the page is displayed in a user's browser, therefore, things such as onclick() or onsubmit() that are featured in JavaScript (a client-side language) are not available in PHP.
There would be a few solutions possible:
1) Use AJAX to submit a query to the server and replace the HTML content on the page with the result.
2) As you mentioned, use iFrames.
3) Have a hidden <div> on your login.php page that contains the HTML for forgot.php, and use a simple JavaScript onclick() method to swap the page contents. In this case, both "pages" would actually all be in the same file of login.php.
I can think of two things:
What I would do, assuming that the differences between your login.php and forgot.php aren't too different because you don't to change the page, is to put the html for the forgot.php just below the html for the login.php and hide the login.php html and show the forgot.php content.
example:
<div id = "login">
<!-- Login HTML -->
</div>
<div id = "forgot" style = "display:none" >
<!-- forgot password HTML -->
</div>
<input type="button" value="Forgot Password?" onclick="forgot()" />
Javascript:
function forgot(){
document.getElementById('login').style.display='none';
document.getElementById('forgot').style.display='block';
}
Otherwise, you could use an ajax call to the page and insert the necessary elements. This would create a noticeable pause.
You can't change the include statement from javascript because the script was already executed by the time you see your page in the browser.
Use ajax to dinamically change the content of the page without refreshing.
If you're using jquery the code would be pretty simple:
<script type="text/javascript">
$(document).ready(function() {
$('#link').click(function() {
$.get('script.php', function(data) {
$('#divOfContainer').html(data);
});
});
});
</script>
<div id="divOfContainer"><!-- the content to be fetched with ajax will be put here --></div>
Link
Related
I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.
I have PHP code like this: (for signing out - located in a php page together with other php handlers for different functions and this file is included in pages like index.php or other relevant pages.)
if(isset($_POST['signout'])) { // logout button
// Clear and destroy sessions and redirect user to home page url.
$_SESSION = array();
session_destroy();
// redirect to homepage (eg: localhost)
header('Location: http://localhost/index.php');
}
I normally use a <form action="index.php" method="post"> where the function is currently included and <input type="submit" name="signout"> for such things but this time i would like to use an anchor tag like:
<a href="" >Sign Out</a> for signing out.
Would anyone be kind enough to show an example code that will trigger a submit that will be handled by the given PHP code above.
Either a jQuery or Javascript solution would do. I would just like to see a complete example on how this works.
There's good reason for using a POST for submitting authentication tokens which usually commences or alters the session state - but these don't really apply to the problem of closing the session - why not just just trigger this via a GET?
But if you really must do a POST, and you really must do it via a a href (rather than styling a submit button) and you really must do it via javascript (which will break if the client has javascript disabled) then...
<script>
function sendForm(formId)
{
if (document.getElementById(formId).onsubmit())
document.getElementById(formId).submit();
}
<script>
<form id='logout'>
<input type='hidden' name='signout' value='1'>
</form>
logout
My current index.php page format is as follows:
<?php include ("header.php") ?>
Here is the page content
<?php include ("footer.php") ?>
I have a search form within header.php which actions search.php, search.php is the same format as above. After clicking submit search.php takes a little while to load due to its contents. I would love to use ajax to substitute the index content with the search content, displaying an image (loading.gif) whilst the search contents load; as I've seen other websites.
This is basically so my visitors know the page is in-fact loading and they need not click the submit button again lol.
So seeing as I have no real knowledge of ajax I'd very much appreciate some direction, any help would be much appreciated :)
Well I've been playing around and found this solution.
<script type="text/javascript">
function ajax_request() {
$('#content').html('<img src="images/ajax-loader.gif" />');
$('#content').load("search.php");
}
</script>
The first line in the ajax_request() function sets the html of <div id="content"> to the loading image, the second line then loads the content from search.php into the div.
To trigger the function I added onclick="ajax_request()" to my submit button.
I found the image wasn't showing at first due to the AJAX request being completed before the image loaded, so I used pre-loading for the image so it appears immediately from the cache. I did this using purely css by adding #preload { display: none; } to my main stylesheet and then inserting that div with the image before <div id ="content"> like below.
<div id="preload">
<img src="images/ajax-loader.gif" width="1" height="1"/>
</div>
Hope this helps someone else in the future :)
It can be easily done using some jQuery.
$('#yourForm').submit(function()
{
// Put your loading code here...
}
I wish to do something iframe-like with my div i've got going here.
Basically, i've gotten as far as making links change the content of the div like so:
Open file
This works pretty well, sadly though, if i make another link inside that to change the content back to the first file, the server gets stuck in an infinite loop and crashes.
I really am just trying to find some way to dynamically change content, and to fetch that content from a file using php. If my way of approaching this is completely ludicrious, i do appreciate suggestions.
I think the best and easiest way is to use jQuery:
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").load("file.php");
return false;
});
</script>
Open File
<div id="maincontent"></div>
This script will load content of file.php into selected div using ajax call.
This looks like a good place for jQuery's load() function. Just give the div an id, add a click event to the link and have the event load the contents of your php script into the div. Maybe append a class (e.g., 'updated') to the div when you load the new data. That way your click event can check is('.uploaded') on the div and switch it back when the link is clicked again.
Put divs inside #maincontent that hold the different content that you want. Give the divs IDs. When the link is clicked hide/show the appropriate content
This is a similar thread: Tabbing in PHP?
Firstly, I'd suggest not building the event handler like that. For one thing you'll have to be really careful you correctly escape the content. I would do it this way:
<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>
and then manipulate those with Javascript. You could either set the innerHTML or simply hide/show the relevant divs. So:
<script type="text/javascript">
var content = 1;
function swap_content() {
document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
if (content == 1) {
content = 2;
} else {
content = 1;
}
}
</script>
Open File
Alternatively you could just hide/show them as appropriate rather than copying content.
Lastly, while not required this is much more trivial to do in a Javascript library like jQuery.
To me it sounds like you should use AJAX. On the clickevent (which you also shouldn't bind with inline code), you would instead load the content with an XHR request.
To make life easier for you I would recommend looking at a JavaScript Library, where my personal favorite would be jQuery (www.jquery.com). To achieve what you are trying to do you would just do:
$('#id_to_the_a_tag').click(function() {
$("#maincontent").load("file.php");
return: false;
});