hi i am a new programer
i want to replace the content of current php page from another php page using ajax without refreshing page.
the content to be replaced is in div's.
both pages (current and another) has same div's
HTML Div's are:
<div class="category-container">
<div class="category-image"></div>
<div class="category-desc">#<p>text</p></div>
<div class="rating5" >Editors' rating: </div>
<div class="category-download-btn">Download</div>
<div class="category-buy-btn">Buy</div>
</div>
can anyone tell me how i can do it. it will be a great help.
also can you provide me ajax code not jquery.
thanks.
Have a look at jQuery's load, the section on loading page fragments:
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted.
To get the div content on another page into an analogous div on the current page, use something like:
$('#content').load('other-page.php #content');
// ^ target div ^ same div on the other page
this is usual jquery.ajax call
function getVotes(id){
$.ajax({
type: 'get',
url: 'ay/templates/backend/_votes_partial.tpl.php',
data: 'charity_id=' + id,
success: function(data) {
$('#shadow').fadeIn('slow');
$('#popupContact').fadeIn('slow');
$('#content').html(data);
}
});
}
the simplest way would be:
$.get("pageurl",function(data){
$("yourdiv").html(data);
});
use jquery.ajax its easy... old way of making ajax calls was too much complicated, jquery made it easy,
you need to install jquery library,include it in ur head tag and go thorough following link for clear understanding, its much easy
Jquery.ajax
You're correct in assuming jquery is the way to go. I'm far from an expert, but this should help. The docs are straightforward.
Generally, jQuery follows the find something then do something approach.
Find something ---> watch for some action on some element (like changing a select box or clicking a link)
Do something ---> make an ajax call to the php page you want replace the current div with the new div
The jQuery documentation is here with an example at the bottom that shows exactly what you're trying to do http://api.jquery.com/jQuery.post/
Some other helpful jQuery commands for this task could be...
http://api.jquery.com/appendTo/
http://api.jquery.com/remove/
http://api.jquery.com/clone/
Hope this helps.
Related
The problem is this:
I have a simple, two fields form which I submit with Ajax.
Upon completion I reload two div's to reflect the changes.
Everything is working perfect except a jQuery plugin. It's a simple plugin that can be called with simple
function(){
$('.myDiv').scrollbars();
}
It's simple and easy to use, but it doesn't work on Ajax loaded content. Here is the code I use to post form and reload div's:
$(function() {
$('#fotocoment').on('submit', function(e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
}).error(function() {
});
e.preventDefault();
});
});
I've tried creating a function and calling it in Ajax succes:, but no luck. Can anyone show me how to make it work ? How can that simple plugin can be reloaded or reinitialized or, maybe, refreshed. I've studied a lot of jQuery's functions, including ajaxStop, ajaxComplete ... nothing seems to be working or I'm doing something wrong here.
If you're loading elements dynamically after DOM Document is already loaded (like through AJAX in your case) simple binding .scrollbars() to element won't work, even in $(document).ready() - you need to use "live" event(s) - that way jQuery will "catch" dynamically added content:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Source: jQuery Site
Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.
I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following example
<div class="holder">
<div class="scrollme">
<img src="http://placekitten.com/g/400/300" />
</div>
</div>
.....
$('.scrollme').scrollbars();
...
fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
$('.holder').html(fakedata);
$('.scrollme').scrollbars();
});
If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.
If it doesn't help, then try to come up with some more details about your HTML structure.
I want to thank everyone of you who took their time to answer me with this problem I have. However, the answer came to me after 4 days of struggle and "inventions" :), and it's not a JS or Jquery solution, but a simple logic in the file.
Originally, I call my functions and plugins at the beginning of the document in "head" tag, like any other programmer out here (there are exceptions also ).
Then my visitors open my blog read it and they want to post comments. But there are a lot of comments, and I don't want to scroll the entire page, or use the default scroll bars, simply because they're ugly and we don't have cross browser support to style that, just yet.
So I .post() the form with the comment, and simply reload the containing all of them. Naturally .scrollbars() plugin doesn't work. Here come the solution.
If I put this :
<script>$('.showcoment').scrollbars();</script>
in the beginning of my loaded document (with load() ), will not work, because is not HTML and it's getting removed automatically. BUT !!! If i do this:
<div><script>$('.showcoment').scrollbars();</script></div>
at the same beginning of loaded document, MAGIC .... it works. The logic that got me there I found it in the basics of javascript. If your script is inside an HTML element, it will be parsed without any problem.
Thank you all again, and I hope my experience will help others.
If I understand you correctly, try this:
var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');
$(function () {
$('#fotocoment').on('submit', function (e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
api.reinitialise();
}).error(function () {
});
e.preventDefault();
});
});
reinitialise - standart api function, updates scrolbars.
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'm currently working on a website and I would like to be able to do the following:
when clicking one of the links from the sideMenu the only thing I would like to change would be the content of my contentMain div and nothing else(page layout/design/etc)
Could anybody give me some general pointers on how I could achieve this in php?
Thank You in advance :D
This is a client-side change that cannot be accomplished using PHP. PHP is evaluated on the server-side, so once the page is loaded for the user, it has no control over what the user sees (unless you use client-side code to call PHP).
To accomplish this, you will need to use Javascript and/or jQuery.
Reference: https://developer.mozilla.org/en/JavaScript/
jQuery: http://jquery.org/
iFrame, frameset or AJAX all work for your case depending on what you are actually trying to achieve.
For AJAX calls (the most modern way out of the three that relies on Javascript) you can use a library such as jQuery.
http://api.jquery.com/category/ajax/
You can use ajax for this one. Using jQuery to detect the click on the link or use normal JavaScript onClick function. Then do the things like you want.
<a href="" id="my_link">My link<a>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#my_link').click(function(){
jQuery.ajax({
url: 'ajax page need to be called',
success: function(data) {
//do your operations on success
}
});
});
});
</script>
You can get more details on :
jQuery
jQuery Ajax
Hope this helps you
I have following code in my php page. These are two tabs Inbox and sInbox. When user clicks on them it refreshes whole page to go to other tab. Is there a way to make these tabs so that when user click on one of the tab there is no page refresh? When answering please provide full code example as i am a beginner.
<ul id="topTabs">
<li class="selected"> Inbox </li>
<li> sInbox </li>
</ul>
One of the simplest ways would be using jQuery UI tabs. You can find a nice detailed beginner-friendly tutorial here.
I wouldn't say that you need ajax to do this. Ajax is only needed when you want to load content of these tabs dynamically.
Do realize your tab-switching you can use jQuery or simply the style-property "display:block" resp. "display:none".
It's very hard to provide some code for your question (because you need to change your page structure) but as a hint, you need to use jQuery ajax or php ajax update panel (if there is something like this - I know there is one for ASP.NET) to refresh some parts of your page (instead of whole).
In the earlier case (jQuery) your links will not be redirection links and will have a click action associated to them which requests for page update using ajax.
see the link for examples of using ajax using jQuery.
You can do it easly using ajax:
$(document).ready(function() {
$("#topTabs li").click(function() {
var mode = $(this).find("a").attr("href");
$.ajax({
url: 'contentprovider.php',
data: {mode:mode},
success: function(data){
$('#tab1').html(data);
}
});
});
});
Where tab1 is the ID of the element wich may receive the content from contentprovider.php
More info on jQuery Ajax at jQuery Page.
gl
Paulo Bueno.
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()