Mini pager creates invalid xhtml

Is that why it forces Safari to NOT use AJAX? When paging through, Safari does a page refresh. Firefox works fine.

Checked in a fix. Will appear in Views 2.3

I upgraded a site that had this issue to latest Drupal and Views 2.3, but still has same problem.
<li class="pager-previous first"> </li>

Seems the fix didn't work...

Ah, sorry. I was confusing 'valid' with 'logical'...

If you were just fixing invalid code, then yes it is fixed, but I was referring more to the fact that there's still an empty <li> on the page. Wouldn't it be better to just not display that <li> if there's not real value in it?

I only ask as there are some themes I use that put a border around the <li>'s in the pager, so they end up displaying an empty box that doesn't look right...

The empty li remains in order to keep everything else from jumping around when the item is not printed. Without it, especially with AJAX on, having the >> and << move around is very awkward.

Just noting my fix here; removes the empty <li>'s:

first, unset content of previous/next if empty:

  $li_previous = theme('pager_previous', (isset($tags[1]) ? $tags[1] : t('previous in list')), $limit, $element, 1, $parameters);
  if (empty($li_previous)) {
    unset ($li_previous);
  }

  $li_next = theme('pager_next', (isset($tags[3]) ? $tags[3] : t('next in list')), $limit, $element, 1, $parameters);
  if (empty($li_next)) {
    unset ($li_next);
  }

Then only print out previous and next if they are not empty:

	if (!empty($li_previous)) {		
		$items[] = array(
			'class' => 'pager-previous',
			'data' => $li_previous,
		);
	}

	if (!empty($li_next)) {	
		$items[] = array(
			'class' => 'pager-next',
			'data' => $li_next,
		);
	}

This seems to be working ok for my purposes.

In what files/functions do I have to implement this code?

Also, I want to modify this if possible, to still display the "<<", but with a css-class to show them in a grey-tone and without the href-function, so people know they cant click it anymore.

Here is a patch to solve this problem

Assigned and changed state for review

This patch works, thank you.

But until it is applied to Views officially I think it would make more sense to apply this fix on the theme layer so you don't lose it when the module is updated. This way you can also make site specific customizations. IE, I don't use the << & >> arrows. I use an image instead so I can remove those arrows without having to reapply that to the module as it is updated.

Anyway, here is how. In my theme's template.php file I insert the following (pulled mostly from the patched function)

<?php
function [place_your_theme_name_here]_views_mini_pager($tags = array(), $limit = 10, $element = 0, $parameters = array(), $quantity = 9) {
  global $pager_page_array, $pager_total;

  // Calculate various markers within this pager piece:
  // Middle is used to "center" pages around the current page.
  $pager_middle = ceil($quantity / 2);
  // current is the page we are currently paged to
  $pager_current = $pager_page_array[$element] + 1;
  // max is the maximum page number
  $pager_max = $pager_total[$element];
  // End of marker calculations.

  $li_previous = theme('pager_previous', (isset($tags[1]) ? $tags[1] : t('<<')), $limit, $element, 1, $parameters);
  $li_next = theme('pager_next', (isset($tags[3]) ? $tags[3] : t('>>')), $limit, $element, 1, $parameters);

  if ($pager_total[$element] > 1) {
    if (!empty($li_previous)) {
      $items[] = array(
        'class' => 'pager-previous',
        'data' => $li_previous,
      );
    }

    $items[] = array(
      'class' => 'pager-current',
      'data' => t('@current of @max', array('@current' => $pager_current, '@max' => $pager_max)),
    );

    if (!empty($li_next)) {
      $items[] = array(
        'class' => 'pager-next',
        'data' => $li_next,
      );
    }
    return '<div class="mini-pager-wrapper"><div class="mini-pager">'.theme('item_list', $items, NULL, 'ul', array('class' => 'pager')).'</div></div>';
  }
}

?>

Note to replace the [place_your_theme_name_here] bit with your theme name.

Note I also added a 'mini-pager' div wrapper to the item list the pager generates. Why? This was done so I could achieve that centered look that the empty first and last arrows had previously preserved. After getting help here:

http://www.pmob.co.uk/pob/centred-float.htm

I added the following to my CSS to make it work.:

 .mini-pager .item-list .pager{
 	position:relative;
 	left:50%;
}

 .mini-pager{
 	float:right;
	position:relative;
	left:-50%;
	text-align:left;
 }

 .mini-pager-wrapper{
	/*where to add pager background and borders*/
 }

Were the patch to be rolled into Views I would strongly consider amending it to include the 'mini-pager' div. Without the centering it doesn't look good to the point made earlier by Merlin. Maybe someone else can address that. I've never made a patch. Applying them is hard enough for me.

So, I Hope this post helps someone else as much as you all helped me.

Thanks for Views!

dereine, can you review this?

If you want to have a most parallel code to the default pager code If(!empty ) should be just an if.

But if it's not needed this code is fine.

One question

  if (empty($li_next)) {
    $li_next = " ";
  }

Why was this code originally added. Sadly i have no idea.

The   are there to keep the pager from jumping around. If you go from page 1 to page 2 (on page 1 you have no previous) without a placeholder there, the spacing on the pager changes. That must be retained for UX reasons.

Reading through this, I see that I've explained this previously, but people have ignored it.

Let me state categorically: The empty <li> must be retained to prevent the pager from jumping around. The   should be perfectly valid markup.