I have this code:
$(document).ready(function(){
$('.brand select').on('change', function(){
$.ajax({
url: 'index.php?route=module/brand_model/models',
dataType: 'json',
data: {manufacturer_id: $(this).val()},
beforeSend: function() {
$('.brand select').attr('disabled', true);
},
complete: function() {
$('.brand select').attr('disabled', false);
},
success: function(data) {
if (data['models']) {
$('.model select').html(data['models']);
}
}
});
});
$('.model select').live('change', function(){
if ($('.brand select').val() && $(this).val()) {
var url = '<?php echo $this->url->link('module/brand_model/search','');
?>&filter_manufacturer_id='+$('.brand select').val()+'&filter_model='+$(this).val();
window.location.href = url;
}
});
});
How do i make window.location.href not to redirect to specific url, but load content of specific div from url var to display without refreshing page. i tried with $("#mydiv").load(url) instead of window.location.href but no success. It display blank content in #mydiv.
Related
This is the first time that I'm using ajax with jquery and I'm new on jquery I have a structure
$(document).ready(function(){
data_url = $('.lazy_content').attr("data-url");
data_id = $('.lazy_content').attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
});
});
<div class="lazy_content" data-url="/ajax/yorumlar/#Model.OtelBilgileri.seflink" data-target-id="ajax-content-1">
<h4 class="tur-main-baslik">COMMENTS</h4>
<div id="ajax-content-1"></div>
</div>
<div class="lazy_content" data-url="/ajax/trustyou/#Model.OtelBilgileri.seflink" data-target-id="ajax-content-2">
<h4 class="tur-main-baslik section-head">POSTS</h4>
<div id="ajax-content-2"></div>
</div>
as you see I have data-url this data url has my ajax-file and I'm getting my ajax file but after page loading nothing work..whats wrong with my code ?
Put your code inside $( document ).ready()
and I think you need to change your code like :
$(document).ready(function() {
data_url = $('.lazy_content').attr("data-url");
data_id = $('.lazy_content').attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
})
})
Or iterate with each class i.e .lazy_content
$( document ).ready(function() {
$('.lazy_content').each(function(){
data_url = $(this).attr("data-url");
data_id = $(this).attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
})
})
})
Depending on where the javascript is in the HTML the DOM may not have loaded at the point you run the script.
encapsulating your javascript within the jquery 'on DOM loaded' function ( $(document).ready( function() { ) will fix that problem, code as follows.
$(document).ready( function() {
$('.lazy_content').on("load", function() {
data_url = $(this).attr("data-url");
data_id = $(this).attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
})
});
});
Load evnet is Only usable in window,img element.
If You use Jquery load function, You can use callback function.
$("#target").load("append.html",function(){
// callback
});
another way, you append scripts below target html.
I have chat and i am loading these by ajax
$.ajax({
type: "GET",
url: "chat/mini.php",
success: function(chat){
$('.chat-message').html(chat);
},
error: function(err) {
console.log(err);
}
});
And i Have in chat/mini.php link to delete
X
and script
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if (confirm("Sure you want to delete? There is NO undo!")) {
$.ajax({
type: "GET",
url: "chat/delete.php",
data: info,
success: function () {
}
});
}
return false;
});
And these cod working when i not loading chat with ajax but when i loading these with ajax these don't working. I must add something to work?
$(document).ready(function(){
$('#registration_form').on('submit',function(e){
/// e.preventDefault();
$("#loading").show();
var email = $('#email').val();
var checkEmail = $("#email").val().indexOf('#');
var checkEmailDot = $("#email").val().indexOf('.');
if(email == ''){
$("#email").addClass('error');
error_flag = 1;
}
if(checkEmail<3 || checkEmailDot<9){
$("#email").addClass('error');
error_flag = 1;
}
$.ajax({
url: "<?=base_url('controller/registration_ajax')?>",
// url: "<?=base_url('controller/register')?>",
type: "POST",
datatype: "JSON",
data: {email: email},
success: function(res){
var data = $.parseJSON(res);
var status = data.status;
var message = data.message;
if(status == 'true'){
// $('#myModal').modal('hide');
$('#message').html('');
$('#message').html(message);
$('#message').css('color',"green");
$("loading").hide();
}
else{
$('#message').html('');
$('#message').html(message);
$('#message').css('color',"red");
}
}
});
e.preventDefault();
});
});
how to use loader with ajax when message is success the load stop when message is or error loader is stop how to use loader image image in this stiuation. if submition is true loading hide if false loading also hide.
how to use loader with ajax when message is success the load stop when message is or error loader is stop how to use loader image image in this stiuation. if submition is true loading hide if false loading also hide.
You can use the always handler to do that.
Also note that, you should so the loader only if the ajax is sent, so in your case only after the validations are done it should be done.
$(document).ready(function() {
$('#registration_form').on('submit', function(e) {
/// e.preventDefault();
var email = $('#email').val();
var checkEmail = $("#email").val().indexOf('#');
var checkEmailDot = $("#email").val().indexOf('.');
if (email == '') {
$("#email").addClass('error');
error_flag = 1;
}
if (checkEmail < 3 || checkEmailDot < 9) {
$("#email").addClass('error');
error_flag = 1;
}
$.ajax({
url: "<?=base_url('controller/registration_ajax')?>",
// url: "<?=base_url('controller/register')?>",
type: "POST",
datatype: "JSON",
data: {
email: email
},
beforeSend: function() {
//show it only if the request is sent
$("#loading").show();
},
success: function(res) {
var data = $.parseJSON(res);
var status = data.status;
var message = data.message;
if (status == 'true') {
// $('#myModal').modal('hide');
$('#message').html('');
$('#message').html(message);
$('#message').css('color', "green");
$("loading").hide();
} else {
$('#message').html('');
$('#message').html(message);
$('#message').css('color', "red");
}
}
}).always(function() {
//irrespective of success/error hide it
$("#loading").hide();
});
e.preventDefault();
});
});
Have a loading image like this:
<img src="loader.gif" id="loader" />
And in the script, before the AJAX call, show it:
$("#loader").fadeIn(); // You can also use `.show()`
$.ajax({
// all your AJAX stuff.
// Inside the success function.
success: function (res) {
// all other stuff.
// hide the image
$("#loader").fadeOut(); // You can also use `.hide()`
} // End success
}); // End AJAX
Solution to your Problem
You are missing # in your call:
$("loading").hide();
//-^ Add a # here.
Change it to:
$("#loading").hide();
I'd do it this way:
function loadsth(){
$('#load_dialog').show();
$.ajax({
method: "POST",
url: "?ajax=ajax_request",
data: { data:"test"},
success:function(data) {
$('#load_dialog').hide();
}
});
});
Try using jquery's ajax function beforeSend
$.ajax({
method: "POST",
url: "/url",
data: { data:"test"},
beforeSend: function() {
//SHOW YOUR LOADER
},
success:function(data) {
//HIDE YOUR LOADER
}
});
});
I hope this has given you some idea.
try this its work for u
$.ajax({
url: "<?=base_url('controller/registration_ajax')?>",
type: 'POST',
beforeSend: function(){
$("#loaderDiv").show();
},
success: function(data) {
$('#output-json-inbox').jJsonViewer(data);
$("#loaderDiv").hide();
},
error: function() {
alert("error");
}
});
my html:
<span id="loading"><img src="ajax-loader.gif" /> Please Wait</span>
#loading{display:none;}
my js:
var Progressajax = false;
$(function() {
$(".commentmoreview").click(function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var id = element.attr("id");
$('#loading').show();
var value = $('.pagecont'+id).val();
var info = 'id='+id+'&pagecont='+value;
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
success: function(data){
$('#loading').hide();
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
});
});
what is wrong that loading span is not working?
thank you friends!
The best way to show loader image while making ajax calls is using Ajax Global Events
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
can you change
$('#loading').show();
to
$('#loading').attr("display","block");
and try to use it like this
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
beforeSend: function(){
$('#loading').attr("display","block");
},
success: function(data){
$('#loading').attr("display","none");
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
I have a vote function in one of my projects. Please see following code.
$(function () {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
and I'm using jQuery infinite scroll to load rest of the pages/posts. I'm using following code in main page and second page which i load rest of the data
('#left').infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.post-box', //
}, function (newElements, data, url) {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
Issue is after 2nd 3rd or any other page load, vote function is triggering twice. How can I fix this issue. Any help will be appreciated.
Maybe if you unbind the click event and then bind it
function(newElements, data, url){
$(".vote").unbind( "click" );
$(".vote").click(function() {
You need to unbind the click event before binding it again.
[...]
$(".vote").unbind('click').click(function()
[...]
or
[...]
$(".vote").off('click').click(function()
[..]
depending on the version of jQuery you are using.