Question

In order to be able to use this awesome plugin: Jquery iphone contacts

i need to update my existing markup (normal list):

<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Barcelona"><strong>Barcelona</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Sevilla"><strong>Sevilla</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Cadiz"><strong>Cadiz</strong>747,290</a></li>
   </ul>
</div>

Into (Add Navigation indicators):

<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
      <li>
        <div id="nav-indicator-fixed"></div>
        <a name="A"></a>
      <div class="nav-indicator" id="nav-a">A</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Arnhem" title="Arnhem"><strong>Arnhem</strong>144,101</a></li>
            <!-- More info here -->
         </ul>
      </li>
      <li>
        <a name="B"></a>
      <div class="nav-indicator" id="nav-b">B</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Bolsward" title="Bolsward"><strong>Bolsward</strong>9,607</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Buren" title="Buren"><strong>Buren</strong>25,644</a></li>
            <!-- More info here -->
         </ul>   
      </li>
   </ul>
</div>

So i have to

add:

 <div id="nav-indicator-fixed"></div>
            <a name="A"></a>
          <div class="nav-indicator" id="nav-a">A</div>
          <ul>

Before A items and

</li></ul> after A items, (and same with each existing first letter), am i right?

Now is when i don’t know to do it in front end using jquery or if i can do it in the server using php

i generate my markup with a simple query: ‘select name from citys order by name desc’

how and where would you do it?

(shouln’t actually the plugin have the feature¿)

-EDIT-

php code was requested:

function nube_ingredientes($limit = 50){
    $query = "SELECT count(*) as num, nombre FROM ciudades WHERE GROUP BY nombre ORDER BY num DESC LIMIT $limit";

    $result = mysql_query($query);
        $html .= '<div class="content">';

            $html .=    '<ul>';
                while($taginfo = mysql_fetch_row($result)){
                     $numtags = $taginfo[0];
                     $tagname = $taginfo[1];
                     $tagurl = urlencode($tagname);
                     $tagsize = 9 + intval($numtags)*2;
                     $bla = 'get_items("'.str_replace(' ','-',$tagname).'")';
                     $tagname = str_replace('-', ' ', $tagname);
                      $html.= "<li><a href='#router' onclick='$bla' c='$numtags'>$tagname</a></li> "."\n";

                }
        $html .=    '</ul>
                  </div>';

        echo $html;
 }

Answer 1

I haven’t tested this, so consider it psuedo-code, however it should give you a good starting point. The idea is to check the first letter of each row, and if it’s different than the first letter of the previous row, emit the new HTML code. It is always best to emit the HTML code as close to final as possible. So this solution has no complicated changes required to the front end.

function nube_ingredientes($limit = 50){
$query = "SELECT count(*) as num, nombre FROM ciudades WHERE GROUP BY nombre ORDER BY num DESC LIMIT $limit";

$result = mysql_query($query);
    $html .= '<div class="content">';
        $html .=    '<ul>';
            while($taginfo = mysql_fetch_row($result)){
                 $numtags = $taginfo[0];
                 $tagname = $taginfo[1];
                 $tagurl = urlencode($tagname);
                 $tagsize = 9 + intval($numtags)*2;
                 $bla = 'get_items("'.str_replace(' ','-',$tagname).'")';
                 $tagname = str_replace('-', ' ', $tagname);
                 $thisChar = strtoupper(substr($tagname, 0, 1)); //Added by msigman
                 if($lastChar != $thisChar);//Added by msigman
                 {
                    $html .= "<li><div id='nav-indicator-fixed'></div>
                    <a name='$thisChar'></a>
                    <div class='nav-indicator' id='nav-$thisChar'>$thisChar</div>
                    <ul>"; //Added by msigman
                  }
                 $html.= "<li><a href='#router' onclick='$bla' c='$numtags'>$tagname</a></li> "."\n";
                 if($lastChar != $thisChar); //Added by msigman
                 {
                    $lastChar = $thisChar; //Added by msigman
                    $html .= "</li></ul>"; //Added by msigman
                 }
            }
    $html .=    '</ul></div>';
    echo $html;

}