Indie-Resource.com

Posted: **Fri Mar 15, 2013 9:47 am**

I am embarrassed to say this, but for the life of me, I can't grasp of integrating AJAX (JQuery) with CodeIgniter for a simple website with multiple pages.
I am willing to pay for this request, via PayPal.

Basically, using the latest CodeIgniter framework with AJAX (JQuery) to allow smooth transitions between page links, while also displaying the loading gif (I'm not concern with what circular rotating gif is used.
So essentially this:
- A website with four webpages (Home, Page1, Page2, Page3).
- Each of the webpages are in PHP, with echoing of HTML commands; Thus home.php; page1.php, page2.php, page3.php.
- The pages just can have a "Hello World" text in them for content; or better with Hello Home, Hello Page1, etc.
- Fade Transition between the clicks of pages (the amount of time is not important)
- Display of a rotating circular gif while loading the content of a new page
- Would like four button links (not as part of a menu bar; just four independent link buttons)

Further detail:
There should be a main page used for the layout, with each of the four pages displaying their contents within the main page.
Thus the main page would say display the header and footer, with a section inside for the change of content, based on the page selected.

Bonus:
If caching is also applied... but I think I can code that in once I grasp this.

Is this possible and further details needed?
And yes I am willing to provide compensation for this, via PayPal.

And this has been the biggest holdup for me to get my game going...

Posted: **Fri Mar 15, 2013 11:15 am**

Basicly you are trying to make a one page website? Then first you should know, that Codeigniter is not the way to go, you may want to take a look at either AngularJS or BackboneJS.

Anyway, why is it, that you want to use Ajax again? Making page load when clicking on a link? It seems like you are going to make a very simple page, so how about this approach.

Don't mind the php variables names.

If we simply start by processing in all pages in one load, like this.

Code: Select all

<div class="page index"> <?php print $contentOfTheIndexPage ?> </div>
<div class="page page1"> <?php print $contentOfPageOne ?> </div>
<div class="page page2"> <?php print $contentOfPageTwo ?> </div>
<div class="page page3"> <?php print $contentOfPageThree ?> </div>

You would have some css hiddin the elements, so not all are showed at once.

Code: Select all

/* Hide all pages */
.page {
  display: none;
}
/* Index page should be visible, as initial */
.page.index {
  display: block;
}

So now, when you first get to the page, only the index div is visible. Now all you need to do, is make some js, which handles which div page that are active, and therefore visible.

This also makes the page cache able, and completely eliminates all load time.

Posted: **Fri Mar 15, 2013 1:22 pm**

Would have to agree unless each page is a ton of info. The way you are wanting to do this seems to go against codeignitors main purpose. I personally would just use a single javascript index page and load it all through ajax.

Posted: **Fri Mar 15, 2013 3:33 pm**

Hummm... I see there...

And to then use the database side of things, for example verifying and saving a newly created Character Name. Would such code be implemented through the initial loading of the contents of pages, of which then using AJAX to avoid the page refresh; or of something else?

For example of a flow process:
1 - Display Splash Screen
2 - When clicked on, check database of existing account
3 - If account exists, go to Character Generation Content, else go to Home Content.

Posted: **Fri Mar 15, 2013 6:59 pm**

ajax would handle any DB queries after that.

Posted: **Sat Mar 16, 2013 12:18 am**

Yeah, I also second (third?) going for a single-page app. I think Backbone is a bit of overkill though. You can use the new feature of AJAX in HTML5 to show progress, so you can actually create meaningful loading bars. You can see some simple code for how to do that here (note the fix to the authors problem in the post below, though). I think you still get progress events for load, but I am not sure.

Posted: **Sat Mar 16, 2013 1:35 pm**

may i recommend Bootstrap

http://twitter.github.com/bootstrap/

Posted: **Sat Mar 16, 2013 10:06 pm**

Just remember that if it is important to get search engines to index your various pages, a single-page app is the wrong way to go. Most search engines bots will not run scripts because they are too time and CPU consuming, and will only index what is there in the base HTML. It also means people using accessibility tools such as screen readers and those with Javascript turned off for whatever reason will be locked out of your site.

However, if these aren't major concerns, a SPA (single-page application) could be the right move

Posted: **Mon Mar 18, 2013 8:06 pm**

Thanks for all of the advice...

Currently been on travel for the week, so haven't been able to do much.

Indie-Resource.com

Need Help with CodeIgniter and AJAX (will pay)

Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)

Re: Need Help with CodeIgniter and AJAX (will pay)