Verständigungsproblem mit jquery Dialog

CUULT · September 20, 2010

Ich habe folgenden code:

{literal}

<script type="text/javascript">

    $(function(){



                // Dialog            

                $('#dialog').dialog({

                    autoOpen: true,

                    width: 600,

                    buttons: {

                        "Ok": function() { 

                            $(this).dialog("close"); 

                        }, 

                        "Cancel": function() { 

                            $(this).dialog("close"); 

                        } 

                    }

                });


                // Dialog Link

                $('#dialog_link').click(function(){

                    $('#dialog').dialog('open');

                    return false;

                });


                //hover states on the static widgets

                $('#dialog_link, ul#icons li').hover(

                    function() { $(this).addClass('ui-state-hover'); }, 

                    function() { $(this).removeClass('ui-state-hover'); }

                );


            });

    </script>


    {/literal}

<div class="demo">

<div id="dialog" title="Basic dialog">

    <p>{$message}</p>

</div></div>

Rufe ich die Seite auf wo der Code drin ist öffnet sich direkt das Dialogfenster mit leer Inhalt was ich nicht möchte. Ich möchtet das das Dialogfenster erst beim aufruf eines klick auf einen Button das Fenster öffnet.

Nun ist mein Problem setze ich diesen Befehl autoOpen: false, und sagen ihm ja damit das er beim laden der Seite das Fenster nicht öffnen soll öffnet er es auch nicht mehr wenn ich auf dem Button klicke.

Kann mir da einer von euch helfen.

dragon_0000 · September 20, 2010

Du musst noch einen Button definieren, schaut dir mal meinen Code an

<!-- Dialog -->    

<script type="text/javascript">


    $(function() {

            $('#dialog').dialog({

                    autoOpen: false,

                    width: 600,show: 'blind',

                    hide: 'explode',

                    buttons: {

                        "Ok": function() { $(this).dialog("close"); }, 

                        "Cancel": function() {     $(this).dialog("close"); } 

                    }

                });



        $('#opener').click(function() {

            $('#dialog').dialog('open');

            return false;

        });

    });


</script>

<!-- Dialog -->

EDIT: Sorry hab grad gesehen du hast ja schon einen (dialog_link) brauchst ihn also z.B. nur mehr einen Link oder Button zuweisen (z.B. <a id="dialog_link" href=... )

Dann sollte es klappen.

CUULT · September 20, 2010

Danke für deine Antwort.

Wenn ich das so mache wird nur nicht {$message} im Dialogfenster geladen sondern es bleibt leer.

dragon_0000 · September 20, 2010

poste mal deinen HTML Teil ich glaub das es daran liegt.

CUULT · September 20, 2010

Hier die komplette Seite. Es die product.html Seite. Setze einmal autoOpen auf false und danach auf true. Bei true siehst du was ich meine. Machst du eine reload der Seite kommt eine leer Dialogbox. Schalte diese weg klicke auf in den Warenkorb und oh wunder man sieht die ausgabe der {$message}. Die man bei autoOpen: false nicht sieht.



{literal}

<script type="text/javascript">

    $(function(){



                // Dialog            

                $('#dialog').dialog({

                    autoOpen: false,

                    width: 600,

                    buttons: {

                        "Ok": function() { 

                            $(this).dialog("close"); 

                        }, 

                        "Cancel": function() { 

                            $(this).dialog("close"); 

                        } 

                    }

                });


                // Dialog Link

                $('#dialog_link').click(function(){

                    $('#dialog').dialog('open');

                    return false;

                });


                //hover states on the static widgets

                $('#dialog_link, ul#icons li').hover(

                    function() { $(this).addClass('ui-state-hover'); }, 

                    function() { $(this).removeClass('ui-state-hover'); }

                );


            });

    </script>


    {/literal}


<div class="demo">

<div id="dialog" title="Basic dialog">

    {$message}

</div></div>


{socialbookmark url=$products_link title=$products_name}

{if $date_available!=''}

<ul class="info_info">

    <li class="infoInfo">{txt key=TEXT_PRODUCT_AVAILABLE} {$date_available|date_format:"%A, %B %e, %Y"}</li>

</ul>

<br />

{/if}


<div id="productinfowrap">

    {if $products_image!=''}

    <div id="productinfoimages">

        <a href="{img img=$products_image type=m_popup path_only=true}" class="thickbox">{img img=$products_image type=m_info alt=$products_name}</a>

    </div>

    {/if}

      {if $products_image!=''}<div id="productinfopricewithimages">{else}<div id="productinfopricewithoutimages">{/if}

        <div id="productinfoprice">

        {if $products_model!=''}{txt key=TEXT_PRODUCTS_MODEL}: {$products_model}{/if}

        <h1>{$products_name}</h1>

        <div id="productinfodetail">

    {if $products_description !=''}

        <div id="productinfo_desc">


            {$products_description}

        </div>

    {/if}

    {if $more_images !=''}

        {foreach name=aussen item=img_data from=$more_images}

        <a href="{img img=$img_data.file type=m_popup path_only=true}" class="thickbox">{img img=$img_data.file type=m_thumb alt=$products_name}</a>

        {/foreach}

    {/if}

    {box name=xt_cliplister type=user}

    {if $media_files !=''}

    <br />

    {include file="$selected_template/xtCore/pages/files/product_public_files.html"}

    {/if}    


</div>

<br />

            {if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'}<p class="productprice">{$products_price.formated}</p>

           <p class="stockimagetext">{txt key=TEXT_MEHRWERT_VERSAND}</p>


            {price_table}

            {/if}

            {if $products_weight > 0}<p class="taxandshippinginfo">{txt key=TEXT_PRODUCTS_WEIGHT}: {$products_weight} KG</p>{/if}

            {if $shipping_status}<p class="shippingtime">{txt key=TEXT_SHIPPING_STATUS} {$shipping_status}</p>{/if}

            {if $stock_image}

            <p class="stockimage">{img img=$stock_image.image type=t_img_stockrules alt=$stock_image.name}</p>

            <p class="stockimagetext">{$stock_image.name}</p>

            {/if}

            {if $review_stars_rating}

            <div class="reviews_rating_light"><div class="reviews_rating_dark" style="width:{$review_stars_rating}%"></div></div>

            <p class="reviews_text">{if $products_rating_count}{$products_rating_count}{else}0{/if} <a href="{$link_reviews_list}">{txt key=TEXT_XT_REVIEWS_INFO}</a> | <a href="{$link_reviews_write}" rel="nofollow">{txt key=TEXT_XT_REVIEWS_WRITE}</a></p>

            {/if}

            {if $base_price}<div class="hrlightgrey"></div>{$base_price.price} {txt key=TEXT_SHIPPING_BASE_PER} {$base_price.vpe.name}{/if}

            {if $products_discount!=''}<div class="hrlightgrey"></div>{$products_discount}{/if}

            {if $products_fsk18=='1'}<div class="hrlightgrey"></div><img src="media/images/icon/usk18.gif" alt="" style="cursor:default" />{/if}

            {if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'}{if $link_priceinquiry}<p><a href="{$link_priceinquiry}">{txt key=TEXT_XT_PRICEINQUIRY_ASK}</a></p>{/if}{/if}<div class="hrlightgrey"></div>

        </div>

    </div>

    {hook key=product_info_tpl_before_cart}

    {if $allow_add_cart eq 'true'}

    {form type=form name=product action='dynamic' link_params=getParams method=post}

    {form type=hidden name=action value=add_product}

    {form type=hidden name=product value=$products_id}

    <div style="clear:both;"></div>

    <div class="addtobasket">

    <table border="0" cellspacing="0" cellpadding="2">

        <tr><td colspan="2">{$products_information}</td></tr>



          <tr>

        <div class="demos-nav">

            <td style="width:100%">{form name=qty value=1 style='width:100px;'}

            <select name="qty" id="001">

      <option value="1">1</option>

      <option value="2">2</option>

      <option value="3">3</option>

      <option value="4">4</option>

      <option value="5">5</option>

      <option value="6">6</option>

      <option value="7">7</option>

      <option value="8">8</option>

      <option value="9">9</option>

    </select></td>

            <td>{button text=$smarty.const.BUTTON_ADD_CART file='button_in_cart.gif' type='form' btn_template='tpl_button_2.gif' space_left='25'}</td></div>


          </tr>

    </table>

    </div>

    {form type=formend}

    {/if}

    {hook key=product_info_tpl_cart}

</div>

<div style="clear:both;"></div>

<br />

<div id="productinfodetail">

    {if $products_description !=''}

        <div id="productinfo_desc">

            <h2>{txt key=TEXT_PRODUCTS_DESCRIPTION}</h2>

            {$products_description}

        </div>

    {/if}

    {if $more_images !=''}

        {foreach name=aussen item=img_data from=$more_images}

        <a href="{img img=$img_data.file type=m_popup path_only=true}" class="thickbox">{img img=$img_data.file type=m_thumb alt=$products_name}</a>

        {/foreach}

    {/if}

    {box name=xt_cliplister type=user}

    {if $media_files !=''}

    <br />

    {include file="$selected_template/xtCore/pages/files/product_public_files.html"}

    {/if}    


</div>

{hook key=product_info_tpl}

{if $_socialbookmarks}

<br />

<div id="socialbookmark">

{$_socialbookmarks}

</div>

{/if}

[/HTML]

dragon_0000 · September 21, 2010

Der Code von dir sieht eigentlich ganz gut aus, konkret kann ich dir jetzt nicht sagen was das Problem ist aber:

beim Dialog show und hide dazu eintragen (vielleicht benötigt er diese Angaben)
würd ich mal den Hover-Effekt und die Buttonsweg geben
Das ganz simple Beispiel unten von mir mal austesten und langsam erweitern
Ansonsten im Browser im Quellcode auf Fehler kontrollieren

Hier mal ein ganz einfacher und simpler Code für alle die mal die JQuery Dialog Box ausprobieren wollen:



<head>

    <script type="text/javascript">

    $(function() {

        $('#dialog').dialog({

            autoOpen: false,

            show: 'blind',

            hide: 'explode'

        });


        $('#opener').click(function() {

            $('#dialog').dialog('open');

            return false;

        });

    });

    </script>

</head>

<body>


<div id="dialog" title="Überschrift der Dialog box">

      <p>Dieser Text erscheint beim drücken des Buttons.</p>

</div>

<button id="opener">Open Dialog</button>


[/HTML]

P.s. Berichte mir ob es funktioniert hat.

CUULT · September 21, 2010

Danke für deine Antwort.

Vielleicht kannst Du mir noch sagen wie ich hier die id="opener" in ein bekomme. So das die Funktion noch läuft.

{button text=$smarty.const.BUTTON_ADD_CART file='button_in_cart.gif' type='form' btn_template='tpl_button_2.gif' space_left='25'}[/CODE]

dragon_0000 · September 21, 2010

Was hat dein Problem gelöst ? - für andere hilfesuchende Personen

du brauchst den Code nur eintragen, das hier sollte also schon funtkionieren:

{button [B]id="opener" [/B]text=$smarty.const.BUTTON_ADD_CART file='button_in_cart.gif' type='form' btn_template='tpl_button_2.gif' space_left='25'}[/CODE]

CUULT · September 21, 2010

Danke für deine Hilfe nur sobald man id="opener" hinzufügt wird aus dem Button eine Textzeile und man kann keine Artikel hinzufügen.

dragon_0000 · September 21, 2010

du kannst ja auch mal probieren ein Div rum zu packen also.

<div id="opener"> {button text=$smarty.const.BUTTON_ADD_CART file='button_in_cart.gif' type='form' btn_template='tpl_button_2.gif' space_left='25'}</div>[/HTML]

Leider kenn ich mich mit Smarty noch nicht so gut aus.

Danke für deine Hilfe nur sobald man id="opener" hinzufügt wird aus dem Button eine Textzeile und man kann keine Artikel hinzufügen.

CUULT · September 21, 2010

Danke aber das wars auch nicht. Zwar ist der Button wieder da und auch die Dialog funktion geht nur werden die Variabeln {$message} nicht ausgeben und es wird kein artikel in den Warenkorb abgelegt.

dragon_0000 · September 22, 2010

Also mit dem Div um den Button bleibt bei mir der Button so wie immer und ich kann auch Produkte in den Warenkorb geben.

Ob die Dialogbox erscheint kann ich dir leider nicht sagen da ich sie nicht mehr implementiert habe.

Ansonsten kannst du noch um den <td> Tag die ID zuweisen

    

<table border="0" cellspacing="0" cellpadding="2">

        <tr><td colspan="2">{$products_information}</td></tr>

          <tr>

            <td>{form type=text name=qty value=1 style='width:50px;'}</td>

            <td [B]id="opener"[/B]>{button text=$smarty.const.BUTTON_ADD_CART file='button_in_cart.gif' type='form' btn_template='tpl_button_2.gif' space_left='25'}</td>

          </tr>

    </table>

CUULT · September 22, 2010

Danke die{$message} wird zwar ausgegebn aber nicht im id=opener. Dieser Tag wird vollkommen ignoriet.

Trotzdem Danke.

dragon_0000 · September 22, 2010

wo gibt er den die {$message} aus? Packt er die message in den <td> Tag?

P.s. id=opener ist ein Attribut und <td> oder <table> sind Tags nur das. wird nicht aneinander vorbei reden ;-)

CUULT · September 22, 2010

Du hast ja recht sorry ;-).

{$message} setzt du einfach so wie ich es geschrieben habe am Anfang der Seite hin und somit ist es fertig.

Dann gehst du in dein Adminbereich und setzt noch den Sprachtext und das ganze ist fertig.

So ist es momentan drin:

{$message}

</div>

dragon_0000 · September 22, 2010

Also zeigt er beim Klick auf dem Warenkorb-Button die Message an?

Genau, du brauchst ein (unsichtbares) Div (z.B. id=dialog ist in der js.php def.) welches beim drücken eines Link/Button/Div/Img angezeigt wird.

Und eben einen Button welchen mit einer id (z.B. id= dialogLink ist auch in der js.php def.)

Genau wie in meinem einfachen Beispiel auf der vorigen Seite.

P.s. Frage am Rande wo kann ich im Admin-Bereich Variablen wie {$message} ändern?

CUULT · September 22, 2010

Du brauchst das nicht in js.php einsetzen.

Sondern einfach am Anfang der Seite gibt du folgendes ein.


{literal}

<script type="text/javascript">

    // increase the default animation speed to exaggerate the effect

    $(function() {

        $('#dialog').dialog({

            autoOpen: false,

        });


        $('#opener').click(function() {

            $('#dialog').dialog('open');

            return false;

        });

    });

    </script>


    {/literal}

Für die Ausgabe der {$message} geht du im Backend und dann unter Sprachtext erstellst du eine Sprachtext Datei. Als Schlüssel gibts du an ADD_PRODUCT und als Text z.B. Der Artikel %s wurde in den Warenkorb gelegt.

dragon_0000 · September 22, 2010

Welche Vorteile hat der {literal} ? von weniger Quellcode und somit besseres SEO sowie und schnellere Ladezeiten?

Das mit dem Sprachtext wusste ich noch nicht Danke für den Tipp.

P.s. das mit dem {literal} hat bei allen spielereinen funktioniert bis auf das 3D Carousel welches bei mir im Productlisting auf der Startseite ist.

CUULT · September 22, 2010

ohne {literal} kannst du benutzer relevante Steuerung des Script nicht ausführen.

dragon_0000 · September 22, 2010

hab bis jetzt alles in der js.php gepackt ohne probleme.

CUULT · September 22, 2010

nur wird das nicht jquery dialog funktionieren.

Verständigungsproblem mit jquery Dialog

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived