Ich habe mehrere HTML-Schaltflächen (nicht in einem Formular).

Wenn sie angeklickt werden, rufen sie eine JavaScript-Funktion auf, die nach der Konformation einen Ajax-Aufruf ausführt. Dieser Teil funktioniert alles in Ordnung, aber ich möchte dann die Klasse der Schaltfläche ändern, auf die beim Erfolg des Ajax-Aufrufs geklickt wurde.

Ich habe verschiedene Methoden ausprobiert, die auf stackOverflow zu sehen sind, aber keine davon scheint zu funktionieren. Kann ich bitte fragen, was ich falsch mache?

Hier ist das vereinfachte HTML (Schaltflächen)

<button class="btn btn-primary" onclick="primaryImage(4107,19372,'/abbie1.jpg'); return false;">
set as profile image
</button>

<button class="btn btn-primary" onclick="primaryImage(4107,19373,'/abbie2.jpg'); return false;">
set as profile image
</button>

<button class="btn btn-success" onclick="primaryImage(4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>

Bitte beachten Sie: Die letzte Schaltfläche ist bereits die Aktiv / Erfolg-Schaltfläche, und ich möchte auch die Klasse bei Erfolg entfernen (da nur eine aktiv sein sollte), aber das ist vielleicht meine nächste Stufe ....

Hier ist das JavaScript (ich habe einige der Methoden, die ich ausprobiert habe, verlassen, aber auskommentiert)

function primaryImage(eid,pid)
    {
        if (confirm("Are you sure you wish to use this as your profile image?"))
        {

            $.ajax({
                type: "POST",
                async: false,
                cache: false,
                dataType: "json",
                url: "ajax_photo.php",
                data: "action=primary&eid="+eid+"&pid="+pid,
                //context: this,
                success: function(data){
                    if(data.result=='success')
                    {
                        alert('The image is now set as the profile image');
                        //$('button').click(function(){
                        //   $(this).addClass('btn-success');
                        //});

                        //$('button').on(data.result=='success', function(e) {
                        //  $(this).toggleClass("btn btn-success"); //you can list several class names 
                        //  e.preventDefault();
                        //});

                        //$(this).removeClass('btn-primary').addClass('btn-success');

                    }
                    else
                    {
                        alert('An error occurred when trying to set the image: ' + data.result);
                    }
               }
            });
        }
    }

Ich wäre sehr dankbar für jeden Rat, was ich falsch mache (wie Sie sehen können, bin ich (noch) nicht so gut mit JS)

Vielen Dank! Ford

2
Ford 20 Aug. 2015 im 21:56

4 Antworten

Beste Antwort

Wie in Ihrem auskommentierten Code angegeben, binden Sie das Klickereignis , nachdem das Klickereignis bereits ausgelöst wurde .

Ich würde vorschlagen, dass Sie eine Referenz der Schaltfläche übergeben, auf die in der Funktion primaryImage() selbst geklickt wurde:

 <!-- In your HTML -->
 <button class="btn btn-success" onclick="primaryImage(this, 4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>

 function primaryImage(button, eid,pid){
  /** ... */

Mit dieser Schaltfläche, auf die verwiesen wird, können Sie dem Element CSS-Klassen sowie die Geschwister des Elements hinzufügen oder entfernen (mithilfe der siblings() -Methode von jQuery).

            //your ajax call
            success: function(data){
                if(data.result=='success') //make sure this really is success
                {
                    alert('The image is now set as the profile image');
                    $(button).removeClass('btn-primary').addClass('btn-success');
                    $(button).siblings('button').removeClass('btn-success').addClass('btn-primary');
                }
          }
1
Ahmad Baktash Hayeri 20 Aug. 2015 im 19:18

Sie sollten das angeklickte Element an die Funktion primaryImage () übergeben und es bei Erfolg verwenden, um zu tun, was Sie möchten.

<button class="btn btn-primary" onclick="primaryImage(this, 4107,19372,'/abbie1.jpg'); return false;">set as profile image</button>

Und in deinem JS

function primaryImage(element, eid,pid)
{
    [...]
         success: function(data){
             if(data.result=='success')
             {
                 $(element).addClass('btn-success');
             }
             else
             {
                 alert('An error occurred when trying to set the image: ' + data.result);
             }
         }
    [...]
}
1
MarcoReni 20 Aug. 2015 im 19:16

Da Sie das Ereignis jQuery .click () nicht verwenden, müssen Sie die Schaltfläche in Ihren Funktionsargumenten übergeben.

So sieht Ihr Button aus

<button class="btn btn-primary" onclick="primaryImage(this, 4107,19373,'/abbie2.jpg'); return false;">
    set as profile image
</button>

Dann wird Ihre Funktion wie sein

function primaryImage(el, eid,pid)
{

    if (confirm("Are you sure you wish to use this as your profile image?"))
    {

        $.ajax({
            type: "POST",
            async: false,
            cache: false,
            dataType: "json",
            url: "http://anzvirtuel.org",
            data: "action=primary&eid="+eid+"&pid="+pid,
            //context: this,
            success: function(data){
                if(data.result=='success')
                {
                    $(el).addClass('btn-success');

                    alert('The image is now set as the profile image');

                    // keep doing whatever you want...
                }
                else
                {
                    alert('An error occurred when trying to set the image: ' + data.result);
                }
           }
        });
    }
}

Da ich Ihr kommentiertes JS nicht vollständig verstanden habe, können Sie den gewünschten Code eingeben. Denken Sie jedoch daran, dass Ihre Schaltfläche in jQuery mit $(el) zugänglich ist.

Hoffe es kann dir helfen

1
DFayet 20 Aug. 2015 im 19:15

Sie können data-* Attribute anstelle von onclick verwenden () MDN-Dokumentation ) und greifen Sie dann über jQuery auf diese zu, damit Ihr Code sauberer ist und HTML / JS getrennt werden.

Probieren Sie diesen Code aus. Ich habe drei data Attribute (data-eid, data-pid und data-image) für Ihre Parameter erstellt und auch Ihr JS ersetzt, damit das gesamte Material mit diesen funktioniert data Attribute. Auf diese Attribute kann mit folgendem jQuery-Code zugegriffen werden - als Beispiel var eid = $(this).attr('data-eid');

Diese Codezeile entfernt die Klasse btn-primary von der angeklickten Schaltfläche, fügt eine Klasse btn-success hinzu und deaktiviert sie, sodass sie nicht erneut umgeschaltet werden kann.

pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);

HTML

<button class="btn btn-primary" data-eid="4107" data-pid="19372" data-image="/abbie1.jpg">
    profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19373" data-image="/abbie2.jpg">
    profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19374" data-image="/abbie3.jpg">
    profile image
</button>

JS

$(".btn").click(function (e) {
if (confirm("Are you sure you wish to use this as your profile image?")) {
    var eid = $(this).attr('data-eid'); //like 4107
    var pid = $(this).attr('data-pid'); //like 19372
    var image = $(this).attr('data-image'); //like /abbie1.jpg
    var pushedBtn = $(this);
    $.ajax({
        type: "POST",
        async: false,
        cache: false,
        dataType: "json",
        url: "ajax_photo.php",
        data: "action=primary&eid=" + eid + "&pid=" + pid,
        //context: this,
        success: function (data) {
            if (data.result == 'success') {
                alert('The image is now set as the profile image');
                    pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);


            } else {
                alert('An error occurred when trying to set the image: ' + data.result);
            }
        }
    });
}
});
1
Ramiz Wachtler 20 Aug. 2015 im 20:13