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

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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-Quellcode

    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]
    Alles anzeigen


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

    Der PHP Code für die Ajaxfunktion:

    PHP-Quellcode

    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. */
    17. defined('mxMainFileLoaded') or die('access denied');
    19. global $prefix;
    21. if(isset($_GET['customers_wish_list_visible']) && ($_GET['customers_id'])){
    23. $customer_id = (int)$_GET['customers_id'];
    24. $customers_wish_list_visible = (int)$_GET['customers_wish_list_visible'];
    26. 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
    28. 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
    30. } else {
    31. echo 'Error! Please fill all fileds!';
    32. }
    34. ?>
    35. [/syntax]
    Alles anzeigen



    Das Javascript:

    PHP-Quellcode

    1. [syntax="javascript"]
    2. <script type="text/javascript">
    3. /* <![CDATA[ */
    4. // code direkt nach seitenaufbau starten
    5. $(function() {
    7. $('#accountViewWishList').click(function(){
    9. $.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){
    11. alert(data);
    13. });
    15. });
    17. });
    19. /* ]]> */
    20. </script>
    21. [/syntax]
    Alles anzeigen

    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-Quellcode

    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:

    Quellcode

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


    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

    Quellcode

    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-Quellcode

    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">
    7. <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>
    9. </div>
    10. <?php
    11. } else {
    12. ?>
    13. <div>
    15. </div>
    16. <?php
    17. }
    18. ?>
    19. [/syntax]
    Alles anzeigen



    Möglichkeit 2 (die Datenbankvariante):

    PHP-Quellcode

    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">
    7. <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>
    9. </div>
    10. <?php
    11. } else {
    12. ?>
    13. <div>
    15. </div>
    16. <?php
    17. }
    18. ?>
    19. [/syntax]
    Alles anzeigen


    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:

    Quellcode

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


    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:

    Quellcode

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

    </Edit 2>

    MfG

    Peter

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von BdMdesigN () aus folgendem Grund: Edits hizugefügt