Resolved javascript page load w/o refresh is not loading fb like button or php session

FH30HurleyFoley · 01-26-2013, 05:24 AM

I am using this code to load content into my blog1/index.php file without having to refresh the page and reload the nav bar. when I first load blog1/index.php, the php and javascript in blog1/content/index.php load fine, but when I use a link on the nav bar to load another page such as blog1/content/contact.php and then use the link to reload blog1/content/index.php back into blog1/index.php, none of the javascript seems to be loading. the facebook like button won't load, and the javascript/php/mysql mp3 player is not visualy showing that the audio is still playing or what time it is at(although the audio is in fact still playing, which I want.)..... what the heck is going on here....? I've been reading about it and I just don't understand what to do.....

this is my javascript file... called general.js

Code:

$(document).ready(function() {
	//initial
	$('#content').load('content/index.php');
	
	//handle menu clicks
	$('ul#nav li a').click(function() {
		var page = $(this).attr('href');
		$('#content').load('content/' + page + '.php');
		return false;
	});
});

FH30HurleyFoley · 01-26-2013, 06:51 AM

any help would be appreciated.... thank you in advance....

teddy4d · 01-26-2013, 05:33 PM

I hope I can help. I am doing something almost the same with my site and had the same problems.

I encountered a lot of different issues, mostly to do with document ready and the click function. the best thing I did was to get rid of .click and use .live instead

Code:

$("#edit_pencil_icon").live({
  
  click: function() {
      
        var this_html = false;
        
        this_html = show_editing_fields();

        $(".rightsidepane").append(this_html);

  },
  
   keyup: function() {
 
  },
  mouseover: function() {
    $(this).addClass("zfontblue");
  },
  mouseout: function() {
    $(this).removeClass("zfontblue");
  }
});

That will help you a lot I think.

However, if you want your site to be like a web app, instead of typical html using HREF links, then you have some more work to do and I can help you greatly with that. For example, I had to remove the doc ready item from every page, and put all the click functions inside index.php and they get loaded only once.

There is a lot that can be done to make it work well, but I would suggest the simple .live change to be the first thing you look at.

I've been building my webapp for 2.5 years!! Had those problems too - it's a pain!

I hope I've helped a bit?

FH30HurleyFoley · 01-26-2013, 08:55 PM

Thank you for responding! I tried changing the .click to .live and nothing seemed to change... but I'll take another more in depth look later... I'm going to spend some more time today just getting the site to function without the web-app look to it... I want to get something online for the user sooner than later so they can start posting to their blog. and btw.... 2.5 years...?! how intricate of a web app are you talking about...?! would you mind if I asked your email address? I had a question or two about web development that I wanted to ask you. would you say that using a combo of html/javascript/jquery/php/mysql is a viable way to make a good looking web app or is wordpress and all that other stuff the best way to go nowadays...?

Airblader · 01-26-2013, 09:01 PM

.live() is deprecated, use .on() instead (see jQuery API).

FH30HurleyFoley · 01-26-2013, 10:27 PM

should i be able to JUST replace .click() with .on() or .live() in the code above and have everything function right... cuz it doesn't seem like that's the case.... so how would I get the above code to work with .on() or .live()....?

rnd me · 01-27-2013, 05:48 AM

the problem is likely your use of ready(). ready() will only fire once, when the page loads.
if you don't reload the page, guess what? you don't re-fire ready().

this is a huge obstacle for many folks, and there is no simple answer.

what you need to do is manually re-fire those ready events. Problem with that: sometimes it breaks certain plugin functionality to load them twice. An example would be a script that adds mouse events to a nav menu: it can get applied twice, causing a flickering to occur.

on the other hand, sometimes you need to call the ready stuff each virtual page load. an example of this would be turning a <ul> of images into a slideshow: new html needs new treatment.

so, there is no one-size-fits-all answer.

the main challenge with re-calling ready() is that the ready functions are not kept around by jQuery, so you can't loop through them and simply re-invoke them. One way around this is by sneaking a collector assignment into the ready call. This is invisible to jQuery, and shouldn't affect its normal operation at all.

before you load any code, define a collector:

Code:

myLoad=[];

then modify all the readys you need later by tucking the ready function into the array:

Code:

$(document).ready(function(){ ...

becomes

Code:

$(document).ready( myload[myload.length]= function()

when you want to "Reload", you can simply call

Code:

myload.map(function(a){a();});

to re-invoke all the readys you tagged.
now, what about that problem where some script shouldn't run each time?
you fix that with a global variable indication that the page has already been loaded, and using an if ststemnt in your ready functions around each run-once section.

Code:

window.onload=function(){ loaded=true;};

and then in a ready():

Code:

if(!loaded){
  //do something only once per tab opening
}

in this fashion, you have much more control over page initialization; separating the site initialization from the page, something jQuery alone isn't setup to do.

good luck!

FH30HurleyFoley · 01-27-2013, 06:05 AM

thank you all for responses!!! I will take a look at them and see if they could be better solutions, but for now I did some other browsing and used this code to fix the problem. I didn't want to do it this way... but the page isn't going to have too much content so it shouldn't be an issue loading it all... but in the future It sounds like these other options are a way better way to accomplish this. Thank you all so much!

Code:

<script type="text/javascript">

   		 function toggleVisibility(newSection) {
    	    $(".section").not("#" + newSection).hide();
    	    $("#" + newSection).show();
   		 }
		</script>