Load ajax after page load

Load ajax after page load - javascript

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.

Related

Handling of click events in jQuery(For Like and Unlike button)

I am trying to create a Like-Unlike system using AJAX and jQuery. The "like" event seems to work properly, but when I want to "unlike" the event is not responding. Any suggestions to solve this problem is appreciated.
$(document).ready(function() {
$(".like").click(function() { //this part is working
var item_id = $(this).attr("id");
var dataString = 'item_id=' + item_id;
$('a#' + item_id).removeClass('like');
$('a#' + item_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(data) {
if (data == 0) {
alert('you have liked this quote before');
} else {
$('a#' + item_id).addClass('liked');
$('a#' + item_id).html(data);
}
}
});
});
$(".liked").click(function() { //this part is not working
var item_id = $(this).attr("id");
console.log(item_id);
var dataString = 'item_id=' + item_id;
$('a#' + item_id).removeClass('liked');
$('a#' + item_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(data) {
if (data == 0) {
alert('you have liked this quote before');
} else {
$('a#' + item_id).addClass('like');
$('a#' + item_id).html(data);
}
}
});
});
});

$(".like") and $(".liked") are retrieved when the document is ready but don't get updated when you add/remove classes from an element.
If you assign a more generic class the vote elements like 'like-toggle' you would be able to do the following:
$(document).ready(function() {
$('.like-toggle').click(function(event) {
if ($(event.target).hasClass('like') {
// Call your unlike code, replace like with liked.
} else {
// Call your like code, replace liked with like.
}
});
});
This will work because the like-toggle class never gets removed from the elements and thus the elements which are present when the document is ready will keep functioning.

Add one or two more PHP variables to the javascript code

I am a decent PHP programer and recently I got stuck in a javascript code.
I have the code below:
$(function () {
$('.more').live("click", function () {
var ID = $(this).attr("id");
if (ID) {
$("#more" + ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: "lastmsg=" + ID,
cache: false,
success: function (html) {
$("div#updates").append(html);
$("#more" + ID).remove();
}
});
} else {
$(".morebox").html('The End');
}
return false;
});
});
This code submit without problems one PHP variable to the process page loadmore.php using this input
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
<a href="#" class="more" id="<?php echo $load_id; ?>">
load more
</a>
</div>
How can put more variables in the input and the javascript code to work with them on the process page?
I want to set one or two more variables.
UPDATE:
I updated the code like this:
HTML input:
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
load more</div>
JAVASCRIPT CODE:
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: {"lastmsg="+ ID, "act="+ ACT},
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>
I am not sure if the data lines was writed properly because the script looks like it's frozen now
SOLVED:
I just used a datastring like this
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
var dataString = 'lastmsg='+ ID + '&act=' + ACT;
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: dataString,
//data: {"lastmsg="+ ID, "act="+ ACT },
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>

Just send data as an object:
data: {
"lastmsg": "lastmsg="+ ID,
"anotherData": "someData"
}
You'll retrieve them in your PHP script as follows:
$_POST["lastmsg"];
$_POST["anotherData"];

Issue with newElements function

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.

How call variable outside function .each with Jquery?

I want to be able to access the value of a nested each() function outside of the function.
I have code below or http://jsfiddle.net/z36UK/6/
HTML:
<div id="wrap">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search..." id="ds-canho">
</ul>
</div>
Javascript:
$(document).ready(function() {
var urlx=[];
parseXml();
alert(urlx);
console.log(urlx);
$.mobile.loading( "show" );
$.ajax({
type: "GET",
url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http://saigonpearl.info/home/notype/-0-trang-chu.html%27%20and%20xpath%3D%22%2F%2Fdiv%5B%40class%3D%27tindang%27%5D%22&diagnostics=true',
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("div.tindang").each(function() {
var url = $(this).find('a').attr("href"),
urlx= url.replace('#menutop','');
$("ul#ds-canho").append('<li>' + $(this).find('h3').text() + '</li>');
$('ul#ds-canho').listview('refresh');
$.mobile.loading( "hide" );
});
}
});

Please update below js code
$(document).ready(function() {
$.mobile.loading( "show" );
$.ajax({
type: "GET",
url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http://saigonpearl.info/home/notype/-0-trang-chu.html%27%20and%20xpath%3D%22%2F%2Fdiv%5B%40class%3D%27tindang%27%5D%22&diagnostics=true',
dataType: "xml",
success: parseXml
});
$( document ).ajaxComplete(function() {
parseXml();
});
function parseXml(xml) {
window.urlx = '';
$(xml).find("div.tindang").each(function() {
var url = $(this).find('a').attr("href"),
urlx = url.replace('#menutop','');
$("ul#ds-canho").append('<li>' + $(this).find('h3').text() + '</li>');
$('ul#ds-canho').listview('refresh');
$.mobile.loading( "hide" );
});
}
});
EDIT
Add FSFIDDLE

It's not about the each, is it? You can easily put the urlx variable there and assign to it from the inside:
function parseXml(xml) {
var urlx;
$(xml).find("div.tindang").each(function() {
var url = $(this).find('a').attr("href"),
urlx = url.replace('#menutop','');
$("ul#ds-canho").append('<li>' + $(this).find('h3').text() + '</li>');
$('ul#ds-canho').listview('refresh');
$.mobile.loading( "hide" );
});
console.log(urlx);
// if you wanted an array, use `urlx = [];` and `urlx.push(…);`
}
However, where you currently have placed the log and alert statements is
before the ajax request
outside of the ajax request callback
which means that it cannot work. You need to put them inside the callback, because you cannot return the data outside of it.

jquery iframe load dynamically

I am using following jquery script to load another url after successful ajax request.
$(document).ready(function() {
var $loaded = $("#siteloader").data('loaded');
if($loaded == false){
$("#siteloader").load(function (){
if(ad_id != undefined){
var req_url = base_url+'ajax/saveclick/'+ad_id+'/';
var preloader = $('#preloader');
var reqloader = $('#reqloader');
$.ajax({
url: req_url,
type: 'GET',
beforeSend: function() {
$(preloader).show();
$('#adloading').remove();
},
complete: function() {
$(preloader).hide();
},
success: function(result) {
$(reqloader).html(result);
$("#siteloader").data("loaded", "true");
$("#siteloader").attr("src", base_url+'userpanel/cpa/'+ad_id+'/');
}
});
}
else{
$('#reqloader').html('<span class="text-danger">Invalid Approach!</span>');
}
});
}
});
<iframe src="remote_url" id="siteloader"></iframe>
I don't want to run ajax again after changing src on iframe and i have also tried to stop it by $("#siteloader").data("loaded", "true");
Please suggest me a good solution for this. thanks.

If you only want to execute the "load" handler once
Simply add the line
$("#siteloader").unbind('load');
In the success callback.
If you want the "load" handler to be executed on each src change, you may do something like that :
$(document).ready(function () {
$("#siteloader").load(function () {
// Move the test in the event Handler ...
var $loaded = $("#siteloader").data('loaded');
if ($loaded == false) {
if (ad_id != undefined) {
var req_url = base_url + 'ajax/saveclick/' + ad_id + '/';
var preloader = $('#preloader');
var reqloader = $('#reqloader');
$.ajax({
url: req_url,
type: 'GET',
beforeSend: function () {
$(preloader).show();
$('#adloading').remove();
},
complete: function () {
$(preloader).hide();
},
success: function (result) {
$(reqloader).html(result);
$("#siteloader").data("loaded", "true");
$("#siteloader").attr("src", base_url + 'userpanel/cpa/' + ad_id + '/');
}
});
}
else {
$('#reqloader').html('<span class="text-danger">Invalid Approach!</span>');
}
}
});
});
Maybe your ad_id variable is not well defined / changed ...

Develop Reference

JavaScript is the programming language of the Web.

Load ajax after page load - javascript

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.

Related

Handling of click events in jQuery(For Like and Unlike button)

Add one or two more PHP variables to the javascript code

Issue with newElements function

How call variable outside function .each with Jquery?

jquery iframe load dynamically

Categories

Resources