Verständigungsproblem mit jquery Dialog

CUULT · #1 (**permalink**) 20.09.2010, 13:11

Ich habe folgenden code:

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 · #2 (**permalink**) 20.09.2010, 13:23

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

Code:

<!-- 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 · #3 (**permalink**) 20.09.2010, 13:54

Danke für deine Antwort.
Wenn ich das so mache wird nur nicht {$message} im Dialogfenster geladen sondern es bleibt leer.

dragon_0000 · #4 (**permalink**) 20.09.2010, 15:18

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

CUULT · #5 (**permalink**) 20.09.2010, 15:46

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.

HTML-Code:

{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}&nbsp;{$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}

dragon_0000 · #6 (**permalink**) 21.09.2010, 14:28

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:

HTML-Code:

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

P.s. Berichte mir ob es funktioniert hat.

CUULT · #7 (**permalink**) 21.09.2010, 14:37

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.

Code:

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

dragon_0000 · #8 (**permalink**) 21.09.2010, 14:47

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

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

Code:

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

CUULT · #9 (**permalink**) 21.09.2010, 14:53

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 · #10 (**permalink**) 21.09.2010, 14:59

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

HTML-Code:

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

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

Zitat:

Zitat von CUULT

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PayPal Express Modul mit GiroPay - Stand 08.05.2012	mikkel	PayPal Express-Kaufabwicklung für xt:Commerce	288	27.04.2012 18:07
jquery Problem mit Dialog	CUULT	Fragen zur Software	0	17.09.2010 14:27
Google Base funtkioniert nicht	objekt	Fragen zur Software	40	15.03.2010 10:24
thickbox mit jquery 1.2.6 total veraltet	patston	Fragen zur Software	0	10.12.2009 23:19
Neuling mit 1000 Fragen zu 3.0.4 SP2.1	sofan	Installation und Konfiguration	2	22.06.2009 13:09