The Question
How could I make it where when you pull <div id="content"> down, it does a function and shows a div at the top of the screen that says "Pull Down To Refresh"?
I know iScroll does this, but it won't work with what I'm trying to do. It only works with UL's.
Here is my HTML
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
</span>
</div>
<div id="content">
(There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>
<script>
$(function() {
var refreshCallback = function(loader) {
setTimeout(function(){
//loader.finish();
}, 1000);
};
var cancelRefreshing = function() {
};
$("#draggable").pulltorefresh({
async: true,
// event triggered when refreshing start
refresh: function(event, finishCallback) {
element = $(this)
setTimeout(function(){
alert("refresh");
// you must call this function if refreshing process runs asynchronusly
finishCallback();
}, 1000);
},
abort: function() {
alert("abort");
}
});
});
</script>
for full Demo Click Here
You can provide with iScroll plugin.
iScroll 4: http://cubiq.org/iscroll-4
Github Page: https://github.com/cubiq/iscroll
Demo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
try this
$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );
inside the function u can have the ajax call to load the content
$("#content").load("<something.php>");
that is on the whole
$( "#pullDown" ).on( "dragstart", function() {
$("#content").load("<something.php>");
} );
Related
I am using jQuery to send the data to the server by the post method. The function is activated on click on the span tags inside the html page. Posted data set a php session variable and after that the page needs to be reloaded. Everything is working fine in Chrome, but in IE9, I have to click several times to see the effect. If I put an alert inside the function, it works fine (but I do not want that alert).
I am not an experienced user of jQuery.
Here is the code of the jQuery
$(document).ready(function(){
$("#ciril").click(function(){
$.post('myphpfile.php', { 'lang' : 'cir'});
location.reload();
});
$("#latin").click(function(){
$.post('myphpfile.php', { 'lang' : 'lat'});
location.reload();
});
});
and here are the span tags
<span id="latin">Text1</span>
<span id="ciril">Text2</span>
You do NOT want to do a location reload when you use Ajax since it sort of negates the point of using Ajax in the first place.
If you insist on doing it anyway, you need to reload in the callback
$(function(){
$("#ciril").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'cir'}, function() {
location.reload();
});
$("#latin").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'lat'}, function() {
location.reload();
});
});
If the page you are loading is the same page you are on, simply submit a form and have the server return the page to you
Here is a neater way
<span class="lang" id="lat">Text1</span>
<span class="lang" id="cir">Text2</span>
Using
$(function(){
$(".lang").on("click",function(){
$.post('myphpfile.php', { 'lang' : this.id }, function() {
location.reload();
});
});
I have this problem: I use colorbox to make those jQuery popups (colorbox). The problem is that I want to fade in the content smoothly via ajax without that loading div which you can see right before the content shows up.
When I disable the loading div via opacity it is gone, but I can't fade in my content smoothly. It just pop-ups suddenly.
<script type="text/javascript">
$(document).ready(function(){
$(".register_link").colorbox({
initialWidth:'886',
initialHeight:'410',
fixed:'true',
scrolling:'false',
transition:'fade',
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").css("opacity", 1);
}
});
});
</script>
You can use the jQuery animate() function, instead of the .css() function
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").animate({"opacity": 1});
}
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I'm using Twitter Bootstrap's Popover feature on a sidebar. The sidebar is fetched and reloads the content every 30 seconds. I'm suing XMLHttpRequest to reload the content of the sidebar by fetching a file called stats.php.
The following code is the "refresh" code which resides in the header of the page.
function onIndexLoad()
{
setInterval(onTimerCallback, 30000);
}
function onTimerCallback()
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("stats").style.opacity = 0;
setTimeout(function() {
document.getElementById("stats").innerHTML = request.responseText;
document.getElementById("stats").style.opacity = 100;
}, 1000);
}
}
request.open("GET", "stats.php", true);
request.send();
}
The above code works flawlessly, however, after it reloads the #stats div, the popover no long does what it's supposed to - popup.
The popover code is in the stats.php in a foreach() loop because I have multiple popover scripts I need because there are multiple popovers on the sidebar.
Here's my popover code:
$(document).ready(function() {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
The $id and $title are dynamic as they are pulled from the foreach() loop.
How can I fix it so after the div reloads, the popover function will reinitialize?
$("a[rel=popover_controller_$cid]").on({
mouseenter: function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
}
});
I have also tried:
$("a[rel=popover_controller_$cid]").on("mouseover", function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
.live is depreciated. use .on delegation
try something like this:
$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
This delegates the mouseenter event from #stats to a[rel=popover_controller_$cid] and because the event is delegated it will still fire when #stats contents are replaced.
be careful - you will keep initializing popover on each mouseover. that might be bad.
while you are at it - you should use jquery's ajax instead of native xhr. its easier and more cross browser.
$.get('stats.php', function(d){
$('#stats').html(d);
};
--
setInterval(function(){
$.get('stats.php', function(data) {
$('#stats').html(data);
});
}, 30000);
I am using Malsup's AJax form plugin.
What I have going is a "chat" page, basically a div that is being refreshed every 2 seconds, and refresh when the user submits something to the chat window.
Rough HTML layout of page:
<div id='refresh_openmsg'>
<div id='chatdiv'>Chat window here</div>
</div>
<div id='reply_block'>
<form id='send_msg_form'>Basic form goes here</form>
</div>
JS:
//create timer to refresh chat window every 2 seconds
<script type='text/javascript'>
$(document).ready(function() {
refresh_openmsg = setInterval(function (){$('#refresh_openmsg').load('messaging.php?view='+the_page+' #refresh_openmsg');}, 2000);
});
</script>
//This is what happens when the form is submitted
<script type='text/javascript'>
$(document).ready(function() {
var options = {
target: '',
dataType: 'html',
beforeSubmit: showRequest_sendmsg,
success: showResponse_sendmsg
};
$('#send_msg_form').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest_sendmsg(formData, jqForm, options) {
return true;
}
function showResponse_sendmsg(responseText, statusText, xhr, $form) {
$("#reply_block").load('messaging.php?view='+the_page+' #reply_block', function() {
$('#reply_area').focus();
$("#refresh_openmsg").load('messaging.php?view='+the_page+' #refresh_openmsg', function() {
$("html, body").animate({ scrollTop: $(document).height() }, 500);
});
}).focus();
}
</script>
//on showResponse, I'm reloading the #reply_block div, and reloading the #refresh_openmsg div (#refresh_openmsg div is also being reloaded every 2 seconds)
The issue I'm running into is that the form is being submitted multiple times, sometimes twice, sometimes 3 times, and sometimes 4 or 5. Very strange, i've built similar pages before and have never ran into this issue. I know it's something with my code, and the never ending refreshes, but that's my only option at the moment. Anyone see a problem with this?
I've tried putting .die() before the .live event when submitting the form but that did not fix the issue.
You are reloading reply block div which is causing this piece to be triggered, hence after every load one more listener is getting added
$('#send_msg_form').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
you can try using like this:
$('#send_msg_form').live('submit', replyBlockDivLoaderHandler);
function replyBlockDivLoaderHandler(event){
if(event.handled != true){
$(this).ajaxSubmit(options);
event.handled = true;
}
}