I want to create a social network website. but there is a problem when the page refreshes the page with ajax. there I am using setInterval every 5 seconds. but by the time the page refreshes, textarea also comments on reloading. how to order textarea in the comments do not reload when the page refreshes?
please help me !
Can You put up your Code in order to understand your problem more Precisely.?
Use :
$.ajax({
url: '--URL of ajax Page--',
type: 'POST',
data: {},
success: function(data) {
$(document).ajaxStop(function() {
**window.location.reload();** // This reloads the Page in a faster way.
});
}
});
my code like this:
The page refreshes (_view.php)
<div class="status">
<?php echo ' <span style="color: #f83e07">#SIF# '.$data->idUser->short_name.'</span> : '.date("D, d M Y, H:m:s",strtotime($data->tgl_update)).'</br>'.CHtml::link(CHtml::image(Yii::app()->baseUrl.'/images/member/'.$data->idUser->foto,'',array("width"=>50,"height"=>50)), array('user/view', 'id'=>$data->id_user)).'</br>';
if($data->id_user == Yii::app()->user->id){
}
echo '</br><div class="isi">'.strip_tags($data->isi, "<h1><u><div><br><h2><h3><h4><h5><h6><img><hr><font><b>").'</div>'; ?>``
reload the index page (index.php)
function callAjax(){
$.fn.yiiListView.update('datalist', {
data: $(this).serialize(),
success: function(html){
$('.view').mouseout(function(e){
ref = setInterval(function(){callAjax();}, 5000);
});
$('.view').click(function(e){
clearInterval(ref);
});
},
}
);
}
Related
The button action does not work after searching in the index page. The action button does not work on the second page.
My Ajax Script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(responsiveness);
}
});
})
});
Using Ajax Pagination, you can create dynamic navigation links for pages and then load data without reloading the entire web page content. So, by using Ajax Pagination, we can add dynamic page content to the data list without having to refresh the web page content.
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();
I use this method for pagination:
https://gist.github.com/tobysteward/6163902
When I click on pagination page, my other scripts on page not working after ajax. I need reload page, then scripts working.
I use simple script:
$("#select").on("change", function() {
alert()
});
How I can fix this solution? I need load scripts ?
After you load your posts, you need to rebind any event. try something like:
function getPosts(page) {
$.ajax({
url : '?page=' + page,
dataType: 'json',
}).done(function (data) {
$('.posts').html(data);
//bind again
$("#select").on("change", function() {
alert();
});
location.hash = page;
}).fail(function () {
alert('Posts could not be loaded.');
});
}
i want to submit form which loaded via jquery without refreshing the whole page.
but this code first load form without refreshing whole page then the form loaded via jquery refreshes whole page on submission.
how to solve this problem??
$(document).ready(function() {
$("body").on("click",".down",function(e) {
e.preventDefault();
var name = $("#down").attr("name");
var vote = $("#down").val();
var voteString = 'votedown='+ vote;
$.ajax({
type: "POST",
url: 'vote.php',
data: voteString,
cache: false,
error: function() {
$('#btn-vote').html('<p>An error has occurred</p>');
},
beforeSend: function() {
$('#load').html("<img src='../images/LoaderIcon.gif' />");
},
success: function(html) {
$("#re").html(html);
}
});
The on function takes a selector as well, that way you can use it on elements loaded with ajax. You also have to bind it to an element that exists when the page loads.
$('body').on('click', 'selector of the element created', function(){
...
})
Obviously you should not use body probably but a closer parent of the loaded element.
I have an index page, in wich I have jquery.js and jquery.tabs.js included.
this page load content via ajax into a . The content is a set of tabs, their contents and at the bottom of the loaded content I have a call to tabs().
in FF it only works when I load content after refreshing the index page, and if I hit the link to reload the content, it stops working. in IE it's not working at all.
These are my tabs:
<ul id="horz-tabs">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
then I have the containers following, and at the very end of the page loaded via ajax I have:
<script type="text/javascript"><!--
$('#horz-tabs a').tabs();
//--></script>
My ajax function loads the page properly. I am wondering how I can fix this issue. Thanks for any help or advice.
The ajax loading function is as follow
<script>
function async(target, href) {
var loading = '<div class="loading">Loading</div>';
jQuery.ajax({
url: href,
beforeSend: function() {
$(target).prepend(loading);
},
error: function() {
$(target).html("<span class='error'>Failed</span>");
},
success: function(results) {
$(target).html(results);
}
})
}
</script
Look like you are loading the tab html via ajax, that could be the problem since when your script is running the dom for the tab elements may not be existing.
So you need to have a success callback to the async load method and add execute $('#horz-tabs a').tabs(); in the load success callback.
function async(target, href) {
var loading = '<div class="loading">Loading</div>';
return jQuery.ajax({
url : href,
beforeSend : function() {
$(target).prepend(loading);
},
error : function() {
$(target).html("<span class='error'>Failed</span>");
},
success : function(results) {
$(target).html(results);
}
});
}
Then
async('some-div', 'tab-url').done(function(){
$('#horz-tabs a').tabs();
})
This has been asked many many times. But none of the solutions are working for me in IE and Chrome.
I basically want to show a loading image while ajax call is being made.
Following is what I'm trying.
function ws(){
showL();
var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
function showL()
{
$('#loading').show();
}
function hideL()
{
$('#loading').hide();
}
Following is the HTML
<table cellspacing="1" cellpadding="1" border="1">
<tr><td>
<input type="button" value="ckick" id="btn" onClick="ws();">
<input type="button" value="clear" onClick="$('#dv,#complete').html('');">
</td><td>
<div id="dv"></div>
</td></tr><tr>
<td>Here<div id="loading" style="display:none" >Loading.................</div></td>
<td>final<div id="complete"></div></td></tr>
</table>
After above js, I tried
ajaxStart and ajaxStop
$.ajaxSetup
$.ajax({...}).done(hideL)
All the js codes I tried are working in Firefox but none of them are working in IE and Chrome.
In Firefox, the code works as expected. Loading div gets shown, ajax is called, loading div gets hidden. This is exactly what I'm expecting.
In IE & Chrome, loading div doesn't show up. Maybe It's getting shown and hidden very fast after or before ajax call.
Please let me know what can be done to make the code work in IE & Chrome.
There has to be some workaround as I've seen other sites show loading div. Or maybe I'm doing something stupid.
Once the code is working in all browsers. I want to make a generic function (like a jQuery plugin) to show a loading div when ajax is being called.
try this:
This will ensure that ur DIV is hidden after the ajax call completes
function ws() {
showL();
var res ="";
$.ajax({
url: 'webservice.asp?service=LoadingTestSRV',
async: true,
cache: false,
success: function(data) {
res=data;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
});
}
function showL() {
$('#loading').show();
}
function hideL() {
$('#loading').hide();
}
This form has worked for me previously: (I put in the slow so you could see it if it is fast)
$('#loading').ajaxStart(function() {
$(this).show("slow");
}).ajaxComplete(function() {
$(this).hide("slow");
});
Test example of this here:
http://jsfiddle.net/MarkSchultheiss/xgFkw/
I do it this way try if it helps..
$.ajax({
beforeSend: function () {
$('#loadingDiv').show();
$('#accordion').hide()
},
complete: function () {
$('#loadingDiv').hide();
$('#accordion').show();
},
type: "GET",
url:
data: shallowEncodedData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (
There is a problem in your ajax call. Remove the async:false from ajax call and it will work even in IE8/9 and Chrome. For other Lost-souls, please do the above changes and try again.
simple just Add async=true in ajax function. It will work in chrome
My workaround for this issue in Chrome, use a timeout on the AJAX call of one millisecond.
E.g.
$("#mySpinningLoader").show();
var t = setTimeout(function () {
$.ajax({
url: rootPath + controllerNAction,
async: false,
type: "POST",
data: JSON.stringify(lightweightObject),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
$("#mySpinningLoader").hide();
}
});
}, 1);