は成功コール

Question

私は、画像入力タイプのフォームを持っていた後のボタンのイメージを変更することはできません。ここでは、電子メールの送信と画像の変更を処理するjQueryの部分があります。

$('form').bind('submit', function() { 

    var ret = false; 
    $.ajax({ 
     type: 'POST', 
     url: 'includes/mailgonder.php', 
     data: $(this).serialize(), 
     cache: false, 
     dataType: 'text', 
     success: function(data, status, xhttp) { 
      // data will be true or false if you returned a json bool 
      ret = data; 
      alert('Gonderildi'); 
      // change image after success call (DOESN'T WORK) 
      $('#input').attr("src", "newURL"); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert('Mail gönderilemedi, lütfen daha sonra tekrar deneyin.\nMail could not be sent, please try again later.'); 
     }, 
     async: false // this is generally bad, it will lock up your browser while it returns, but the only way to fit it into your pattern. 

    }); 
    return ret; 
}) 

私はちょうどテストするonClick()イベントに$('#input').attr("src", "newURL");を使用しようとすると、それが動作します。しかし、私はjQuery上で動作させることができませんでした。

サイドノート：それは、私はそれが私が成功コール後の画像を変更することができます任意の簡単な方法がありますonClick()

にしようとすると、デフォルトにフォームと変更イメージをリロードしますか？

Answer 1

問題のカップルがあります：

1. あなたの画像入力のidはresim、ないinputです：

   <input type="image" ... id="resim"> 
   <!-- -------------------^^^^^^^^^^ --> 
   

   ので：あなたはretを設定している

   $('#resim').attr("src", "newURL"); 
   

2. 〜data、これはの文字列となりますので、それはあなたには（dataType: 'text'）と言われています。だからもしajax呼び出しがうまくいけば、あなたはfalseを返すことはないでしょう。あなたはいくつかの文字列を返します。あなたがそれをキャンセルしていないので、フォームの提出は進むでしょう。フォームを送信しているので、ページは分解され、サーバ  —から新しく読み込まれたバージョンに置き換えられます。もちろん、画像入力の場合は元のsrcになります。

フォーム提出を防止する場合は、文字列ではなくfalseを返します。フォームを送信した後に画像に別のsrcが必要な場合は、そのサーバー側で行います。

---

注：</input>は無効です。 input要素は空要素なので、HTMLでは単に<input ...>と書かれています（ただし<input .../>は許容されます）。 XHTMLでは、彼らは<input.../>です。しかし決して<input></input>。

サイドノート2：サーバーへのPOSTを実行してからPOSTが完了したら、サーバーにフォームを送信してください。あなたのサーバにフォーム提出の両方の作業をさせてください（最初のことがうまくいかなければ、2番目のことはしません。可能であれば、同期Ajaxリクエストを使用することは恐ろしいUXですが、避けてください。

---

限り、あなたは別のウィンドウにフォームを送信しようとしていないとして、あなたはあなたの電子メールのAJAX呼び出しを行って、ユーザーのフォームの送信をキャンセルしてasync: falseの使用を避けることができ、それその後、プログラムでフォームを送信完了し、***とTODOコメントを参照してください：

$('form').bind('submit', function() { 

    // TODO: Probably worth disabling the submit button here... 

    var form = this; // Use `this`, NOT `$(this)`! 
    $.ajax({ 
     type: 'POST', 
     url: 'includes/mailgonder.php', 
     data: $(this).serialize(), 
     cache: false, 
     dataType: 'text', 
     success: function(data, status, xhttp) { 
      // change image after success call 
      $('#resim').attr("src", "newURL"); 

      // *** Submit the form - because you're calling it directly on the DOM 
      // element, it won't re-trigger the submit handler 
      form.submit(); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert('Mail gönderilemedi, lütfen daha sonra tekrar deneyin.\nMail could not be sent, please try again later.'); 

      // TODO: If you disabled the submit button earlier, enable it again 
     } 
     // *** Yay, no `async: false` anymore 
    }); 

    // *** Always cancel user's form submission, we'll do it for them above 
    return false; 
})