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...
}
Related
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 problem here, please help about this.
Let's say i have 2 page. 1st Page index.php and 2nd page is data.php
In index.php i have div and not have any text inside this div. Here my index.php script
<div id="confirm"></div>
<img border="0" src="choose.png" width="90" height="90" id="choose">
and second page i have image at data.php and when i click image at data.php page and class value will show inside at index.php page.
data.php
<img border="0" src="choose.png" width="90" height="90" id="choose" class="ThisItem">
And here my js script.
$(document).ready(function() {
$('#test').hide();
$("#cChooseImg").click(function() {
$("#test").html(' Change Item.');
alert('Click OK');
});
});
The point is, in data.php i have one image and when click i want image class will show inside div at index.php. How i should change in js script? because this section $("#test").html(' Change Item.'); i don't know what should i write down.
Maybe you can help me?
Regards And Many..many thanks
in modern browser you can use data storage
here : http://api.jquery.com/category/miscellaneous/data-storage/
but if i have to do this i will turn into server side
something like chat scripts
after first click you send data to server and in second file you will get data from server with an interval and after get the click signal it will change the class!...
I'm working on comments for posts on my website. How to create a button in javascript that will open iframe window with comments when user clicks on that button? Something like Facebook have with their comments on posts. If there is a way to create this with other language I would like that you write it. I just wrote javascript because I heard that you can do that in javascript. If there is a more elegant and/or better way feel free to write it.
So below every posts I would add a button and when user clicks on it, it should open something like this:
<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>
And is there a way that iframe window loads only when you click on the button, not in the same time as page on which are posts? For example, if I have 10 posts on one page, and comments for all 10 posts are loading at the same time as the page with posts, it would slow down a page a lot.
Also do you know how to adjust iframe window size to amount of posts, so that if a post have 1 comment, window size is 100px, and if a posts have 5 comments, window size is 500px?
I know that Facebook have something much better than this for their comments, so if you know something better than my idea, please feel free to share it.
A trivial solution to your question would be..
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'></div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").html('<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>');
});
</script>
</body>
</html>
Or you can load all the comments onto a div element, and by default have that element hidden, and then once clicked on a button, you can show it. That solution could be
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'>
comment 1: ----
comment 2: -----
</div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
Try using something like prettyPhoto:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
If you scroll down on that page you will see an example where the loaded window displays an iFrame. Very handy for creating semi-ajax-like functionality to a website. You can use pretty much any lightbox clone out there for something like this, but I have found that prettyPhoto is the most robust and has a decent amount of support out there. This does use jQuery to work as well as it's own javascript file to function, but it is minimal.
Hope this helps.
I would jquery .load, .post, .get or .ajax
under every article have a div class named comments and display none css on that div. when the user clicks the view comments button for that article, send a request to the server and ask for comments for that article id.
you will want to store the id of the article in an attribute of the view comments link so that you can pass the .load request the id of the article you want comments for.
<div articleid="5" class="view-com-button">view comments</div>
<div class="comment" articleid="5" style="display:none"></div>
$(".view-com-button").click(function(event){
$(".comment[articleid='$(this).attrib("articleid").load("comment.php", {( "idarticle" : $(this).attrib("articleid") )};
});
I am not ever sure this is possible but I know you guys will know the answer.
I wonder if it is possible to load the first div on a page into a different page.
Example:
This code is on "list.php"
<div class="message_details">
Some Content 1
</div>
<div class="message_details">
Some Content 2
</div>
I found this article and it works but it brings in all div's but I want to load only the first div.
Load content from external page into another page using Ajax/jQuery
Here is the code I have now that loads all divs
$(document).ready(function() {
$(".loader").load('list.php .message_details');
});
How can I load only the first div? Also is there any way to remove an img tag within the selected div?
Thanks everyone
Use the :first-child selector
$(".loader").load('list.php .message_details:first-child', function() {
$(this).find("img").remove();
});
Reference
simply echo the the div in the second page. Give each div an id, then echo that. (unless i am misunderstanding your goal)
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