osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Jquery tabs et array imbriqués [RESOLU]
equisol
posté 14 Jul 2014, 08:49
Message #1


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 124
Inscrit : 7-November 07
Lieu : Lyon
Membre no 19668



Bonjour,

Je cherche à imbriquer 2 Jquery Tabs pour avoir un menu et un sous-menu qui se déclenches au passage de la souris.
Avec un menu simple, pas de problème (ou presque pas) : menu simple.
Mais une fois le sous-menu imbriqué, je perds l'interactivité des onglets et tous les enregistrements de la BDD sont listés les uns sous les autres : sous-menu

Voici le code :
Code
    <div id="contentTop">
<?php
    $agri_contenu = Array();
    $conteur_agri = 1;
    $liste_query = tep_db_query("select distinct eo.products_options_id, eov.products_options_values_id, eov.products_options_values_name, eovtoeo.products_options_values_to_products_options_id from " . TABLE_PRODUCTS_OPTIONS . " eo, " . TABLE_PRODUCTS_OPTIONS_VALUES . " eov, " .TABLE_PRODUCTS_OPTIONS_VALUES_TO_PRODUCTS_OPTIONS . " eovtoeo where eo.products_options_id = '1' and eo.products_options_id = eovtoeo.products_options_id and eov.products_options_values_id = eovtoeo.products_options_values_id and eov.language_id = '" . (int)$languages_id . "' order by eov.products_options_values_name");
?>
            <ul>    
<?php
    while ($liste = tep_db_fetch_array($liste_query)) {
?>
                <li>
                    <a href="#contentTop-<?php echo $conteur_agri; ?>">|&nbsp;<?php echo $liste['products_options_values_name']; ?>&nbsp;|</a>
                </li>
<?php
$agri_contenu[] = array(
     'num_agri' => $conteur_agri,
     'products_options_id' => $liste['products_options_id'],
     'products_options_values_id' => $liste['products_options_values_id'],
     'products_options_values_name' => $liste['products_options_values_name'],
     'products_options_values_to_products_options_id' => $liste['products_options_values_to_products_options_id'],
);
$conteur_agri++;
        }
?>
            </ul>

<?php
reset($agri_contenu);

foreach( $agri_contenu as $agri ) {

?>

    <div id="contentMiddleTop">
<?php
    $fermes_contenu = Array();
    $conteur_fermes = 1;
    $products_query = tep_db_query("select distinct ea.options_id, p.products_id, pd.products_name, pd.products_baseline from " . TABLE_PRODUCTS_ATTRIBUTES . " ea, " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where ea.options_values_id = '" . $agri['products_options_values_id'] . "' and ea.products_id = p.products_id and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
?>
            <ul>    
<?php
    while ($products = tep_db_fetch_array($products_query)) {
?>
                <li>
                    <a href="#contentMiddleTop-<?php echo $conteur_fermes; ?>">|&nbsp;<?php echo $products['products_name']; ?>&nbsp;|</a>
                </li>
<?php
$fermes_contenu[] = array(
     'num_agri' => $conteur_agri,
     'num_ferme' => $conteur_fermes,
     'products_id' => $products['products_id'],
     'products_name' => $products['products_name'],
     'products_baseline' => $products['products_baseline'],
);
$conteur_fermes++;
        }
?>
            </ul>

<?php
reset($fermes_contenu);

foreach( $fermes_contenu as $fermes ) {

?>


            <div id="contentMiddle">
                <div id="contentMiddleLeft" class="pinLeft">
                    <div id="titleWrap" class="contentText">
                        <h1><?php echo $fermes['products_name']; ?></h1>
<?php if (tep_not_null($fermes['products_baseline']))
    {
                          echo '<p id="baseline">' . $fermes['products_baseline'] . '</p>';
    }
?>
                    </div>
                    <div id="synhtesisWrap">
                        <div id="synhtesisLeft" class="contentText">
                        <?php echo '<h2>' . tep_draw_separator('pixel_red.gif', '27', '1') . TEXTE_ACTEURS . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?>
                                <p>
                                    <ul>
<?php
    $membres_query = tep_db_query("select distinct m.members_id, m.members_firstname, m.members_lastname from " . TABLE_MEMBERS . " m, " . TABLE_ADDRESS_BOOK . " ab where m.members_id = ab.members_id and entry_company = '" . $fermes['products_id'] . "' order by m.members_firstname");
    while ($membres = tep_db_fetch_array($membres_query)) {
                                        echo '<li>' . $membres['members_firstname'] . '&nbsp;' . $membres['members_lastname'] . '</li>';
    }
?>
                                    </ul>
                                </p>
                        </div>
                        <div id="synhtesisRight" class="contentText">
                        <?php echo '<h2>' . tep_draw_separator('pixel_red.gif', '77', '1') . TEXTE_COORDONNEES . tep_draw_separator('pixel_red.gif', '77', '1') . '</h2>'; ?>
                                <p>
                                    <ul>
<?php

    $product_info_query = tep_db_query("select p.products_id, p.products_street_address, p.products_postcode, p.products_city, p.products_phone_mobile, p.products_phone_fix, pd.products_name, pd.products_baseline, pd.products_description, pd.products_url from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . $fermes['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
    $product_info = tep_db_fetch_array($product_info_query);

?>
                                        <li><?php echo stripslashes($product_info['products_street_address']) . ' - ' . stripslashes($product_info['products_postcode']) . ' ' . stripslashes($product_info['products_city']); ?></li>
                                        <li><?php echo 'Mobile : ' . stripslashes($product_info['products_phone_mobile']);
    if (tep_not_null($product_info['products_phone_fix']))
                                                  echo ' / Fixe : ' . stripslashes($product_info['products_phone_fix']); ?>
                                        </li>
                                        <?php if (tep_not_null($product_info['products_url'])) echo '<li>Site Web : <a href="http://' . $product_info['products_url'] . '" target="_blank">' . stripslashes($product_info['products_url']) . '</a></li>'; ?>
                                    </ul>
                                </p>
                        </div>
                        <div id="synhtesisCenter" class="contentText">
                        <?php echo '<h2>' . tep_draw_separator('pixel_red.gif', '27', '1') . TEXTE_ACTIVITES . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?>
                                <p>
                                    <ul>
<?php
    $activites_query = tep_db_query("select distinct eo.products_options_id, eo.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " eo, " . TABLE_PRODUCTS_ATTRIBUTES . " ea where eo.products_options_id = ea.options_id and ea.products_id = '" . $fermes['products_id'] . "' and eo.language_id = '" . (int)$languages_id . "' order by eo.products_options_name");
    while ($activites = tep_db_fetch_array($activites_query)) {
?>
                        <?php echo '<li>' . $activites['products_options_name'] . '</li>'; ?>
<?php
    }
?>
                                    </ul>
                                </p>
                        </div>
                    </div><!--fin synthesisWrap-->
                    <div class="clearer" style="text-align:center;"><?php echo tep_draw_separator('pixel_red.gif', '250', '1'); ?></div>
                    <div id="detailsWrap" class="contentText">
                        <?php echo $product_info['products_description']; ?>
                    </div><!--fin detailsWrap-->
                </div><!--fin contentMiddleLeft-->
                <div id="contentMiddleRight" class="pinRight">
<?php
    $pi_query = tep_db_query("select products_id, image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . $fermes['products_id'] . "' order by sort_order");
?>
                    <div id="piGal-<?php echo $fermes['products_id']; ?>" class="piGal">
                        <ul>
<?php
$pi_counter = 0;
while ($pi = tep_db_fetch_array($pi_query)) {
    $pi_counter++;
    
    $pi_entry = '<li style="float:left;"><a href="';
    
    $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
    
    $pi_entry .= '" target="_blank" style="background:none;" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';
    
    $pi_entry .= '</li>';
    
    echo $pi_entry;
}
?>
                        </ul>
                    </div>
                </div><!--fin contentMiddleRight-->
<script type="text/javascript">
$('#piGal-<?php echo $fermes['products_id']; ?> ul').bxGallery({
  maxwidth: 300,
  maxheight: 300,
  thumbwidth: <?php echo (($pi_counter > 1) ? '97' : '0'); ?>,
  thumbcontainer: 400,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

<script type="text/javascript">
$("#piGal-<?php echo $fermes['products_id']; ?> a[rel^='fancybox']").fancybox({
  cyclic: true
});
</script>
        

            </div><!--fin contentMiddle-->
<?php
    } //fin array fermes
?>
    </div><!--fin contentMiddleTop-->
<?php
    } //fin array agri
?>
    </div><!--fin contentTop-->
    
<script>
  $(function() {
    $( "#contentTop" ).tabs({
      event: "mouseover"
    });

    $( "#contentMiddleTop" ).tabs({
      event: "mouseover"
    });
  });
</script>


Ce qui est sûr, c'est que je ne maîtrise pas l'imbrication des arrays.

Auriez-vous une solution ?

Merci smile.gif

Ce message a été modifié par equisol - 16 Jul 2014, 12:53.


--------------------
Goo69
Go to the top of the page
 
equisol
posté 16 Jul 2014, 12:50
Message #2


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 124
Inscrit : 7-November 07
Lieu : Lyon
Membre no 19668



Ce fût laborieux, mais je viens de trouver l'origine du problème.
Pas de problème d'array mais de javascript.
Ce bout de script ne fonctionne pas pour imbriquer les Tabs de jquery :
Code
<script>
  $(function() {
    $( "#contentTop" ).tabs({
      event: "mouseover"
    });

    $( "#contentMiddleTop" ).tabs({
      event: "mouseover"
    });
  });
</script>

Par contre, en utilisant non pas 2 id différents mais une classe commune, alors ça fonctionne !
Code
<script>
  $(function() {
    $( ".tabsElements" ).tabs({
      event: "mouseover"
    });
  });
</script>

J'ai revu le nom des div pour que ce soit plus propre et voici donc ce que ça donne :
Code
<div id="contentWrap">
    <div id="tabsElements" class="tabsElements">
        <div id="contentTop">
<?php
    $tab_contenu = Array();
    $conteur_tab = 1;
    $liste_query = tep_db_query("select distinct eo.products_options_id, eov.products_options_values_id, eov.products_options_values_name, eovtoeo.products_options_values_to_products_options_id from " . TABLE_PRODUCTS_OPTIONS . " eo, " . TABLE_PRODUCTS_OPTIONS_VALUES . " eov, " .TABLE_PRODUCTS_OPTIONS_VALUES_TO_PRODUCTS_OPTIONS . " eovtoeo where eo.products_options_id = '1' and eo.products_options_id = eovtoeo.products_options_id and eov.products_options_values_id = eovtoeo.products_options_values_id and eov.language_id = '" . (int)$languages_id . "' order by eov.products_options_values_name");
?>
            <ul>    
<?php
    while ($liste = tep_db_fetch_array($liste_query)) {
?>
                <li>
                    <a href="#product-<?php echo $conteur_tab; ?>">|&nbsp;<?php echo $liste['products_options_values_name']; ?>&nbsp;|</a>
                </li>
<?php
$tab_contenu[] = array(
     'num_tab' => $conteur_tab,
     'products_options_id' => $liste['products_options_id'],
     'products_options_values_id' => $liste['products_options_values_id'],
     'products_options_values_name' => $liste['products_options_values_name'],
     'products_options_values_to_products_options_id' => $liste['products_options_values_to_products_options_id'],
);
$conteur_tab++;
        }
?>
            </ul>
        </div><!--fin contentTop-->

<?php
reset($tab_contenu);

foreach( $tab_contenu as $product ) {

?>
        <div id="tabsSubElements" class="tabsElements">
            <div id="product-<?php echo $product['num_tab']; ?>">
                <div id="contentMiddleTop">
<?php
    $subtabs_contenu = Array();
    $conteur_subtabs = 1;
    $products_query = tep_db_query("select distinct ea.options_id, p.products_id, pd.products_name, pd.products_baseline from " . TABLE_PRODUCTS_ATTRIBUTES . " ea, " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where ea.options_values_id = '" . $product['products_options_values_id'] . "' and ea.products_id = p.products_id and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
?>
                    <ul>    
<?php
    while ($products = tep_db_fetch_array($products_query)) {
?>
                        <li>
                            <a href="#subElement-<?php echo $conteur_subtabs; ?>">|&nbsp;<?php echo $products['products_name']; ?>&nbsp;|</a>
                        </li>
<?php
$subtabs_contenu[] = array(
     'num_sub_product' => $conteur_subtabs,
     'products_id' => $products['products_id'],
     'products_name' => $products['products_name'],
     'products_baseline' => $products['products_baseline'],
);
$conteur_subtabs++;
        }
?>
                    </ul>
                </div><!--fin contentMiddleTop-->
<?php
reset($subtabs_contenu);

foreach( $subtabs_contenu as $subElement ) {
?>
                <div id="subElement-<?php echo $subElement['num_sub_product']; ?>">
                    <div id="contentMiddle">
                        <div id="contentMiddleLeft" class="pinLeft">
                            <div id="titleWrap" class="contentText">
                                <h1><?php echo $subElement['products_name']; ?></h1>
<?php if (tep_not_null($subElement['products_baseline']))
    {
                                echo '<p id="baseline">' . $subElement['products_baseline'] . '</p>';
    }
?>
                            </div>
                            <div id="synhtesisWrap">
                                <div id="synhtesisLeft" class="contentText">
                                <?php echo '<h2 style="padding-left:20px;">' . TEXTE_ACTEURS . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?>
                                    <p>
                                        <ul>
<?php
    $membres_query = tep_db_query("select distinct m.members_id, m.members_firstname, m.members_lastname from " . TABLE_MEMBERS . " m, " . TABLE_ADDRESS_BOOK . " ab where m.members_id = ab.members_id and entry_company = '" . $subElement['products_id'] . "' order by m.members_firstname");
    while ($membres = tep_db_fetch_array($membres_query)) {
                                            echo '<li>' . $membres['members_firstname'] . '&nbsp;' . $membres['members_lastname'] . '</li>';
    }
?>
                                        </ul>
                                    </p>
                                </div>
                                <div id="synhtesisRight" class="contentText">
                                <?php echo '<h2 style="padding-left:20px;">' . TEXTE_COORDONNEES . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?>
                                    <p>
                                        <ul>
<?php
        
    $product_info_query = tep_db_query("select p.products_id, p.products_street_address, p.products_postcode, p.products_city, p.products_phone_mobile, p.products_phone_fix, pd.products_name, pd.products_baseline, pd.products_description, pd.products_url from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . $subElement['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
    $product_info = tep_db_fetch_array($product_info_query);
        
?>
                                            <li><?php echo stripslashes($product_info['products_street_address']) . '<br>' . stripslashes($product_info['products_postcode']) . ' ' . stripslashes($product_info['products_city']); ?></li>
                                            <li><?php echo 'Mobile : ' . stripslashes($product_info['products_phone_mobile']); ?></li>
                                                <?php if (tep_not_null($product_info['products_phone_fix']))
                                            echo '<li>Fixe : ' . stripslashes($product_info['products_phone_fix'] . '</li>'); ?>
                                                <?php if (tep_not_null($product_info['products_url'])) echo '<li><a href="http://' . $product_info['products_url'] . '" target="_blank">' . stripslashes($product_info['products_url']) . '</a></li>'; ?>
                                        </ul>
                                    </p>
                                </div>
                                <div id="synhtesisCenter" class="contentText">
                                <?php echo '<h2 style="padding-left:20px;">' . TEXTE_ACTIVITES . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?>
                                    <p>
                                        <ul>
<?php
    $activites_query = tep_db_query("select distinct evo.products_options_values_id, evo.products_options_values_name from " . TABLE_PRODUCTS_OPTIONS_VALUES . " evo, " . TABLE_PRODUCTS_ATTRIBUTES . " ea where evo.products_options_values_id = ea.options_values_id and ea.products_id = '" . $subElement['products_id'] . "' and evo.language_id = '" . (int)$languages_id . "' order by evo.products_options_values_name");
    while ($activites = tep_db_fetch_array($activites_query)) {
?>
                                            <?php echo '<li>' . $activites['products_options_values_name'] . '</li>'; ?>
<?php
    }
?>
                                        </ul>
                                    </p>
                                </div>
                            </div><!--fin synthesisWrap-->
                            <div class="clearer" style="text-align:center;"><?php echo tep_draw_separator('pixel_red.gif', '250', '1'); ?></div>
                            <div id="detailsWrap" class="contentText">
                                <?php echo $product_info['products_description']; ?>
                            </div><!--fin detailsWrap-->
                        </div><!--fin contentMiddleLeft-->
                        <div id="contentMiddleRight" class="pinRight">
<?php
    $pi_query = tep_db_query("select products_id, image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . $subElement['products_id'] . "' order by sort_order");
?>
                            <div id="piGal-<?php echo $subElement['products_id']; ?>" class="piGal">
                                <ul>
<?php
$pi_counter = 0;
while ($pi = tep_db_fetch_array($pi_query)) {
    $pi_counter++;
    
    $pi_entry = '<li style="float:left;"><a href="';
    
    $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
    
    $pi_entry .= '" target="_blank" style="background:none;" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';
    
    $pi_entry .= '</li>';
    
    echo $pi_entry;
}
?>
                                </ul>
                            </div>
                        </div><!--fin contentMiddleRight-->
<script type="text/javascript">
$('#piGal-<?php echo $subElement['products_id']; ?> ul').bxGallery({
  maxwidth: 300,
  maxheight: 300,
  thumbwidth: <?php echo (($pi_counter > 1) ? '97' : '0'); ?>,
  thumbcontainer: 400,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

<script type="text/javascript">
$("#piGal-<?php echo $subElement['products_id']; ?> a[rel^='fancybox']").fancybox({
  cyclic: true
});
</script>
                    </div><!--fin contentMiddle-->
                </div><!--fin subElement-x -->
<?php
    }
?>
            </div><!--fin product-x-->
        </div><!--fin tabsSubElements-->
<?php
    }
?>
    </div><!--fin tabsElements-->
    
    <div id="contentBottom"></div>
    
    <div id="contentEnd" style="text-align:center; padding-top:10px; padding-bottom:10px;">
        <?php echo tep_image(DIR_WS_IMAGES . 'hameau.png'); ?>
    </div>

</div><!--fin contentWrap -->


Il subsiste encore un problème cependant, celui des vignettes de bxGallery, qui fait l'objet d'un sujet dans la thématique "Design OsC2.3" mais qui n'a pas encore trouvé sa solution : http://www.oscommerce-fr.info/forum/index....showtopic=71261


--------------------
Goo69
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 29th March 2024 - 16:16
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)