I have a form that when I sumbit loads a new section of the form, but what happens is the page loads and sends me back up to the top of my page so I have to scroll all the way back down to where the form is.
Is there a way I can keep the page in the same section it is in or maybe have it load next to one of my sub-header text title I show?
This is the button I have showing:
echo $this->Form->submit("View Now");
But how could I get this to load next to this sub-header text below instead of going back to the top of the page?
<h2><?php __("Information Results");?></h2>
Thank you!
try this code:
echo $this->Form->submit("View Now",array('id'=>'contact_btn'));
<div id='result'><?php __("Information Results");?></div>
<script>
$.ajax({data:$("#contact_btn").closest("form").serialize(),
dataType:"html",
success:function (data, textStatus)
{$("#result").html(data);},
type:"post",
url:"\/yourproject\/controller\/action"
});
</script>
The Ajax is the proper way, but you could also use anchors. For example you can make your form action to be this way:
<?php echo $this->Form->create(
'YourModel',
array(array('#'=>'subform')
);?>
Then above the h2, you should put:
<a name="subform"></a>
<h2><?php __("Information Results");?></h2>
And when submit the form it will be positioned exactly where you wanted. But it's an alternative of the Ajax. I would do it with Ajax.
The bonus (if it could be counted as such) your logic is in the same action.
Related
Do you know a way to display a php result inside a div dynamically, without refreshing the page?
For example, we have 2 divs: one on the top half of the page and one on the bottom of the page. The top one contains a form with 3 input fields. You type some values inside, then press a button. When you press the button, the bottom div displays the values without refreshing the page.
You can't do it with pure PHP because PHP is a static language. You have to use Javascript and AJAX. I recommend using a library like Zepto or jQuery to make it easy to implement like this:
<form>
<input name="search" />
<input type="submit" />
</form>
<div id="div2"></div>
<script>
// When the form is submitted run this JS code
$('form').submit(function(e) {
// Post the form data to page.php
$.post('page.php', $(this).serialize(), function(resp) {
// Set the response data into the #div2
$('#div2').html(resp);
});
// Cancel the actual form post so the page doesn't refresh
e.preventDefault();
return false;
});
</script>
You can accomplish it using AJAX. With Ajax you can exchange data with a server, make asynchronous request without refreshing the page.
Check this out to see how it can be implemented using Jquery:- http://api.jquery.com/jQuery.ajax/
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.
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.
I am working with a dynamically generated page written in PHP. The divon the page contain contents listed FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.
Right, so I was able to find a solution that refreshes the entire page on submit
using
parent.location.reload (true);
to refresh the entire parent page. But, that causes a browser prompt
that is confusing to users and a bit of over kill as I really only
need the information edited to refresh.
how can I get just a single div to refresh on submit as
apposed to the entire page??????
You need to submit the form through AJAX. Since your using something that uses jQuery, you can use it to do it.
Here you can find a tutorial on how to do it
I think the best way is loading page fragments with .load().
something like,
$('#pageNeedToBeRefreshed').load('test.html #pageNeedToBeRefreshed');
User ,
It should be pretty easy
have a div place holder like below
<div id="dataToRefresh"> </div>
Once you close the dialog, have a event handler...
$('dataToRefresh').html('testing'); // give your data here
it should upate the parts of the page
let me know if you need anything else
please go thruogh .html api for more info
http://api.jquery.com/html/
Suppose you have the below div to refresh:
Then write
$("#dataToRefresh").load();
Might it will be helping you
Instead of using submit in html you can submit your form using the ajax -
$('#formid').submit(function(){
var data = $(this).serialize(); //this gives you the data of all elements of form in serialized format
$.ajax({
type: 'POST',
dataType:"json",
url: 'your url',
data: data,
success: function(data){
//replace the contents of the div you want to refresh here.
}
});
});
jQuery('#id_of_div').load('/url/to/updated/html');
See jQuery docs for load()