okay so on my home page i'm doing a user name and password check and then im using jquery document.location to send you to a logged in page say secure.php.... while this works it sends you to secure.php first and then images start loading ... how can i do it in such a way that it loads the entire page and then send you to secure.php
example : -
$.ajax ({
url: loginCheck.php,
type: 'POST',
data: username + password ,
success: function (check){
if(check==1)
document.location= /loginpage/secure.php
else alert(invalid username or pass)
}
});
Edit: I'm replacing my entire question now that I understand what you are trying to do. In secure.php, put all of your code in a containing div, something like this:
<body>
<div id="contentContainer">
<!-- content goes here -->
</div>
</body>
Set a style for #contentContainer to be hidden:
#contentContainer {
display: none;
}
Add a window.onload handler to show the div. Unlike onready, onload isn't called until all of the content has loaded including images.
$(window).load(function() {
$("#contentContainer").show();
});
You may want to do the same thing in reverse to a "loading" div with a message that says "loading...". Ie, initially display it, and hide it in the onload handler.
Edit: You can speed up the loading of the page by pre-loading the images in a hidden div in the previous page.
Home.php
<div class="preloader">
<img src="..." />
...
</div>
.preloader {
display: none;
}
Secure.php should load using the cached images.
...this strikes me as highly unsecure, but oh well.
Unless you build a metaframework in jQuery where all page loads are performed in a "shell" and then displayed only when ready to render, the answer is, I'm pretty sure, you can't.
Pages have a definite life cycle. jQuery and AJAX kinda blur the line a bit, but a page load is a singular event that controls the scripts. Loading the page would make the script you were using to load the page go away.
Related
I'm currently learning PHP through a real website project and want to use Ajax calls to change sections of the website.
CODE SAMPLE
myproject.js
$(document).ready(function() {
$("#inventory").click(function() {
$.ajaxSetup({
url: "sectionhandler.php?section='inventory'",
type: "get",
dataType: "html"
});
$.ajax().done(function(html) {
alert(html); // This works!
$("#section").html(html); // This doesn't work.
$("#section").append(html); // This neither.
});
});
});
inventory.html
<table><tr><td>Hello world with AJAX!</td></tr></table>
sectionhandler.php
<?php echo file_get_contents( 'inventory.html' ); ?>
menu.html
<a id="inventory" href="">Inventory</a>
index.php
<div id="menu" class="content"><?php echo file_get_contents( 'menu.html' ); ?></div>
<div id="section" class="content"></div>
RELATED ARTICLES FOUND AND READ AND TRIED
XMLHttpRequest won't work in IE 7/8 but works in other browsers
jQuery.ajax()
jQuery.ajaxSetup()
.append()
jquery .html() vs .append()
Can't append HTML code into one div by using jQuery
Add Html to Div with effect jQuery
Use append() to add text/html to an element with jQuery
And there are many many more...
RESULT
When I click on the Inventory link contained within menu.html and displayed through index.php, the jQuery code executes just fine. I get the result from the server while displaying the right content from inventory.html in the alert().
However, when I come to either set the innerHTML to the <div id="section" class="content"></div>, I can't seem to be able to get the expected result. The background of the page seems to flash, though not supposed to as per Ajax definition, and the content of my XMLHttpRequest.responseText never get displayed.
The closer I got to make it work was when I was double-clicking on the Inventory link, so that after the first "flash" from the page background, it showed the content of my section.
I have tried multiple ways using classic Javascript with an onclick element on my <a> tag, I have tried with document.getElementById("section"), though getting the right element, I was not able to show my content on the page.
Any thoughts are welcome!
Thanks in advance ! =)
With all chance, you need to prevent browser default behavior:
$("#inventory").click(function(event) {
event.preventDefault();
...
});
Notice the event parameter added to the click handler.
By the way, you HTML response is invalid - a <table> should contain a <tbody> element wrapping any <tr>s.
As requested. A more simple solution
$("#section").load("sectionhandler.php?section=inventory");
jQuery .load()
I have a page set-up, with several divs.
For now all we need is
<div id="main">...</div> & <div id="sidebar">...</div>
Each div has code such as:
<?php include("page.php") ?>
The main div does all the work, and includes a JavaScript function. E.g. at the moment the user can click a button to remember an item displayed in a table.
Am I able to only reload the sidebar instead of the whole page when the user calls this function?
I am posting the function here, and all I need now is to be able to refresh the sidepanel and its included php files if that is possible? I assume something along the lines of this could do the job? or am I wrong? load("#sidebar")
function saveToFavorites(code)
{
$.ajax({
async:false,
type: "POST",
url: 'formPostsUser.php?reqtype=addToFavorite',
data:'coursecode='+ code,
success: function(data)
{
$('.result').html(data);
if(data != "")
{
alert(data);
load("#sidebar")
}
}
});
}
Kind regards
Alex
Happy about any and every reply and hint ;)
First thing
<div="sidebar">..</div>
The above markup is wrong HTML. You should give the sidebar as the value of your properties such as id or class
<div id="sidebar">..</div>
Loading the Sidebar content
You can use jQuery ajax to load content of this div using jQuery load method like this
$(function(){
$("#sidebar").load("yourPHPPageToReturnSideBarContent.php");
});
Assuming yourPHPPageToReturnSideBarContent.php is the PHP page which renders the HTML Markkup for the sidebar. Note that this will load the content on the document ready event.
Loading the side bar content on an event
If you want to load it on a purticular event like a button click you can do it like this
$(function(){
$(document).on("click","yourButtonId",function(){
$("#sidebar").load("yourPHPPageToReturnSideBarContent.php");
});
});
The above script will load the side bar content on a button click. The button's id is e "yourButtonId" in this example.
Note that i used jQuery on here to bind the function because it will take care of current element and future element in case if you want to load the markup which contains the button dynamically.
I have recently installed Simple Mailing List 2 (currently in beta) and I have got everything to work so far. The main thing that was left for me to do was to make a custom php page which the signup form redirects to once submitted. The content that the page shows is based on what the user enters in the email field and returns one of three results:
an error message if the email syntax is incorrect.
a custom message if the user has subscribed telling them to check their email.
a custom message if the user has chosen to unsubscribe.
That's the background out of the way. Now what I intend to do is show a popup window that includes the contents of the redirected php page (ie. one of the three results) instead of going to a new page. Is it possible to do this a css popup box so I don't have to open up a new window?
Thankyou
Adam
You can use JavaScript to send an ajax request to the PHP page that will do the calculations, the result will then be sent to your "window" content and then you show the window to the user
You're mixing metaphors. CSS is just a presentational technology that you use to determine the style of something. There is no such thing as a "css popup box".
What you want to do is have an HTML element (likely a div) that contains the information you intend to show, initially set to not be visible (you use CSS for this with the display:none; style). What you're describing is essentially an AJAX interaction that uses Javascript to parse the contents of the form, send data to the server to be evaluated, and return a message to be displayed (without triggering a postback/going to a new page). That Javascript would also handle the CSS part of setting the display of the HTML element to true.
This is a fairly common scenario, so you should be able to find snippets online.
...but here's a super dumb example
<html>
<head>
<title>AJAX Test</title>
</head>
<body>
<form action="#">
<input type="text" id="enterStuff" />
</form>
<div id="response" style="display:none;">
<p id="message">Put stuff in me</p>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
registerEventListeners();
});
function registerEventListeners(){
jQuery("#enterStuff").change(getData);
}
function getData(){
jQuery.ajax({
type : 'POST',
data : {
stuff : jQuery("#enterStuff").val(),
},
url : "http://localhost/myprocessor.php",
success : showCool,
complete : updateDisplay
});
}
function showCool(data, textStatus, jqXHR){
var selector = jQuery("#message");
selector.val(data)
}
function updateDisplay() {
jQuery("#response").show();
}
</script>
</body>
</html>
Then your myProcessor.php would have to read the value of the variable, do some logic, and echo a response.
You could use an <iframe> as an in-document 'pop-up', you just set the target of the form to the name/id of the iframe. (You can use some JavaScript to only show the iframe once the form is submitted.)
I need a progress wheel to show while a lot of database and 3rd Party cURL queries are being made while the user waits.
Should the progress wheel show by itself right away, or should I show it once the page template (but not content) has loaded in?
Should I show a progress wheel until the page's HTML/javascript is done loading, or when the PHP is done loading?
If you could show in raw code how most people do this, that'd be great. I'm using jQuery and this is a PHP site.
show progress bar until, php response(returned value may be HTML one) is not loaded into javascript.
"Should I show a progress wheel until
the page's HTML/javascript is done
loading, or when the PHP is done
loading?"
Yes to this Approach
Once loading is complete, hide loading using jquery and put the content in to container class.
<div class="loading">
</div>
<div id="container">
</div>
$('.loading')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
This is a very common technique and the process is fairly standard. You'll want to show the graphic only when a request is about to be made. This means setting the graphic to display none in your CSS. This is significantly better than using JavaScript for compatiblity and percieved performance reasons.
You can see here I've created a loading graphic, added in jQuery, and bound an async event to occur on an arbitrary click. The graphic is shown before the connection is made and then hidden when the request is completed. You use complete in case the response errors out.
<head> <style> .slider { display: none; }</style> </head>
<body>
<div class="slider"><img src="someslidergraphic.gif"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
jQuery(function($) {
// The animation slider cached for readability/performance
var slider = $(".slider");
// Arbitrary event
$("body").bind('click', function() {
// Show graphic before ajax
slider.show();
// Fetch content from PHP
$.ajax({
// Setings
...
'complete': function() {
// Hide during complete
slider.hide();
// Rest of code after request
...
}
});
});
</script>
</body>
I want to know how to get different login interface for my web without change to the URL name. Example
<ul>
<li>Login</li>
</ul>
If user click on the Login I want to make it display on Ajax popup. Just show the login & password form. I'm using ColorBox. Example Outside HTML (Ajax)
If user type http://domain.com/login/ that page will include header, footer and etc.
Let me know what to put in my login.php to make it to be different.
You don't need to put any changes to your http://domain.com/login (potentially). You just have to attach the colorBox plugin to the link. It handles the popup and the e.preventDefault() call so people won't get the popup and the page. It's usually best to give the links an Id or class (like I have below).
<ul>
<li><a class="loginlink" href="http://domain.com/login/">Login</a></li>
</ul>
$('a#loginlink').colorbox({href:"/yourLogin.html"});
Since you're using the Outside HTML example, you can do the above (replacing the filename with your actual HTML).
However, since it's not an incredibly huge piece of code to display a login form, you can include it in your page (but hidden) and pass this to the ColorBox plugin using the Inline Html example:
$('.loginlink').colorbox({
inline: true,
width: "50%",
href: "#loginBox"
});
An example of the inline HTML working: http://jsfiddle.net/jonathon/MHhNX/
Try to use URL parameters: http://domain.com/login/?ajax=1 for ajax, and http://domain.com/login/ for full page.
HTML:
Login
<script type="text/javascript">
function ajaxLogin () {
$.ajax({url: 'http://domain.com/login/?ajax=1', ... });
}
</script>
PHP:
if (isset($_GET['ajax']) && $_GET['ajax'] == 1) {
// ajax form
} else {
// full page
}
blur ,
You have to change your html a bit assuming that you are using jquery
give a class name for this
<a href="http://domain.com/login/" class="loginpopup">Login</a
$('.loginpopup').click(function() {
// construct your html here and show as popup , or you can use existing dialog boxes
return false;
});
Nothing would need to change in login.php. You'd need to add an onclick handler to your link however.
Take a look at jquery to help you out with this: http://api.jquery.com/click/