I am using this code to reload my page on on checkbbox click-
<script type="text/javascript">
function showInactive(cb){
$.get('showInactive', function(data) { }, 'json');
alert();
location.reload();
}
function hideInactive(cb){
$.get('hideInactive', function(data) { }, 'json');
alert();
location.reload();
}
</script>
This is working fine but when I remove the alert(); this code doesn't work.
Your mistake is how you call $.get. Look in to API https://api.jquery.com/jQuery.get/
And I guess your location.reload() should be in callback.
<script type="text/javascript">
var url = 'http://google.com';
function showInactive(cb){
$.get(url, function(data) {
location.reload();
}, 'json');
}
function hideInactive(cb){
$.get(url, function(data) {
location.reload();
}, 'json');
}
</script>
May be this is helpful for you
<script type="text/javascript">
function showInactive(cb){
$.get('Use path of your file', function(data) {}, 'json');
window.location.reload();
}
function hideInactive(cb){
$.get('Use path of your file', function(data) {}, 'json');
window.location.reload();
}
</script>
Related
I have the following code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body style="background-color:yellow;width:100%;height:100%;">
test
<script>
function test() {
$("body").css("cursor","wait"); //cursor must be changed here
$.ajax(...);
}
</script>
</body>
</html>
The problem with this code is that cursor changes from default to wait in browser only when function test() is completed, but I need it to change in certain point of function. I tried in FF 58 on Ubuntu 14 and in Opera in Windows 7. I've read many posts about it and tried also this solution
$(document).ajaxStart(function() {
$(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
//$(document.body).css({'cursor' : 'default'});
});
but without success. How to fix it? Any ideas?
I found the answer. I had in my ajax async:false -
$.ajax({ ...
async: false,
...
});
When I changed to
$.ajax({ ...
async: true,
...
});
everything started to work as expected.
$(document).ajaxStart(function (event, jqxhr, settings) {
$(document.body).css({ 'cursor': 'wait' });
});
$(document).ajaxComplete(function (event, jqxhr, settings) {
$(document.body).css({ 'cursor': 'normal' });
});
$(document).ajaxError(function (event, request, settings) {
$(document.body).css({ 'cursor': 'normal' });
});
function AjaxCall() {
$.ajax({
type: "POST",
url: '/home/AjaxURL',
contentType: "application/json; charset=utf-8",
global: true,// this makes sure ajax set up ajaxStart/ajaxComplete/ajaxerror will triggered
dataType: "json",
success: function () { },
error: function () { }
});
}
$(document).ready(function () {
AjaxCall();
});
Note- Setting the cursor to document.body as you did means it will only apply in document and did not apply in other dom elements like anchor, textbox etc
You can use before send like this:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......`enter code here`
});
OR use when and timeout:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function ajaxready() {
setTimeout(function() {
$.ajax({
url: "https://www.w3schools.com/jquery/demo_test.txt",
beforesend: function() {},
success: function(result) {
$("#div1").html(result);
$("body").css("cursor", "");
}
});
}, 500);
}
function loading() {
$("body").css("cursor", "wait"); //cursor must be changed here
}
$(document).ready(function() {
$("button").click(function() {
$.when(loading()).done(function() {
ajaxready();
});
});
});
</script>
<style>
button {
cursor: inherit
}
</style>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<span></span>
<button>Get External Content</button>
</body>
</html>
I have a code like this before:
<script>
function()
{
//*code*
fxajax.sendData
({
url:"",
data:{},
success:function(){},
error:function(){}
});
}
</script>
But my manager wants me to put my code inside the ajax so i put it inside beforeSend
<script>
function()
{
fxajax.sendData
({
beforeSend: function()
{/*code*/}
url:"",
data:{},
success:function(){},
error:function(){}
});
}
</script>
My problem is beforeSend is not executed but url, data, success and error works fine. Then I think maybe its because I don't have an XHR request.
Any idea how I should implement this code?
Here is a simple way
$(document).ready(function(){
// set a 1 second to fire ajax request
setTimeout(function () {
// url of the image
var url = 'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg';
$.ajax({
url : '', // url request
type : "GET", // type of request,
beforeSend : function () {
var i = new Image();
i.src = url;
i.onload = function () {
// change it to div
$('div').append(i);
}
console.log("ajax is firing");
},
success: function () {
},
error : function (xhr, txtstatus, text) {
console.log(txtstatus);
console.log('error');
// any error from request
}
});
}, 1000);
});
Here is a simple DEMO
im having troubles with getting script from another file in jquery.
i've tried with $.getScript and $.ajax();
how can i include one script like require.js in jquery?
util.js
function getSessionInformation () {
$.ajax({
url: '../controller/controller.php',
type: 'POST',
dataType:'JSON',
data: {
action: 'getInfoCompany'
},
})
.done(function(data) {
try{
return data;
}catch(e){
console.log(e);
}
})
.fail(function() {
console.log("error");
});
}
file.js
$(document).ready(function() {
_getAllUsers();
});
function _getAllUsers()
{
jQuery.ajax({
url: "util.js",
dataType: "script",
cache: true
}).done(function() {
alert("im in");
jQuery.cookie("cookie_name", "value", { expires: 7 });
});
}
Try again, the getScript method is the right tool for this:
function _getAllUsers()
{
jQuery.getScript("util.js", function() {
alert("im in");
jQuery.cookie("cookie_name", "value", { expires: 7 });
});
}
Update:
The reason that you get a HTTP 404 error is that the URL that you are using will look for the script in the same folder as the page. You need a ../ to get out of the view folder and a js to get into the script folder:
jQuery.getScript("../js/util.js", function() {
I am new to Ajax and confused. The problem is the ajax reloads the page. The function mentioned in the url inserts the data into database. but the page reloads. I guess the URL is not working but i am not sure on this.
Here is my Controller Function
public function insert_student_fee_payment()
{
$std_code=$this->input->post('std_code');
$total_fee=$this->input->post('total_fee');
$payable_fee=$this->input->post('payable_fee');
$date=date('Y m d');
$class_detail=$this->db->select('class.class_year,class.class_semester')
->join('class','class_student.class_id=class.class_id','LEFT')
->where('class_student.student_id',$std_code)
->where('class_student.class_student_status',2)
->limit(1)
->get('class_student')
->result();
if(count($class_detail)>0)
{
foreach($class_detail as $cd)
{
$year=$cd->class_year;
$semester=$cd->class_semester;
}
}
$data=array(
'std_code'=>$std_code,
'year'=>$year,
'semester'=>$semester,
'total_fee'=>$total_fee,
'payable_fee'=>$payable_fee,
'date'=>$date,
'status'=>2
);
if($this->db->insert('student_fees',$data))
{
echo '1';
}
}
and here is my Ajax code in form
<script type="text/javascript">
$(document).ready(function(){
$('#insert_fee_payment').click(function(){
var std_code=$('#std_code').text();
var total_fee=$('#total_fee').text().split(' ');
var payable_fee=$('#payable_fee').text().split(' ');
total_fee=total_fee[0];
payable_fee=payable_fee[0];
var data='std_code='+std_code+'&total_fee='+total_fee+'&payable_fee='+payable_fee;
$.ajax({
url: '<?php echo base_url()."index.php/finance/insert_student_fee_payment;?>',
type: 'POST',
data: data,
success: function(response)
{
alert(response);
},
error: function(response,status,err)
{
alert(err.message);
}
});
});
});
any help guys
We don't see the HTML so it's hard to say what's wrong but my guess is that $('#insert_fee_payment') is a submit button so you have to cancel the action by default which is submitting the form.
$('#insert_fee_payment').click(function(e){
e.preventDefault();
};
or
$('#insert_fee_payment').click(function(){
var std_code=$('#std_code').text();
var total_fee=$('#total_fee').text().split(' ');
var payable_fee=$('#payable_fee').text().split(' ');
total_fee=total_fee[0];
payable_fee=payable_fee[0];
var data='std_code='+std_code+'&total_fee='+total_fee+'&payable_fee='+payable_fee;
$.ajax({
url: '/index.php/finance/insert_student_fee_payment',
type: 'POST',
data: data,
success: function(response)
{
alert(response);
},
error: function(response,status,err)
{
alert(err.message);
}
});
return false;
});
Add return false after the error function.
$(document).ready(function(){
$('#insert_fee_payment').click(function(){
var std_code=$('#std_code').text();
var total_fee=$('#total_fee').text().split(' ');
var payable_fee=$('#payable_fee').text().split(' ');
total_fee=total_fee[0];
payable_fee=payable_fee[0];
var data='std_code='+std_code+'&total_fee='+total_fee+'&payable_fee='+payable_fee;
$.ajax({
url: '/index.php/finance/insert_student_fee_payment',
type: 'POST',
data: data,
success: function(response)
{
alert(response);
},
error: function(response,status,err)
{
alert(err.message);
}
return false;
});
});
});
So currently I use simple try once:
$.getJSON("server.json", function(data) {
servicesList.render(data);
});
I wonder how to try until success each 0.5 seconds?
function getFromServer(){
$.getJSON("server.json", function(data) {
// Verify your data, if it's not you want run error function
if(!data){ onerror(); return; }
servicesList.render(data);
}).error(function() { onerror(); });
}
// if error ,run it again.
function onerror(){
setTimeout(function(){getFromServer();},500);
}
you can find the $.getJSON API help with this link:
http://api.jquery.com/jQuery.getJSON/
Try this logic:
function update_it() {
$.ajax({
url: 'server.json',
dataType: 'json',
success: function(data) {
servicesList.render(data);
},
error: function() {
setTimeout('update_it', 500);
}
});
}
If fail, it waits 500 ms then recalls the function.