Delving into Ajax and Jquery...bipolarism

[Ravinos]

Okay so I started recoding my browser game using more javascript and Ajax. I'm coming along pretty good and am Primarily using Jquery for the advanced stuff.

I'm to the point now where I'm getting frustrated trying to work with continuity. I've come into the problem where my code works totally different in each browser (Firefox,IE,Chrome,Safari) I've gotten most bugs worked up but the thing is on two different computers I have Firefox 4 and IE 9....my code works totally different on each system.

For instance my Laptop IE runs great, my desktop won't render the page half the time and when it does it loads things into the wrong divs. On my laptop Firefox formats everything differently and on my desktop it's fine. Now the kick in the teeth is that some times they flip flop. My friend says my game works fine in both. On my end I can't be sure what is working and what isn't. I spend most of my coding time fighting between these issues. I feel like I'm going insane.

I know there is issues with browser not clearing cache but I always clear after making changes to the scripts. Is there a single browser for Javascript devs that auto clears the cache and adds continuity to Javascript development or am I missing something? Should I just get everything working in Firefox and ignore IE?

I really don't have anything advanced as far as scripting. I've got the basic Facebook java SDK running to autoresize my pages. I'm using jquery to update forms and to load/refresh content into divs.

[Jackolantern]

How much are you doing in vanilla JS? If you use jQuery for everything, cross-browser compatibility really needs almost no thought at all. Also be sure to get Firebug for Firefox if you don't already have it. It is the best JS tool available to date!

[Ravinos]

I'm mainly using JQUERY. I removed all of the vanilla JS code and I'm still getting random issues between browsers.

Code: Select all

*links loading into divs*
<script type="text/javascript">
$(document).ready(function() 
{	
	$("#homePage").click(function()
{
$("#coreDiv").load('coretest.php');
});
});
</script>

*this is what I'm using for form submission that load into divs*
<script type="text/javascript">
  $(document).ready(function() {
    $('#MyForm').ajaxForm({
      target: '#submittest',
      success: function() {
        $('#submittest').fadeIn('slow');
		document.MyForm.reset();
      }
    });
  });
  </script>

I run into problems where randomly clicking one of the page links doesn't go to the coreDiv but it replaces all of the content. The same thing happens from time to time on the form submit. The target magically becomes the main window.

[Xaleph]

I suppose you should look at $(document).ready(), this means the jquery starts running after the document is ready. What i mean is, run it all in 1 lap of code, not in different script tags. The best thing you can do is create an object for it, include it using the <script> and in that js file, start with $(document).ready({})

Also, create your functions as methods in the JS object. Something like:

$(jquery).ready({
var YourGame = {};

YourGame = {
SomeFunction : {
},

AnotherFunction : {
}
}
})

[Ravinos]

Thanks Xaleph I'll try working with that.
For those familiar with using AJAX to design layout and loading of content I have a question. Before I used to use IFRAMES instead of divs for all of my targets. With some iframes needing to auto refresh or do targeted refreshes I got sick of seeing the contents blink. Since using more JS/AJAX to target divs I have found that the content no long blinks but takes a lot longer to actually change the content. Is there

Should I do this example layout:

<div>Header</div>
<div>Navigation</div>
<div>Content</div>(Target for navigation)
<div>Footer</div>

For the above example you have a more modular website where navigation loads into the Content div. Each page consists of only the code for that page. This is how I laid stuff out when using iframes in the past only refreshing or changing content when needed through JS.

Or this:

<div container> (target for navigation)
*<div>Header</div>
<div>Navigation</div>
<div>Content</div>
<div>Footer</div>*
</div>

For the above example have each page is a page unto itself. Each time you navigate it loads the entire content of the page into the Container div. This method seems quicker and smoother also needs less repeating of code.

[Jackolantern]

Have you tried out any jQuery plugins that could do the same thing? Some are highly optimized, and some even just make the illusion of an effect if the illusion can run better. It would definitely be something to check out. There are some real JS geniuses making jQuery plugins!

[Ravinos]

I figured out a lot of my issues....it was with my half-assed self programmed JS. It was conflicting with the loading of the JQUERY functions. All fixed now.....running smooth as butter now. Still working on revamping the pages. Combat system is quick and flawless and has opened up a realm of possibilities for me of doing my fully interactive fighting engine


Now...since before i was using each page enclosed in an IFRAME if i used the php exit(); function it didn't matter but since it is now loading in a div/included in a master UI file whenfver an EXIT or DIE function is thrown, it doesn't render the rest of the page. How do I go about solving this? Should I use bypass variables to skip that section and continue on or do something like exit(include 'footer.php'); ?

I never thought switching from IFRAMEs to big boy JS Divs would have such a learning curve

[Jackolantern]

Now...since before i was using each page enclosed in an IFRAME if i used the php exit(); function it didn't matter but since it is now loading in a div/included in a master UI file whenfver an EXIT or DIE function is thrown, it doesn't render the rest of the page. How do I go about solving this? Should I use bypass variables to skip that section and continue on or do something like exit(include 'footer.php'); ?

What do you mean solving this? That is exactly what DIE and EXIT are for. They end all script generation from the point at which they are parsed. What are you trying to use them for? It sounds like you need to change to a more applicable command.

[Ravinos]

Well I use Die and Exit to stop the code from running yes but the problem lies in the need to run the code past the exit or die command. If exit or die runs then the footer to my page doesn't load, thus breaking the page layout. That is what I want to prevent.

[Jackolantern]

Yes, no code should ever run past a DIE or EXIT command, so any previous configuration that allowed it to was causing PHP to perform incorrectly. I can think of several instances right off hand in my own code where DIE or EXIT not killing script parsing would have been a major security concern.

To solve the problem elegantly without needing to use clunky and confusing flags, just separate out the large segments of your page that may need to run past scripts EXIT/DIE. Usually this comes about naturally if you roll your own simple template system by separating out your header, footer, nav bar, and other large segments of the page that could be considered part of the "template" into their own PHP files. Then, when you need them in a new page, you simply include them. That way, you can do something like this anytime you need to end execution of your page:

Code: Select all

if (fatalCondition == true) {
     //we hit a fatal condition that means the page script must abort, but we need to show the footer
     include('../blackPageTemplate/footer.php');
     exit();
} else {
     //continue on with the page if the fatal condition was not hit....
...continue on with the page script...
...until we hit the regular end of the page script...
...so we include the page footer again, this time for when the page needs to be closed out on regular, non-fatal runs...
include('../blackPageTemplate/footer.php');
?>

This way you can show your footer and do anything else to complete the page right at the spot where you exit out of the page. This could mean that your average page skeleton looks something like this:

Code: Select all

<?php
include('../blackPageTemplate/header.php');
include('../blackPageTemplate/navbar.php');
//insert content and unique page logic here, which may include exit() commands with closing footer include calls within branching logic to abort the script where appropriate
include('../blackPageTemplate/footer.php');
?>

While each "chunk" PHP include file may be kind of a mess of unclosed HTML tags (since the matching tag may be in another file), and likely will upset most intelligent IDEs, you would likely want to make these all together on the same page, and then simply cut'n'paste them out into their own files afterwards.