Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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;
    	});
    });
    Last edited by FH30HurleyFoley; 01-27-2013 at 06:15 AM.

  • #2
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    any help would be appreciated.... thank you in advance....

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • Users who have thanked teddy4d for this post:

    FH30HurleyFoley (01-26-2013)

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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...?

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    .live() is deprecated, use .on() instead (see jQuery API).

  • #6
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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()....?
    Last edited by FH30HurleyFoley; 01-27-2013 at 12:57 AM.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    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!
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    FH30HurleyFoley (01-27-2013)

  • #8
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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>
    Last edited by FH30HurleyFoley; 01-27-2013 at 06:09 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •