6 Replies - 3360 Views - Last Post: 28 August 2013 - 10:11 AM

#1 ghqwerty   User is offline

  • if($spareTime > 0){ $this->writeCode(); }
  • member icon

Reputation: 43
  • View blog
  • Posts: 903
  • Joined: 08-August 08

Preloader in modal popup not disappearing

Posted 27 August 2013 - 03:30 AM

I'm using the 'bPopup' jquery plugin for modal popups. In the popup i am trying to create i have an ajax call to the server to get the required information.

It took a while, but this side of it all works.

My issue is that the preloader wont disappear when the ajax call is complete.

Here is my popup function:
$(".userProfileLink").on("click",
			function (event) {
				var userId = event.target.id;
				//$('#preLoader').togglePreloader();						
				
				//modal popup. 
				$('#profilePopup').bPopup({
					followSpeed: 0,
					closeClass: 'popup-close',
					loadUrl: 'ajaxhandler.php',
					loadData: {uID : userId},
					loadCallback: function(){$('#preLoader').togglePreloader();}					
				});				
			}
		);



and here is my togglePreloader function:
$.fn.togglePreloader = function (){
	$(this).toggle().css(				
		{	
			"margin": "10px auto",
			"display": "block"								
		});	
		console.log($(this).css('display'));
	return this;
};



No matter what i try in the call back function the preloader is still there. I've tried using just .hide() as well but to no avail. What i think could be part of the problem is that once the ajax is complete the popup appears to 'reload' itself. Perhaps this has some issue with modifying it's contents? (pure guess)

when the callback function is changed to 'console.log("test")' the 'test' is logged and the content in the popup from the ajax is correct. There are also no errors in the console.

I'm stumped. If it's impossible to have a pre-loader in the popup due the the plugin i am using so be it, but it'd be nice to get this working!

This post has been edited by ghqwerty: 27 August 2013 - 03:31 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Preloader in modal popup not disappearing

#2 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Preloader in modal popup not disappearing

Posted 27 August 2013 - 10:03 AM

Try using the close() method for the popup as seen in the blog.
$ ('#preLoader').BPopup().Close();


Was This Post Helpful? 0
  • +
  • -

#3 ghqwerty   User is offline

  • if($spareTime > 0){ $this->writeCode(); }
  • member icon

Reputation: 43
  • View blog
  • Posts: 903
  • Joined: 08-August 08

Re: Preloader in modal popup not disappearing

Posted 27 August 2013 - 10:42 AM

That is for closing the popup itself. The pre-loader is just an image inside the bPopup (#profilePopup on mine). Although my next thought was to, in the callback, close the whole popup and open a new one with the loaded data and no pre-loader img. But i would much rather just fix this if possible.
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Preloader in modal popup not disappearing

Posted 27 August 2013 - 06:28 PM

I see, I was confused on what you were looking for.

So are you saying you would like to hide the image with the preloader plugin after it shows?

I really don't understand what you are trying to accomplish.
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Preloader in modal popup not disappearing

Posted 27 August 2013 - 06:45 PM

Try this and see if that solves your problem, Lets see what it is that is wrong.
$.fn.togglePreloader = function() {
                $(this).fadeOut(0);
                console.log($(this).css('display'));
                return this;
            };


This post has been edited by laytonsdad: 27 August 2013 - 06:46 PM
Reason for edit:: Wrong button

Was This Post Helpful? 0
  • +
  • -

#6 ghqwerty   User is offline

  • if($spareTime > 0){ $this->writeCode(); }
  • member icon

Reputation: 43
  • View blog
  • Posts: 903
  • Joined: 08-August 08

Re: Preloader in modal popup not disappearing

Posted 28 August 2013 - 06:15 AM

I had just written out a reply and my browser crashed before i could send... That's annoying.

OK, so basically i have an admin page and on it is a list of users. I want to be able to click on a users name and have it load a popup, make an ajax call and populate the popup with this information. Whilst it is making the call though i would like for a preloader to be shown (i have a small gif/jpeg file with a rotating circle in it for this)

Here is the code for the HTML of the popup
echo '<div id="profilePopup">
						<a class="popup-close">X</a>						
							<img src="images/LoadingImg.gif" id="preLoader" style="display:none;"/>
							
						
					</div>';

This is hidden by default by the following CSS:
#profilePopup	{
	background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
	/* min-height: 60px;
	min-width:	120px;
	max-width: 75%;
	max-height: 75%; */
	width:510px;

}


I realised in my previous code that by using

Quote

$(this).toggle().css({ 'display':'block'});

I would always be setting the display to block and not allowing it to be hidden.

I now have:
$.fn.togglePreloader = function (){
		if ($(this).css('display') == 'none'){
			$(this).show().css({
					"margin": "10px auto",
					"display": "block" });
		} else {
			$(this).hide();
		}
	
		console.log($(this).css('display'));
	return this;
};


This now works THE FIRST TIME i click on a name, however, after that neither the preloader or the close button is displayed (it shows up as just a small square). The ajax call still works and within a couple of seconds the popup is populated with data - still without the close button though.
I reckon this could be how the popup is closing itself though.
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Preloader in modal popup not disappearing

Posted 28 August 2013 - 10:11 AM

Try using a callback for the css and see if this fixes your preloader problem.

$.fn.togglePreloader = function (){
		if ($(this).css('display') == 'none'){
			$(this).show(function(){
                   $(this).css({
			"margin": "10px auto",
			"display": "block" }); 
                })
		} else {
			$(this).hide();
		}
	
		console.log($(this).css('display'));
	return this;
};


As for the close button "x" I am not sure, do you get any errors in your console?

This post has been edited by laytonsdad: 28 August 2013 - 10:12 AM
Reason for edit:: Code tags didn't take

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1