Welcome Guest, Not a member yet? Register   Sign In
CodeIgniter Forums Archived Discussions Archived Development & Programming Ajax Pagination Problem
Ajax Pagination Problem
  • El Forum
    Unregistered
  •  
#1
04-02-2012, 03:55 AM

[eluser]stORM[/eluser]
Hi,
I just have two small problems with the pagination class...
Maybe I need to explain exactly how my site layout looks like to give you a better understanding hopefully you can see whats wrong...

I do have a base_theme folder which is out site of the codeigniter directory. This folder contains /img /js /css as subfolders.

The whole homepage is basically a so called one page layout means, if you click on a link in the navigation it does not load another page it will just scroll down to the section within the page...

In my views I've created a subfolder /inc which includes header_view.php and footer_view.php
The header_view.php content is just the usual header content. While the footer_view.php content loads jquery scripts...

Now the funny part:
When I use the pagination class everything seems to work correctly. So I assumed nothing wrong at all.

So I began to use ajax instead well and the trouble begun.
The problem is when I click on the pagination links the content from the database is shown correctly as assumed without the full page reload (which I need to avoid thats the reason for me using ajax because of the homepage layout) but any jquery script the site used before is not working anymore (e.g. fading links, gallery script and such.)

The bad thing is there is "NO" error inside the console so I cant track it down...
Even while inspecting elements I could see that all scripts are loaded!
When I make a full page reload again all scripts working as expected.

Any clues?

Next problem (not really a problem just wanted to know if that would be possible?)
The pagination links e.g. are shown in this way for my site:

http://127.0.0.1/ci/home/index/5

So I wonder would it be possible to change it to look like this:

http://127.0.0.1/ci/home/index/5/#blog_comment

Some info about the first problem:



Header_View.PHP

Code:
<?php echo doctype('html5') . "\n" ?>
<html dir="ltr" lang="de-DE">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Test</title>
  
  <!-- css -->
  <link rel="stylesheet" href='<?php echo base_url("base_theme/css/style.min.css")  ?>'>

Footer_View.php

Code:
</div>&lt;!-- /wrapper --&gt;
[removed][removed]
[removed]window.jQuery || [removed]('[removed]<\/script>')[removed]  
[removed][removed]
&lt;/body&gt;
&lt;/html&gt;

Ajax.php (this one is used for the ajax pagination)
Code:
&lt;?php  
  if ( !isset($queryResult) ) {
    echo "<h2> Sorry no data available...</h2>";
  } else {
     foreach ($queryResult as $qr) {
     // stripped...
   }
  }
?&gt;

Home_php (The Controller)
Code:
public function index ($offset='')
{
    $limit = 5;
    $this->load->model('home_model');
    $total = $this->home_model->count_total_number_of_records();
    $data['queryResult'] = $this->home_model->list_posts($limit, $offset);
    $config['base_url'] = base_url().'home/index';
    $config['total_rows'] = $total;
    $config['per_page'] = $limit;
    $config['full_tag_open'] = '<div class="pagination">';
    $config['full_tag_close'] = '</div>';
    $config ['anchor_class'] = 'class="btn_silver small"';
    $config['cur_tag_open'] = '<strong class="btn_silver small active">';
    $config['cur_tag_close'] = '</strong>';
    $this->pagination->initialize($config);
    $data['pag_links'] = $this->pagination->create_links();
    $data['title'] = 'Pagination';
    $data['pages'] = $this->home_model->fetch_pages();

    if(IS_AJAX){
      $this->load->view('ajax', $data);
    } else{
      $this->load->view('home_view', $data);
    }
}

Home_View.php
Code:
&lt;?php $this->load->view('inc/header')?&gt;


&lt;?php  
if ( !isset($queryResult) ) {
echo "<h2> Sorry no data available...</h2>";
}
  else {
   //stripped...
}
&lt;?php
    if( isset($pag_links) ) {
     echo $pag_links;
    }
?&gt;

&lt;?php $this->load->view('inc/footer')?&gt;

AJAX (script which does the ajax pagination)
Code:
(function() {
var pag = $('.pagination a'),
     phpPag = $('#pag'),
     tagClound =$('.tag_wrapper');

    pag.live('click', function(e){

    e.preventDefault();

    var link = $(this).attr('href'),
        content = $('#ajax-content');
        phpPag.remove();
        tagClound.remove();

    $.ajax({
      url: link,
      type: "GET",
      dataType: "html",
      beforeSend: function(){
        content.fadeOut(1000).stop(true, true);
      },
      success: function(html){
        content.html(html);
        content.fadeIn(1000);
      }

Sorry for the long post!
kindest regards
  • El Forum
    Unregistered
  •  
#2
04-02-2012, 04:08 AM

[eluser]InsiteFX[/eluser]
Show your footer code with all the javascript links!

It probably a javascript conflict...
  • El Forum
    Unregistered
  •  
#3
04-02-2012, 04:34 AM

[eluser]stORM[/eluser]
Ok but wouldn't I get an error inside of the console?
Anyway here it is:

Code:
</div>&lt;!-- /wrapper --&gt;
script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">[removed]window.jQuery || [removed]('[removed]\/script')/script  
script src='&lt;?php echo base_url("base_theme/js/scripts.js")  ?&gt;' type="text/javascript">/script
script src='&lt;?php echo base_url("base_theme/js/custom.js")  ?&gt;' type="text/javascript">/script
&lt;!-- AnythingSlider initialization --&gt;

  script type="text/javascript">

    $(function(){

video url
    $(".fancyBox").fancybox({
        'overlayShow' : true
    });

    $(".video_fancybox").click(function() {

    $.fancybox({
        'padding'   : 0,
        'autoScale'   : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'     : this.title,
        'width'   : 680,
        'height'    : 495,
        'href'      : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/index.php'),
        'type'      : 'swf',
        'swf'     : {
        'wmode'   : 'transparent',
        'allowfullscreen' : 'true'
        }
      });
      return false;
    });    

    $("a[rel=group_fancybox]").fancybox({
        'transitionIn'    : 'none',
        'transitionOut'   : 'none',
        'titlePosition'   : 'over',
        'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {
          return '<span id="fancybox-title-over">'+ title +' <cite> Image' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '' : '') + '</cite></span>';
        }
    });
    });
  [removed]

&lt;/body&gt;
&lt;/html&gt;
Well I had to modify the script tags above otherwise they got deleted from the forum software hope it works
  • El Forum
    Unregistered
  •  
#4
04-02-2012, 05:23 PM

[eluser]InsiteFX[/eluser]
Your checking for an Ajax request the old way, this is the new CI way.
Code:
if ($this->input->is_ajax_request())
{
   $this->load->view('ajax', $data);
}
else
{
   $this->load->view('home_view', $data);
}

I would also read up on the jQuery No Conflict.
  • El Forum
    Unregistered
  •  
#5
04-02-2012, 08:35 PM

[eluser]skunkbad[/eluser]
[quote author="InsiteFX" date="1333412607"]Your checking for an Ajax request the old way, this is the new CI way.
Code:
if ($this->input->is_ajax_request())
{
   $this->load->view('ajax', $data);
}
else
{
   $this->load->view('home_view', $data);
}

I would also read up on the jQuery No Conflict.
[/quote]

What are your thoughts on the reliability of is_ajax_request(). I've been doing some reading, and it may not be 100% reliable. I personally set a custom post var, and switching to is_ajax_request() would be nice...
  • El Forum
    Unregistered
  •  
#6
04-02-2012, 09:21 PM

[eluser]InsiteFX[/eluser]
@skunkbad, It does the same thing that the old version did.
I extend the session library and in the session update I check to see if it is an Ajax call.
So far I have not had any troubles with it.

This is the code in the input class:
Code:
// --------------------------------------------------------------------

/**
  * Is ajax Request?
  *
  * Test to see if a request contains the HTTP_X_REQUESTED_WITH header
  *
  * @return  bool
  */
public function is_ajax_request()
{
  return ( ! empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest');
}
  • El Forum
    Unregistered
  •  
#7
04-02-2012, 09:55 PM

[eluser]CroNiX[/eluser]
That method will always work if you use jQuery as jQuery explicitly sets that header for its ajax functions. I believe mootools does as well. Others might not, but I haven't run into a case yet where it didn't work. I take that back, I have run into a case where the ajax functionality was manually created and the header wasn't set.
  • El Forum
    Unregistered
  •  
#8
04-02-2012, 10:01 PM

[eluser]stORM[/eluser]
Well it could be a conflict but I dont really think it is since NoConflict is also used in other script files. Anyway I think best would be include the jquery stuff one by one stripping it down and see when it happend hopefully I'll see what went wrong then.

Thank you for pointing the new way I didnt know it exists.

Much to learn for me I'll just started PHP coding a week a go with CI Smile but its fun in some way but also a lot space to improve my coding style I guess Sad

Uhm but dont get me wrong the ajax pagination works perfectly but not the other jquery scripts which I load in the body part they dont work anymore when I use ajax pagination.

best regards
  • El Forum
    Unregistered
  •  
#9
04-02-2012, 10:06 PM

[eluser]skunkbad[/eluser]
Yes, I am always using jQuery. I would be pretty lost without it. I'll give it a shot.




Theme © iAndrew 2016 - Forum software by © MyBB