I want to make an ajaxlink, but it is not working:
My html:
<td class="apris"><p><a class="current desc" href="/?direction=asc&sort=pris">Pris pr. md.</a></p></td>
My Jquery:
$('.apris').live('change', function() {
var form=$(this).closest('form');
$.ajax({
type:'post',
url:"\/finder\/" + $(this).val(),
data:form.serialize(),
success:function(msg){
$('#formcontent').html(msg);
}
});
});
I'm not quite sure, because your code doesn't really match up with what you're trying to do, but maybe you want:
$('.apris a').live('click', function() {
var form=$(this).closest('form');
$.ajax({
type:'post',
url:"\/finder\/" + $(this).val(),
data:form.serialize(),
success:function(msg){
$('#formcontent').html(msg);
}
return false;
});
});
I think this is what you're trying to do:
$('.apris a').live('click', function() {
var form=$(this).closest('form');
$.ajax({
type:'post',
url: $(this).attr("href"),
data:form.serialize(),
success:function(msg){
$('#formcontent').html(msg);
}
return false;
});
});
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.
Newbie and Need helps for Codeigniter and Javascript, i need load page from another server with CI too..
What should i do to make it works...
$("#select").change(function(){
if($('#textbox').val() == ""){
alert("Warning");
return;
}else{
$('#overlay').show();
var tglpayslip = $('#tglpayslip').val();
var url = "http://192.168.88.7/index.php/home/payslip.php";
$.post(url, tglpayslip, function(response){
$('#overlay').hide();
$('#payslip').html(response);
});
}
});
For cross domain, you have to use JSONP.
$("#select").change(function(){
if($('#textbox').val() == ""){
alert("Warning");
return;
}else{
$('#overlay').show();
var tglpayslip = $('#tglpayslip').val();
var url = "http://192.168.88.7/index.php/home/payslip.php";
$.ajax({
type:"post",
url:url,
dataType: "jsonp",
data:tglpayslip,
success:function(response){
$('#overlay').hide();
$('#payslip').html(response);
}
});
}
});
Try this
var tglpayslip = $('#tglpayslip').val();
var url = "http://192.168.88.7/index.php/home/payslip.php";
$.ajax({
crossDomain: true,
type:"post",
url:url,
dataType: "jsonp",
data:tglpayslip,
success:function(response){
$('#overlay').hide();
$('#payslip').html(response);
}
});
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 am trying to run an ajax call function but I am running into issues. I'd like to grab the id as the data item for this. My code is below but I haven't seen any signs of it working yet.
Thanks for your help
<a class='ajax-read' id='133' href='#' >read more</a>
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ id,
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
You need to get the anchor id inside the AJAX call:
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ elem.attr('id'),
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
Change
data: "id="+ id,
to
data: "id="+ elem.attr('id'),
I would like to chage a div content with ajax, but before hide it and after the change, show it with jQuery animation.
My current code:
$(document).on("click", ".menuItem", function(){
var contentName = $(this).attr("name");
$( "#content > div" ).hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").html(responseText);
$("#content").show(1000);
}
});
});
});
But it isn't working, because when html method invoked, the new content sudden appear.
Is there any way to solve this issue?
Thanks in advance!
Richard
The problem here is that the $("#content") element is always visible. Before ajax call you are hiding a div inside #content -> $("#content > div").
You can hide the $("#content") before adding content.
$("#content").hide().html(responseText).show(1000);
or
$("#content").hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").html(responseText).show(1000);
}
});
});
Try this
$(document).on("click", ".menuItem", function(){
var contentName = $(this).attr("name");
$( "#content > div" ).hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").hide().html(responseText).show(1000);
}
});
});
});
You can try to hide content first :
$(document).on("click", ".menuItem", function(){
var contentName = $(this).attr("name");
$("#content > div" ).hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").hide();
$("#content").html(responseText);
$("#content").show(1000);
}
});
});
});