Loading image during ajax process not working properly - javascript

My code looks like this...
div to show content and loading image:
<div id="adS" style="float: left; width: 70%">
<div id="loading-image" style="background-image: url('images/processing.gif'); display: none;">
</div>
</div>
jQuery code:
$(function() {
$("#lets_search").bind('submit',function() {
var gen = $("input[name='radGen']:checked").val();
var mt = $('#selMtQ').val();
var agf = $('#agf').val();
var agt = $('#agt').val();
var rel = $('#religQ').val();
var cast = $('#selCstQ').val();
$('#loading-image').show();
$.post('adSearch.php',{gen:gen,mt:mt,agf:agf,agt:agt,rel:rel,cast:cast}, function(data){
$("#adS").html(data);
$('#loading-image').hide();
});
return false;
});
});
The loading image is only shown once on click event and not every time I click the search li... :(
Need help...

To check if it is the server that is responding very quickly you could test it with the setTimeOut() function at the ajax process. If the picture is not shown then it is not the server that is very quickly but something else. But more of your code is needed then to understand what is going on.

Related

Javascript function gets overrun after consecutive setTimout calls

I've written a function to add a predefined div as a notification to the "notification_place" and one to remove the notification. To make it look more friendly and not that abrupt I wanted the notification/div to fade out before I remove it completly.
The issue I'm having is whenever a new notification/div is added while another one is still there the previous one can't be removed. The second however gets removed even though the have a different html ID. I get this issue just when I use a type of timeout function such as setTimeout or fadeTo in jquery. If I just write newdiv.remove() everything works as expected but it doesn't look they way I wanted it to.
var notification_place = 'notification_setting_position';
var new_message = '<div class="notification is-success" id="notification_msg_position_set"><h3 class="has-text-white"> Holder Position set!</h3></div>';
var new_message_id = 'notification_msg_position_set';
function addNotification(message) {
let div = document.getElementById(notfification_place);
div.innerHTML += message;
}
function removeNotification(msg_id){
let newdiv = document.getElementById(msg_id);
//newdiv.remove();
$( "#"+msg_id ).fadeTo(500, 0, function(){newdiv.remove();});
}
or alternatively
function removeNotification(msg_id){
let newdiv = document.getElementById(msg_id);
newdiv.style.opacity='0';
newdiv.addEventListener('transitionend', newdiv.remove());
}
and the CSS looking as follows
#notification_msg_setting_position {
transition: opacity 0.5s;
}
the HTML part looks something like this
<body>
...
<div class="content">
<h2>Status Feedback</h2>
</div>
<div class="content is-small" id="notification_setting_position">
</div>
</body>
Thanks

How can I properly use '$(this)' to call a DOM element that triggered the event?

I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.
<script>
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
$('.pretty-embed').removeClass('play').empty();
$('.pretty-embed').html(vidImgUrl);
$('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
});
});
})(jQuery);
</script>
Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked
<div id="element_to_pop_up" display: block;">
<a class="b-close">x</a>
<h3 class="pop-hd">Header</h3>
<p>Test Video</p>
<div class="pretty-embed play" data-pe-allow-fullscreen="false">
<iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&rel=1"></iframe>
</div>
</div>
The problem is in your $('.pretty-embed') selector which selects all the embed elements in all modals If I understood your problem correctly. To fix that take the id of the modal and prepend it to the selectors like below:
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
var parent_id = $(this).parent().attr(id);
// Prepend the parent id before the .pretty-embed selector
$('#'+parent_id+' .pretty-embed').removeClass('play').empty();
$('#'+parent_id+' .pretty-embed').html(vidImgUrl);
$('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close();
});
});
Also you can use the same way you did it in the previous lines:
$(this).parent().find('.pretty-embed').removeClass('play').empty();
You can get the current modal with
var current_modal = $(this).parent().find('.pretty-embed');
Then remove the class play, and add your image like this:
current_modal.removeClass('play').empty();
current_modal.html(vidImgUrl);
See your complete code in this jsfiddle

Rebinding events with jquery not working

I have a page setup for a presentation layout:
+------------------------+
|prev next|
|+----------------------+|
|| page ||
|| dynamic content ||
|| ||
|+----------------------+|
+------------------------+
In the example above, next/prev are nav buttons that control the dynamic content using $("page").load(url);
On one of the pages I have a popup that has buttons in it that are linked to an ajax call which controls the content of the popup.
These buttons do their job nicely when the page is first loaded. If the page is changed (using the nav buttons) and then changed back, the popup will open but the buttons don't work. If you click the buttons, close the popup, and then reopen the popup, the information you requested on the 1st click shows but the buttons still don't work.
This tells me that the ajax request is fine, there is a problem with the binding of the elements somewhere. Here is my Javascript:
$('#resTable').on('click',this,function() {
$('#ayAvgDPm').html("");
$('#aoAvgDPm').html("");
$('#ayTotProfit').html("");
$('#aoTotProfit').html("");
$('#ayAvgPcPm').html("");
$('#aoAvgPcPm').html("");
$('#ayTotPcProfit').html("");
$('#aoTotPcProfit').html("");
$('#ayrRes').html("");
$('#etfProductPopup').bPopup();
});
$('div[class^="sideNav"]').on('click',this,function() {
$('#yrSummary').fadeIn(200);
$('#yAvgDPm').html("");
$('#oAvgDPm').html("");
$('#yTotProfit').html("");
$('#oTotProfit').html("");
$('#yAvgPcPm').html("");
$('#oAvgPcPm').html("");
$('#yTotPcProfit').html("");
$('#oTotPcProfit').html("");
$('#yrRes').html("");
var yr = "20"+$(this).attr('class').substr(-2);
var req = $.ajax({
url : '../includes/prod_results.php',
type : 'POST',
dataType : "json",
data : {
y : yr,
t : 'ETF'
},
success : function(j) {
var table = "<table cellspacing='0'><tr><th>Year</th><th>Returns</th></tr>";
for(var i = 0; i < 12; i++) {
if (i === 5 && yr === '2014'){
break;
}
var obj = j[i];
var month = obj['month'];
var profit = obj['profit'];
var bal = obj['bal'];
table += "<tr><td style='width:75px'>"+month+"</td><td style='padding: 0 15px'>"+parseFloat(profit).toFixed(2)+"%</td><td style='width:75px'>$"+comma(parseFloat(bal).toFixed(2))+"</td></tr>";
if (i === (11)) {
table += "</table>";
}
}
var YAvgDPm = comma(parseFloat(j.YAvgDPm).toFixed(2));
var OAvgDPm = comma(parseFloat(j.OAvgDPm).toFixed(2));
var YTotProfit = comma(parseFloat(j.YTotProfit).toFixed(2));
var OTotProfit = comma(parseFloat(j.OTotProfit).toFixed(2));
var YAvgPcPm = comma(parseFloat(j.YAvgPcPm).toFixed(2));
var OAvgPcPm = comma(parseFloat(j.OAvgPcPm).toFixed(2));
var YTotPcProfit = comma(parseFloat(j.YTotPcProfit).toFixed(2));
var OTotPcProfit = comma(parseFloat(j.OTotPcProfit).toFixed(2));
$('#yAvgDPm').html("$"+YAvgDPm);
$('#oAvgDPm').html("$"+OAvgDPm);
$('#yTotProfit').html("$"+YTotProfit);
$('#oTotProfit').html("$"+OTotProfit);
$('#yAvgPcPm').html(YAvgPcPm+"%");
$('#oAvgPcPm').html(OAvgPcPm+"%");
$('#yTotPcProfit').html(YTotPcProfit+"%");
$('#oTotPcProfit').html(OTotPcProfit+"%");
$('#yrRes').html(table);
$('#yrGraph').html("<img src='../images/graphs/etf_"+yr+".jpg'>");
return false;
}
});
return false;
});
I know it's fairly lengthy...
I have tried the above script both inside and outside the $(document).ready() handler.
Can someone please help me as to what I am not doing?
EDIT As requested, HTML:
<table id="resTable" cellspacing="0">
<tr>
<th>Year</th>
<th> 1st Quarter</th>
<th>2nd Quarter</th>
<th>3rd Quarter</th>
<th>4th Quarter</th>
<th>Year Total</th>
<th>Month Avg</th>
</tr>
...
</table>
<div id="etfProductPopup">
<h1 style="text-align:center">ETF - Compounded Results</h1>
<div id="popupLeftBar">
<div class="sideNav14">
2014
</div>
<div class="sideNav13">
2013
</div>
<div class="sideNav12">
2012
</div>
<div class="sideNav11">
2011
</div>
<div class="sideNav10">
2010
</div>
<div class="sideNav09">
2009
</div>
<div class="sideNav08">
2008
</div>
<div class="sideNav07">
2007
</div>
<div class="sideNav06">
2006
</div>
<div class="sideNav05">
2005
</div>
<div class="sideNav04">
2004
</div>
<div class="sideNav03">
2003
</div>
</div>
<div id="popupMain">
<div id="yrSummary">
<table cellspacing="0">
<tr>
<th></th>
<th>Avg<br>$/Mth</th>
<th>Total<br>$ Profit</th>
<th>Avg<br>%/Mth</th>
<th>Total<br>% Profit</th>
</tr>
<tr>
<th>Year</th>
<td id="yAvgDPm"></td>
<td id="yTotProfit"></td>
<td id="yAvgPcPm"></td>
<td id="yTotPcProfit"></td>
</tr>
<tr>
<th>Overall</th>
<td id="oAvgDPm"></td>
<td id="oTotProfit"></td>
<td id="oAvgPcPm"></td>
<td id="oTotPcProfit"></td>
</tr>
</table>
</div>
<div id="yrGraph"></div>
<div id="yrRes"></div>
</div>
Really? No body got any other ideas on this? I really need you guys to come through for me on this!
Code for nav buttons:
function nav(d) {
n = page + d;
$('#slide').load('p/'+n+'.php');
}
HTML:
<div class="prev" onClick="nav(-1)" title="Previous Page"><< Previous</div>
<div class="next" onClick="nav(1)" title="Next Page">Next >></div>
EDIT
So I have tried all 3 of the (current) answers and am getting nowhere! This is very frustrating!
I am starting to think there may be some underlying issues and that the bindings are not the complete problem.
The page obviously nees to be loaded as if it was refreshed by the browser. The fact that the page works fine the 1st time it is loaded, regardless of how it is loaded, says to me that the bindings are all fine.
The page also works fine without the popup.
Are there any ideas, other than the bindings, what the underlying issue could be?
Also, I know it is against the rules of SO for me to publish a link to the webpage in question, but if anyone would like a link, I am desperate enough to provide it privately. Please ask.
EDIT
So, I'm thinking, the hidded div (for the popup) is staying populated even after I use the following script:
$('#etfProductPopup').bPopup({
onClose : function() {
postLoadBindings();
$('#ayAvgDPm').html("");
$('#aoAvgDPm').html("");
$('#ayTotProfit').html("");
$('#aoTotProfit').html("");
$('#ayAvgPcPm').html("");
$('#aoAvgPcPm').html("");
$('#ayTotPcProfit').html("");
$('#aoTotPcProfit').html("");
$('#ayrRes').html("");
}
});
I'm thinking the issue may be with the popup script...
https://raw.githubusercontent.com/dinbror/bpopup/master/jquery.bpopup.min.js
EDIT
Also just noticed that the popup div is being duplicated on page load. From the console:
<div id="etfProductPopup" style="display: none; left: 440px; position: absolute; top: 156px; z-index: 2147483650; opacity: 0;">...</div>
<div id="etfProductPopup" style="display: none; left: 440px; position: absolute; top: 156px; z-index: 2147483650; opacity: 0;">...</div>
EDIT
(Yes, I realize if there was a badge for 'Most Edits to Own Question' then I would have won, but I think the more data I provide, the better chance of a response)
I created a #resTable element on another page (loaded the same way as the previous). I noticed that, even when using $('#resTable').unbind() in the document ready handler, clicking the element brings up the popup from the previous page!
HOW IS THIS POSSIBLE WHEN THE SCRIPT FOR THE POPUP DOESN'T EVEN EXIST ON THAT PAGE, LET ALONE THE CONTENT??
Someone, PLEASE! There MUST be a rational explanation for this! I am not trying to program humans, this is a computer code, this runs of bits of data and cannot simply make it up as it goes along!
Can someone please help me with this?
Got this far: Popup is creating duplicate div inside the outer page (the one with the nav buttons). I guess it is doing this so that it layers properly over the whole page, rather than just the page that contains the original code for the div.
EDIT
A more in depth look as to what is happening. The div for the popup is obviously inside the page, not the container. bPopup is moving the div to within the <body> tags of the containing page. This means that the div is available on all pages navigated to after the bPopup call. Closing the popup is not moving the div back, so when the page is reloaded using the nav buttons, the div is being duplicated.
Latest Progress
After speaking to the client I am not able to plost a live link, unfortunately.And to create a jsFiddle would take ages.
As explained in the edits above, the issue is bPopup re-creating the popup div inside the parent page and not removing it on popup close.
I am not sure if there is a way to delete an element on the page? The problem is, if an element can be deleted, the copy that bpopup creates is exactly the same as the original, so any script that targets the duplicate will also target the original
change:
$('#resTable').on('click',this,function() {
...
to
$(document).on('click','#resTable',function() {
...
and
$('div[class^="sideNav"]').on('click',this,function() {
...
to
$(document).on('click','div[class^="sideNav"]',function() {
...
Event delegation that #Sudhir mentioned should have worked, but yet, if you are facing the problem you might wanna try forcefully binding new events every time the page loads. Something like -
In the Main Page, that has the Prev and Next button, define all your functions -
var bindEvents = function(){
//we are unbinding to make
//sure we are not attaching more than once since
//instead of on, I am using direct CLICK binding.
$('#resTable').unbind("click").click(function() {
....
});
$('div[class^="sideNav"]').unbind("click").click(function() {
....
});
};
var nav = function(d) {
n = page + d;
$('#slide').empty();
$('#slide').load('p/'+n+'.php', function(){
//bind events
bindEvents();
});
}
$(function(){
//the first page call, when page loads
nav(0);
});
Remember that, this is not the best approach, but this will ensure that other things are alright. If this binding works then we can isolate the issue and confirm that there is problem in how you are using your bindings. Let me know if it still does not work.
I didn't try any fiddle on this, but have you tried putting the events binding of popup buttons on the "complete" hanlder of the ajax request? It seems a safer way to assure bindings to a single element:
var req = $.ajax({
url : '../includes/prod_results.php',
type : 'POST',
dataType : "json",
data : {
y : yr,
t : 'ETF'
},
success : function(j) {
var table = "<table cellspacing='0'><tr><th>Year</th><th>Returns</th></tr>";
for(var i = 0; i < 12; i++) {
if (i === 5 && yr === '2014'){
break;
}
var obj = j[i];
var month = obj['month'];
var profit = obj['profit'];
var bal = obj['bal'];
table += "<tr><td style='width:75px'>"+month+"</td><td style='padding: 0 15px'>"+parseFloat(profit).toFixed(2)+"%</td><td style='width:75px'>$"+comma(parseFloat(bal).toFixed(2))+"</td></tr>";
if (i === (11)) {
table += "</table>";
}
}
var YAvgDPm = comma(parseFloat(j.YAvgDPm).toFixed(2));
var OAvgDPm = comma(parseFloat(j.OAvgDPm).toFixed(2));
var YTotProfit = comma(parseFloat(j.YTotProfit).toFixed(2));
var OTotProfit = comma(parseFloat(j.OTotProfit).toFixed(2));
var YAvgPcPm = comma(parseFloat(j.YAvgPcPm).toFixed(2));
var OAvgPcPm = comma(parseFloat(j.OAvgPcPm).toFixed(2));
var YTotPcProfit = comma(parseFloat(j.YTotPcProfit).toFixed(2));
var OTotPcProfit = comma(parseFloat(j.OTotPcProfit).toFixed(2));
$('#yAvgDPm').html("$"+YAvgDPm);
$('#oAvgDPm').html("$"+OAvgDPm);
$('#yTotProfit').html("$"+YTotProfit);
$('#oTotProfit').html("$"+OTotProfit);
$('#yAvgPcPm').html(YAvgPcPm+"%");
$('#oAvgPcPm').html(OAvgPcPm+"%");
$('#yTotPcProfit').html(YTotPcProfit+"%");
$('#oTotPcProfit').html(OTotPcProfit+"%");
$('#yrRes').html(table);
$('#yrGraph').html("<img src='../images/graphs/etf_"+yr+".jpg'>");
return false;
},
complete:function(){
//put the bindings to popup here
}
});
try this
$("body").delegate('#resTable','click',function() {
//some codes
}
$("body").delegate('div[class^="sideNav"]','click',function() {
//some codes
}

Open Expanding List from Href

I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});
Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.

Swipe JS not working with populated content

I'm using Swipe JS 2.
If I make the HTML structure myself, it works perfectly, but if I populate the HTML with content coming from the jQuery, it stops on the second slide.
My HTML structure:
<div id="map" class="swipe">
<div class="swipe-wrap">
<div class="city" id="current">
<div class="location">Current Location</div>
</div>
</div>
</div>
<nav>
<ul id="position">
<li class="on">Current location</li>
</ul>
</nav>
This is my structure on the jQuery.
$.getJSON("http://localhost/locations.php", function(localdata) {
$.each(localdata.locations, function(i, geolocal){
var vcountry = geolocal['country'];
var vregion = geolocal['region'];
var vcity = geolocal['city'];
country = vcountry.replace(' ','_');
region = vregion.replace(' ','_');
city = vcity.replace(' ','_');
// THE PROBLEM IS HERE. IF I USE AJAX OR GETJSON HERE INSIDE THE OTHER GETJSON, THE SWIPE IS BROKEN.
$.ajax({
type: "GET",
url: "http://localhost/remotexml.php?url=http://www.yr.no/place/"+ country +"/"+ region +"/"+ city +"/forecast.xml",
success: function(xml) {
var localName = $(xml).find('location name').text();
$('#map div.swipe-wrap .city:last-child').after('\n<div class="city">\n<div class="location">'+localName+'</div>\n</div>\n</div>');
$('#position').append('\n<li>'+localName+'</li>');
}
});
});
})
.success(function() { })
.error(function() { })
.complete(function() {
var slider =
Swipe(document.getElementById('map'), {
auto: 5000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var bullets = document.getElementById('position').getElementsByTagName('li');
});
What happens is: when I see the HTML created by the jQuery, is perfect. jQuery is creating the divs inside the slider and the lis inside the list. Perfect. When I run the website, load and starts perfectly, but then, when changes slide, stops on the second slide, and the second slide is blank. Nothing there. Even thought there is content on the HTML.
The most weird part? If I start the Developer Tools (Command + Alt + I on Chrome), right after the website loads, it WORKS PERFECTLY. What kind of bizar behavior is this? :D
Anybody can help me to make this Swipe JS to run?
If you're populating the slider with content via an AJAX request, then you will most likely have to wait until that AJAX request is finished before you build the slider - i.e. in the success callback of your AJAX function.

Categories