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/
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.
Let's say I have 2 pages in a jQuery Mobile website.
Page1 - shows data from a database using inline PHP.
Page2 - inserts new data into the database.
The problem is that page1 is not updated when going back, after page2 adds something to the database. I can get it updated by pressing F5, but how can I achieve the same update using jQuery?
I think you're showing data in Page 1 using the pageinit event. This will fire only once and won't update your data every time you add new data.
You need to use pagebeforeshow event of Page 1 to get data from database. This way, new data will be brought every time, which is what you need. Here's a syntax :
$(document).on("pagebeforeshow", "#page1", function() {
//call to server
});
If you're not using pageinit, you must be using document.ready event to get data. Well, thats the way thats done. You must not use ready with jquery mobile. DOM ready will initialize the whole document which will make the ajax page change feature of jQM pointless & useless.
It was late last night and I missed that I should just get my inline php content using Ajax.
So this is how I solved it:
Moved everything contain dynamic content using PHP in a separate file.
Add an Ajax call to the bottom of the page that loads the PHP file as follows:
$(document).on('pagebeforeshow', function(){
$.ajax({
type: "GET",
url: "includes/db/ajax_show_php_content.php",
success: function(html) {
$("#page1").html(html); //Insert PHP content
$("#page1").trigger('create'); //Apply jQuery Mobile style to it.
});
});
Thanks to #hungerpain and #anglinb for their help in figuring this out.
I'm not extremely familiar with jQuery Moblie but here's what I found:
function refreshPage()
{
jQuery.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
}
I think the reloadPage to true should do the trick.
If that doesn't work, check out this answer: jQuery Mobile Page refresh mechanism
Hope this helps!
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
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.
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.