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.
Related
I am developing a web app that has some messages. In the menu, I have displayed the message number as follows.
<ul class="menu">
<li>Messages <span id="count" class="pull-right">3</span></li>
</ul>
On the other hand I have a php file that outputs only the message count. I want to update span#count using this php file on click of a button with class .jm-msg
I have jquery loaded on my page. As I am very new to AJAX and Javascript, I have absolutely no clue on how to do this. Can someone please guide me by providing sample code?
This is pretty easy:
setInterval(function(){
$.post("yoururl", function(resp){
$("yourspanid").html(resp);
});
}, 1000)
Your url needs to be set to the file where you load the data from
If you want to keep the span data uptodate simply use setInterval().
You should use setInterval over your whole $.post not just the function
This is a one-liner:
$('.jm-msg').on('click', function() {
$("#count").load('/getCount.php');
});
Documentation: http://api.jquery.com/load/
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.
Can I make an AJAX call immediately after loading a page? To be more specific, I have an ajax action on click of some html tag (say in page 1). Now when I come to the same page (page 1) from some other page (say page 2), (i.e.. on ready of the document) can I make that ajax call which is present in the onclick of that appropriate html tag? I am using PHP as server side script..
There were confusion on my question.. Let me explain more.
I have an phtml page where there are lot of ajax calls on click of various tags.
Lets say, tag1 has send-message functionality ajax call which on click loads a compose message part of html.
Similarly tag2 has photo display funcitonality ajax call which on click loads the photo display part of html.
Now I'm in page 2 which is a search result page Where I have a link for page 1. That link is send-message link. So now I have to come to page 2 and with compose message part html loaded. I want to load it via ajax which will be performed on clik of the send-message link (tag 1)in page 1. How to accomplish this? How will I inform to page 1 to load the compose message part of html through ajax?
you can call that function explain below
<script type="text/javascript">
function_name();
</script>
Im not sure what you want to achieve here but if you're asking if you could do AJAX on ready of the document, then i think you can..
Check this out in jquery
$(document).ready(function(e) {
$.ajax({
type:'POST',
url:g_site_path+'search/agentpopup',
dataType:'html',
data:data,
success:function(html){
$("#agentpopup").html(html);
}
})
}
$_SERVER['HTTP_REFERER']
Is the php data-feild that will tell from where the page request is coming (Ex. Page 2 has requested Page 1). Note that HTTP-Referer is by its very nature risky and can easily be spoofed. To test for document ready, you can use something like jQuery
$(document).ready(function() {
$.ajax('your_ajax_script.php', function(result) {
/* Do what ever you want to do of result*/
console.log(result);
});
});
In order to show you what I want to do you just have to visit gmail. When you click on the inbox, the url refreshes to this ?tab=mm#inbox and the only part of the page that refreshes is the big part where your e-mails are which google calls div.l.m . How is that possible? Are they using cache a lot or they are using a javascript command I'm not aware of?
What I want to do is, I have a page with two different tabs.
<div id="navcontainer">
<ul id="navlist">
<li id="active">Products</li>
<li><a id="prreq" onclick="show()" >Requests</a></li>
</ul>
</div>
<div class="container"></div>
When users go on eg. cart.php they are going to the first tab. When users click on the second tab a js function is triggered which calls the file cart.php?rq=r and the results are shown in the container div. (I know that at the moment I have post)
function show(){
var prstr= ".container";
var data= {
rq: "r"
};
$.ajax({
type: 'POST',
url: "cart.php",
data: data,
success: function(data1)
{
$(prstr).html(data1);
}
});
}
What I want is when the user refreshes the page to still be in the cart.php?rq=r and not having to click on the tab again.
I'd appreciate any help. if you need any more information please let me know
Thank you in advance.
They are simply accessing the hash component of the url via location.hash. When the hash changes, they must have some logic that determines which part of the page to refresh.
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()