Dialog Modal und Variablenwert übergabe

Observer · 18.10.2011, 19:18

Hi Leute, ich bin noch nicht so der Ajax JQUERY Specialist und habe von JS eigentlich nicht viel bis keine Ahnung.
Nun habe ich folgendes Problem.

Ich habe eine Liste mit Usern, denen ich eine buddyliste Spendierte.
Jetzt möchte ich bi einem Klick dahinter den User fragen ob er tatsächlich den Member mit einer Buddyanfrage belästigen will.
Das ganze sieht folgendermassen aus.
Alles ist über PHP mit Smarty geregelt.

Code:

<script type="text/javascript">
  <!--
$(function(){
  $('#form_id').bind('submit', function(evt){
    $form = this;
    evt.preventDefault();
 
    $("#dialog").dialog({
			resizable: false,
			modal: true,
			height:120,
			width:400,
	  title: 'Buddyanfrage',
      buttons: {
        'Ja': function(){
          $form.submit();
          $(this).dialog("close");
        },
        'Nein': function(){
          $(this).dialog("close");
        }
      }
    });
  });
});
 //-->
</script>

Der JS bereich.

Nun der Template bereich.

Code:

<form id="form_id" method="post" action="buddylist.php?action=newbuddy&amp;question={$entry.userid},{$entry.username}">
<input type="hidden" name="id" value="{$entry.userid}">
<input type="hidden" name="users" value="{$entry.username}">
<input class="default_button ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" name="submit_recall" type="image" src="/images/misc/bl.jpg" value="{#user_pms#}" title="Buddyanfrage"">
</form>
{foreach item=buddy from=$buddys}
{if $entry.userid == $buddy.userid1}{$buddycheck}{/if}
{if $entry.userid == $buddy.userid2}{$buddycheck}{/if}
{/foreach}

Dazu dann der Dialog selbst.

Code:

<div id="dialog" title="Buddy anfrage senden" style="display:none;">
  <p>Wirklich Buddy anfrage an {$smarty.request.users} senden ?</p>
</div>

Hier habe ich schon alles mögliche Probiert.
Mit Smartypost und Request.

Ich bekomme einen Wert rüber, aber es ist einfach der Reihenfolge nach aus dem foreach statt der Postwert der per hiddenfeld rüberkommt.

Wäre sehr Dankbar wenn mir da ein Profi mal hilfestellung geben könnte.

Edit :
Was ich noch dazu sagen wollte.
Der Submit ist aber dann wiederum korrekt, der wird auf den geklickten User ausgeführt.

MfG

BlackScorp · 18.10.2011, 20:51

also ich würde zu jedem user in der liste einen button hinzufügen mit einem value im button

PHP-Code:

  {foreach item=buddy from=$buddys}
$buddy.username <span class="add_button" data-val="$buddy.userid">Anfrage versenden</span>
{/foreach}

danach eine form mit hidden field, beim klicken auf "Anfrage versenden" nimmst du den wert und trägst in in das hidden field

PHP-Code:

  <form id="form_id" method="post" action="buddylist.php?action=newbuddy">
<input type="hidden" name="id" id="buddyid">
</form>

PHP-Code:

  var setBuddyIDOnSelect = function(){
$('#buddyid').val(parseInt($(this).attr('data-val')));
displayDialog();
}
var displayDialog = function(){
 $("#dialog").dialog({
            resizable: false,
            modal: true,
            height:120,
            width:400,
      title: 'Buddyanfrage',
      buttons: {
        'Ja': function(){
          $('#form_id').submit();
          $(this).dialog("close");
        },
        'Nein': function(){
          $(this).dialog("close");
        }
      }
    });
}

$(function(){
$('span.add_button').live('click',setBuddyIDOnSelect);
});

Observer · 19.10.2011, 04:15

Ok, schonmal Danke.

Wie bekomme ich aber den Wert des Usernamens in den Dialog ?

Wie oben ja schon geschrieben, das Post funktioniert ja korrekt, er leitet auf den richtigen User weiter.

Nur in dem Dialog gibt er mir die Usernamen nur in Reihe aus statt den geklickten.

Code:

<div id="dialog" title="Buddy anfrage senden" style="display:none;">
  <p>Wirklich Buddy anfrage senden an : >> Hier der Username <<  ?</p>
</div>

Vielen dank

MfG

BlackScorp · 19.10.2011, 09:44

ich mache das durch tricks.. zb könntest du ja deine user so ausgeben:

PHP-Code:

  {foreach item=buddy from=$buddys}

<span id = "$buddy.id">$buddy.username </span><span class="add_button" data-val="$buddy.userid">Anfrage versenden</span>

{/foreach}

und dann kannst du folgendes machen in der Dialogbox

PHP-Code:

  <div id="dialog" title="Buddy anfrage senden" style="display:none;">

  <p>Wirklich Buddy anfrage senden an :<span class="username"></span>  ?</p>

</div>

und dann setzt du in den Span im dialog den usernamen aus dem Span in der userauswahl

PHP-Code:

  var setBuddyIDOnSelect = function(){

var userid = $(this).attr('data-val');

$('span.username').text($('span#'+userid).text()); //hole mir aus dem span mit der user id den text und packe diesen text in meine dialogbox rein

$('#buddyid').val(parseInt(userid )); //schreibe die user id in das hidden feld

displayDialog(); //zeige dialog, wenn ja im dialog angeklickt wird, sende das Form ab, sonst schließe das dialog

}

rudygotya · 19.10.2011, 13:00

Ich würde das sauberer kapseln, später hast du sonst eine Codesuppe, die immer unübersichtlicher wird.

data-Attribute kann man direkt per $.fn.data() auslesen. Dialog nur einmal erstellen, wenn du ihn brauchst, Open aufrufen. Nur mal angescribbelt, wie du vorgehen könntest:

PHP-Code:

  var BuddyManager = function ( options ) {
    
    if( options == null || ! $.isPlainObject( options )  ) {
        options = {};
    }
    
    ( "dialogElement" in options ) || (options.dialogElement = $( '#dialog' ));
    
    ( "form" in options ) || (options.form = $( '#form_id' ));
    
    ( "dialogOptions" in options ) 
        || ( options.dialogOptions = {
            resizable: false,
            autoOpen : false,
            modal: true,
            height:120,
            width:400,
            title: 'Buddyanfrage'
        } );
    
    /**
     * @var {Object}
     */
    this.options = options;
    
    /**
     * @var {jQuery}
     */
    this.dialog = options.dialogElement;
    
    /**
     * @var {jQuery}
     */
    this.form = options.form;
    
    this.bindDialog();
    
    /**
     * @var {String}
     */
    this.buddyName = '';
    
};

BuddyManager.prototype = {
    
    bindAddButtons : function () {
        
        var that = this;
        // selector evtl per options einstellbar machen
        
        $( '.add_buddy_button' ).click( function () {
            that.buddyName = $( this ).data( 'val' );
            that.dialog.dialog( 'open' );
        
        } )
        
    },
    bindDialog : function ( dialogNode ) {
        var that = this;
        this.dialog.dialog( $.extend( 
            {}, this.options.dialogOptions,
            { 
                buttons: {
                    'Ja': function(){
                        $.when(
                            that.submitForm
                        )
                        .then(
                            // event feuern oder einen success handler callen oder ... oder ..
                            $(this).dialog("close");
                        )
                        .fail(
                            // do sth on error
                        )
                    },
                    'Nein': function(){
                        $(this).dialog("close");
                    }
                }
            }
        ).bind( "dialogopen", this.dialogOpen );
        
    },
    dialogOpen : function () {
        // username setzen oder was auch immer
    },
    getDialog : function () {
        return this.dialog;
    },
    
    submitForm : function () {
        var f = this.form;
        
        return $.post(
            this.form.attr( 'action' ) || this.options.url,
            this.form.serialize()
        );
    }
    
};



$( function () {
    var buddyManager = new BuddyManager;
});

Das ist noch nicht funktional, wollte nur zeigen, wie man vorgehen könnte.

Observer · 20.10.2011, 19:15

Danke für die guten Anregungen, werde das mal alles so nacheinander durchgehen und mir das Geschickteste davon nehmen.
Wobei mir die Variante von rudy eigentlich am meisten zusagt.
Nur werde ich dafür wohl noch ein wenig lernen müssen.

Thx

MfG

rudygotya · 20.10.2011, 20:24

Ich hab vor dem snippet den Artikel hier gelesen, das erklärt ein wenig den Stil:
http://webreflection.blogspot.com/20...no-reason.html

Eventuell interessiert dich auch in dem Zusammenhang James Padolsey - Terse Javascript
Ein richtig gelungenes Tutorial findest du hier.

Grüße

Basti

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Export ohne Refresh	sayal	PHP Einsteiger	10	21.07.2011 01:02
Jquery Dialog mit iframe	brudsch	JavaScript, Ajax und mehr	3	16.07.2011 06:53
Jquery UI Modal form: Formular mit submit an login.php übergeben	eshepht	JavaScript, Ajax und mehr	7	14.07.2011 12:33
[Erledigt] jquery dialog button beschriftung	BlackScorp	JavaScript, Ajax und mehr	3	10.02.2011 22:52
JQuery Modal Window	Xeo	JavaScript, Ajax und mehr	2	14.11.2010 17:44
Variablen Übergabe innerhalb 2 php-Scripts	hakkinen-ffm	PHP Tipps 2009	4	15.11.2009 14:43
[Erledigt] Probleme mit "this.value" - Übergabe bei onchange	espressoboy	JavaScript, Ajax und mehr	3	27.01.2009 01:21
Übergabe via URL => Scriptfehler		PHP Tipps 2005-2	9	24.09.2005 13:12
Übergabe Cookie unter PHP 5.0 nicht möglich ??		PHP Tipps 2005	1	20.03.2005 18:33
Übergabe aus Textarea		PHP-Fortgeschrittene	2	01.03.2005 21:42
[Erledigt] Übergabe on Variablen über mehrere Seiten		PHP Tipps 2005	13	01.02.2005 21:13
Probleme bei Übergabe von Parametern		PHP Tipps 2004	21	17.06.2004 11:08


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.10.2011, 20:51
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	also ich würde zu jedem user in der liste einen button hinzufügen mit einem value im button PHP-Code: `{foreach item=buddy from=$buddys} $buddy.username <span class="add_button" data-val="$buddy.userid">Anfrage versenden</span> {/foreach}` danach eine form mit hidden field, beim klicken auf "Anfrage versenden" nimmst du den wert und trägst in in das hidden field PHP-Code: `<form id="form_id" method="post" action="buddylist.php?action=newbuddy"> <input type="hidden" name="id" id="buddyid"> </form>` PHP-Code: var setBuddyIDOnSelect = function(){ $('#buddyid').val(parseInt($(this).attr('data-val'))); displayDialog(); } var displayDialog = function(){ $("#dialog").dialog({ resizable: false, modal: true, height:120, width:400, title: 'Buddyanfrage', buttons: { 'Ja': function(){ $('#form_id').submit(); $(this).dialog("close"); }, 'Nein': function(){ $(this).dialog("close"); } } }); } $(function(){ $('span.add_button').live('click',setBuddyIDOnSelect); }); __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

19.10.2011, 04:15
Observer Neuer Benutzer Registriert seit: 18.10.2011 Beiträge: 3 PHP-Kenntnisse: Anfänger	Ok, schonmal Danke. Wie bekomme ich aber den Wert des Usernamens in den Dialog ? Wie oben ja schon geschrieben, das Post funktioniert ja korrekt, er leitet auf den richtigen User weiter. Nur in dem Dialog gibt er mir die Usernamen nur in Reihe aus statt den geklickten. Code: <div id="dialog" title="Buddy anfrage senden" style="display:none;"> <p>Wirklich Buddy anfrage senden an : >> Hier der Username << ?</p> </div> Vielen dank MfG

19.10.2011, 09:44
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ich mache das durch tricks.. zb könntest du ja deine user so ausgeben: PHP-Code: `{foreach item=buddy from=$buddys} <span id = "$buddy.id">$buddy.username </span><span class="add_button" data-val="$buddy.userid">Anfrage versenden</span> {/foreach}` und dann kannst du folgendes machen in der Dialogbox PHP-Code: `<div id="dialog" title="Buddy anfrage senden" style="display:none;"> <p>Wirklich Buddy anfrage senden an :<span class="username"></span> ?</p> </div>` und dann setzt du in den Span im dialog den usernamen aus dem Span in der userauswahl PHP-Code: `var setBuddyIDOnSelect = function(){ var userid = $(this).attr('data-val'); $('span.username').text($('span#'+userid).text()); //hole mir aus dem span mit der user id den text und packe diesen text in meine dialogbox rein $('#buddyid').val(parseInt(userid )); //schreibe die user id in das hidden feld displayDialog(); //zeige dialog, wenn ja im dialog angeklickt wird, sende das Form ab, sonst schließe das dialog }` __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

19.10.2011, 13:00
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Ich würde das sauberer kapseln, später hast du sonst eine Codesuppe, die immer unübersichtlicher wird. data-Attribute kann man direkt per $.fn.data() auslesen. Dialog nur einmal erstellen, wenn du ihn brauchst, Open aufrufen. Nur mal angescribbelt, wie du vorgehen könntest: PHP-Code: var BuddyManager = function ( options ) { if( options == null \|\| ! $.isPlainObject( options ) ) { options = {}; } ( "dialogElement" in options ) \|\| (options.dialogElement = $( '#dialog' )); ( "form" in options ) \|\| (options.form = $( '#form_id' )); ( "dialogOptions" in options ) \|\| ( options.dialogOptions = { resizable: false, autoOpen : false, modal: true, height:120, width:400, title: 'Buddyanfrage' } ); /** * @var {Object} / this.options = options; /* * @var {jQuery} / this.dialog = options.dialogElement; /* * @var {jQuery} / this.form = options.form; this.bindDialog(); /* * @var {String} / this.buddyName = ''; }; BuddyManager.prototype = { bindAddButtons : function () { var that = this; // selector evtl per options einstellbar machen $( '.add_buddy_button' ).click( function () { that.buddyName = $( this ).data( 'val' ); that.dialog.dialog( 'open' ); } ) }, bindDialog : function ( dialogNode ) { var that = this; this.dialog.dialog( $.extend( {}, this.options.dialogOptions, { buttons: { 'Ja': function(){ $.when( that.submitForm ) .then( // event feuern oder einen success handler callen oder ... oder .. $(this).dialog("close"); ) .fail( // do sth on error ) }, 'Nein': function(){ $(this).dialog("close"); } } } ).bind( "dialogopen", this.dialogOpen ); }, dialogOpen : function () { // username setzen oder was auch immer }, getDialog : function () { return this.dialog; }, submitForm : function () { var f = this.form; return $.post( this.form.attr( 'action' ) \|\| this.options.url, this.form.serialize() ); } }; $( function () { var buddyManager = new BuddyManager; }); Das ist noch nicht funktional, wollte nur zeigen, wie man vorgehen könnte. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog Geändert von rudygotya (20.10.2011 um 20:13 Uhr). Grund: snippet korrigiert*

20.10.2011, 19:15
Observer Neuer Benutzer Registriert seit: 18.10.2011 Beiträge: 3 PHP-Kenntnisse: Anfänger	Danke für die guten Anregungen, werde das mal alles so nacheinander durchgehen und mir das Geschickteste davon nehmen. Wobei mir die Variante von rudy eigentlich am meisten zusagt. Nur werde ich dafür wohl noch ein wenig lernen müssen. Thx MfG

20.10.2011, 20:24
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Ich hab vor dem snippet den Artikel hier gelesen, das erklärt ein wenig den Stil: http://webreflection.blogspot.com/20...no-reason.html Eventuell interessiert dich auch in dem Zusammenhang James Padolsey - Terse Javascript Ein richtig gelungenes Tutorial findest du hier. Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog