Ajax, jQuery, Toggle, Cookie, jQuery-Cookie Plug-In Verständnisfrage

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Ajax, jQuery, Toggle, Cookie, jQuery-Cookie Plug-In Verständnisfrage

    Moin Moin Liebe Coder Gemeinde,

    Ich steh so ein wenig auf dem Schlauch:

    Ich schreibe zur Zeit an einen Wunschzettel, welcher vom Kunden/User ein und ausgeschaltet werden kann.

    Dies geschieht durch zwei Radioboxen mit dem Werten 0 (Nein) und 1 (Ja), diese Werte werden dann via Ajax in die DB geschrieben und zum Testen eine pragmaMx Session Variable gesetzt):

    Die Radioboxen:

    PHP Source Code

    1. [syntax="html"]
    2. <div id="accountViewWishList" class="accountViewWishList">
    3. <?php
    4. if (isset($customers_wish_list_visible)) {
    5. $no = ($customers_wish_list_visible == '0') ? true : false;
    6. } else {
    7. $no = ($userdata['customers_wish_list_visible'] == '0') ? true : false;
    8. }
    9. $yes = !$no;
    10. ?>
    11. <p><hr /><?php echo VISIBLE_MY_WISH_LIST_TITLE; ?>&nbsp;&nbsp;<input id="customerWishlistVisibleNo" type="radio" name="customers_wish_list_visible" value="0" <?php echo (empty($no) ? '' : ' checked="checked"'); ?> />&nbsp;&nbsp;<?php echo NO_TITLE; ?>&nbsp;&nbsp;&nbsp;<input id="customerWishlistVisibleYes" type="radio" name="customers_wish_list_visible" value="1" <?php echo (empty($yes) ? '' : ' checked="checked"'); ?> />&nbsp;&nbsp;<?php echo YES_TITLE; ?><hr /></p>
    12. </div>
    13. [/syntax]
    Display All


    Die php If/else Schleife ist nötig um die Werte aus der DB zu ziehen.

    Der PHP Code für die Ajaxfunktion:

    PHP Source Code

    1. [syntax="php"]
    2. <?php
    3. /**
    4. * osCommerce, Open Source E-Commerce Solutions
    5. * http://www.oscommerce.com
    6. *
    7. * Copyright (c) 2010 osCommerce
    8. *
    9. * Converted to pragmaMX
    10. *
    11. * By Peter Stein aka BdMdesigN Copyright (c) 2009 - 2012
    12. * http://www.osc4pragmamx.org
    13. *
    14. * Released under the GNU General Public License V2 ONLY
    15. */
    16. defined('mxMainFileLoaded') or die('access denied');
    17. global $prefix;
    18. if(isset($_GET['customers_wish_list_visible']) && ($_GET['customers_id'])){
    19. $customer_id = (int)$_GET['customers_id'];
    20. $customers_wish_list_visible = (int)$_GET['customers_wish_list_visible'];
    21. sql_query("UPDATE {$prefix}_users SET customers_wish_list_visible = '" . mxAddSlashesForSQL($customers_wish_list_visible) . "' WHERE customers_id = '" . (int)$customer_id . "' "); // Hier wird der Wert in die DB gescrieben, was auch funktioniert
    22. mxSessionSetVar('wish_list_visible', $customers_wish_list_visible); // Hier wird die Variable in die PHP Session geschrieben, was auch funktioniert. Wert 0 bei Nein und 1 bei Ja
    23. } else {
    24. echo 'Error! Please fill all fileds!';
    25. }
    26. ?>
    27. [/syntax]
    Display All



    Das Javascript:

    PHP Source Code

    1. [syntax="javascript"]
    2. <script type="text/javascript">
    3. /* <![CDATA[ */
    4. // code direkt nach seitenaufbau starten
    5. $(function() {
    6. $('#accountViewWishList').click(function(){
    7. $.get('modules.php?name=Customer_Account&file=customer_wish_lists_view_save&customers_id=<?php echo (int)$customer_id; ?>&customers_wish_list_visible=',$("input[name='customers_wish_list_visible']:checked").serialize(),function(data){
    8. alert(data);
    9. });
    10. });
    11. });
    12. /* ]]> */
    13. </script>
    14. [/syntax]
    Display All

    Wird noch auf .post umgestellt

    Soweit so gut, das schreiben in die DB und das setzen der Session funktioniert soweit.
    Nun soll, wenn der Wunschzettel für andere User/Kunden sichtbar ist (Wert 1), am Ende des Wunschzettels ein Wunschzettel Versenden Button eingetoggledt werden.

    Der Button:

    PHP Source Code

    1. [syntax="html"]
    2. <div id="customerWishlistVisible" class="customerWishlistVisible">
    3. <span style="float: right;"><a href="modules.php?name=Customer_Account&amp;file=customer_wish_lists_send&amp;customers_id=<?php echo (int)$customer_id; ?>"><button id="customerWishlistVisibleButton" class="customerWishlistVisibleButton"><?php echo IMAGE_BUTTON_SEND_WISH_LIST; ?></button></a></span>
    4. </div>
    5. [/syntax]


    Das Toggle Javascript:

    Source Code

    1. [syntax="javascript"]
    2. <script type="text/javascript">
    3. /* <![CDATA[ */
    4. // code direkt nach seitenaufbau starten
    5. $(function() {
    6. $('input[name=customers_wish_list_visible]').change(function() {
    7. // if the "0" button is selected, show the extra text fields
    8. var selectedValue = $('input[name=customers_wish_list_visible]:checked').val();
    9. var showTextFields = selectedValue && selectedValue == 1;
    10. $('.customerWishlistVisible').toggle(showTextFields);
    11. });
    12. // hide extra fields initially
    13. $('.customerWishlistVisible').filter(function() { return $(":radio[name='customers_wish_list_visible']:checked", this).length==1; }).hide();
    14. });
    15. /* ]]> */
    16. </script>
    17. [/syntax]
    Display All


    Ok auch das Funktioniert wunderbar.

    Nun zu den eigentlichen Problem:

    Wie wir ja alle wissen schließt sich der getogglte Inhalt beim Browser reload oder er bleibt offen, je nachdem ob

    Source Code

    1. style="DISPLAY: none"
    gesetzt ist oder auch nicht.

    Nun soll aber der getogglte Inhalt beim der gecheckten Radiobox mit dem Wert 1 offen bleiben und bei Wert 0 zu sein. Das alles natürlich auch nach einen Browser reload oder gar nach schließen des Browsers, löschen der Cookies im Browser oder einfach nur nach den Ausloggen/Einloggen der Seite.

    Nun gibt es 4-5 Möglichkeiten, wobei 2 davon nur beim reload des Browsers funktionieren:

    Möglichkeit 1 (die Session Variante):

    PHP Source Code

    1. [syntax="html"]
    2. <?php
    3. if (mxSessionGetVar('wish_list_visible') > 0) { // Zeige div Container wenn Session Wert größer ist als 0
    4. ?>
    5. <div id="customerWishlistVisible" class="customerWishlistVisible">
    6. <span style="float: right;"><a href="modules.php?name=Customer_Account&amp;file=customer_wish_lists_send&amp;customers_id=<?php echo (int)$customer_id; ?>"><button id="customerWishlistVisibleButton" class="customerWishlistVisibleButton"><?php echo IMAGE_BUTTON_SEND_WISH_LIST; ?></button></a></span>
    7. </div>
    8. <?php
    9. } else {
    10. ?>
    11. <div>
    12. </div>
    13. <?php
    14. }
    15. ?>
    16. [/syntax]
    Display All



    Möglichkeit 2 (die Datenbankvariante):

    PHP Source Code

    1. [syntax="html"]
    2. <?php
    3. if ($userdata['customers_wish_list_visible'] == 1) { // Zeige div Container wenn Datenbank Wert 1 ist
    4. ?>
    5. <div id="customerWishlistVisible" class="customerWishlistVisible">
    6. <span style="float: right;"><a href="modules.php?name=Customer_Account&amp;file=customer_wish_lists_send&amp;customers_id=<?php echo (int)$customer_id; ?>"><button id="customerWishlistVisibleButton" class="customerWishlistVisibleButton"><?php echo IMAGE_BUTTON_SEND_WISH_LIST; ?></button></a></span>
    7. </div>
    8. <?php
    9. } else {
    10. ?>
    11. <div>
    12. </div>
    13. <?php
    14. }
    15. ?>
    16. [/syntax]
    Display All


    Nun wenn via onclick bei den Radioboxen sich der Wert von 1 auf 0 ändert, wird diese Änderung nur nach einen reload übernommen.
    Nun hab ich mir überlegt, entweder den div Container des Buttons via Ajax neu zu laden oder Javascript/jQuery Cookies einzusetzen.

    Nun bei der Ajax Methode ist die Frage, ob auch die Werte korrekt bei einen Browser reload geladen werden, womit dann die Cookies wegfallen würden.
    Oder wäre es sinnvoller Cookies einzusetzen, wenn ja welche?

    Die reinen Javascript Cookies oder das jQuery Cookie Plugin?

    Und kann ich mit den jQuery Cookie Plugin auch gezielt Werte übergeben, so wie es bei der Session möglich ist?

    Oder gibt es bei jQuery noch die Möglichkeit, das beim Browser reload die Radioboxen auf ihren Wert und ob sie gecheckt sind geprüft werden?


    MfG

    Peter
  • Ok hab sogar eine Lösung ohne Cookies gefunden:

    Source Code

    1. [syntax="javascript"]
    2. <script type="text/javascript">
    3. /* <![CDATA[ */
    4. // code direkt nach seitenaufbau starten
    5. $(function() {
    6. // Prüft beim Page reload die Radio boxen
    7. var customers_wish_list_visible = $("input:radio:checked[name='customers_wish_list_visible']").val();
    8. // Wenn Wert 0 zurück gegeben wird setze div Container auf hide
    9. if($("input:radio:checked[name='customers_wish_list_visible']").val() == 0){
    10. $('.customerWishlistVisible').hide();
    11. // Wenn Wert nicht 0, dann setze div auf show
    12. } else {
    13. $('.customerWishlistVisible').show();
    14. }
    15. // Hier startet beim checken der Radioboxen die Toogle Funktion
    16. $('input[name=customers_wish_list_visible]').change(function() {
    17. // if the "0" button is selected, show the extra text fields
    18. var selectedValue = $('input[name=customers_wish_list_visible]:checked').val();
    19. var showTextFields = selectedValue && selectedValue == 1;
    20. $('.customerWishlistVisible').toggle(showTextFields);
    21. });
    22. // hide extra fields initially
    23. $('.customerWishlistVisible').filter(function() { return $(":radio[name='customers_wish_list_visible']:checked", this).length==1; }).hide();
    24. });
    25. /* ]]> */
    26. </script>
    27. [/syntax]
    Display All


    Dieser Lösungsansatz funktioniert auch nach dem Ausloggen und dem erneuten Einloggen ins CMS.
    Wenn es besser geht, dann schlagt micht ruhig :rolleyes: ^^

    <Edit>
    Es wird jQuery 1.8.2 eingesetzt.
    </Edit>

    <Edit 2>
    Esbedarf eigendlich nur hoch die if/else Abfrage.
    Somit schaut der Code Aktuell so aus:

    Source Code

    1. [syntax="javascript"]
    2. <script type="text/javascript">
    3. /* <![CDATA[ */
    4. // code direkt nach seitenaufbau starten
    5. $(function() {
    6. // Prüft beim Page reload die Radio boxen, wenn Wert 0 zurück gegeben wird setze div Container auf hide
    7. if($("input:radio:checked[name='customers_wish_list_visible']").val() == 0){
    8. $('.customerWishlistVisible').hide();
    9. // Wenn Wert nicht 0, dann setze div auf show
    10. } else {
    11. $('.customerWishlistVisible').show();
    12. }
    13. // Hier startet beim checken der Radioboxen die Toogle Funktion
    14. $('input[name=customers_wish_list_visible]').change(function() {
    15. // if the "0" button is selected, show the extra text fields
    16. var selectedValue = $('input[name=customers_wish_list_visible]:checked').val();
    17. var showTextFields = selectedValue && selectedValue == 1;
    18. $('.customerWishlistVisible').toggle(showTextFields);
    19. });
    20. // hide extra fields initially
    21. $('.customerWishlistVisible').filter(function() { return $(":radio[name='customers_wish_list_visible']:checked", this).length==1; }).hide();
    22. });
    23. /* ]]> */
    24. </script>
    25. [/syntax]
    Display All

    </Edit 2>

    MfG

    Peter

    The post was edited 2 times, last by BdMdesigN: Edits hizugefügt ().