2012-01-17 14 views
0

動的値に応じてJS確認ダイアログを表示するという単純な要件があります。この値は、Webページ上のAJAXを介して変更することができるので、ページのロード時にハードコードすることはできないため、onClickが発生したときにjQuery.ajax()を使用して取得します。例えば。jQuery ajax成功関数でjs確認ダイアログをラップする

AJAX呼び出しが正しい値を返すことに注意してください。

HTML

<a href='{% url program_pdf object.id %}' onClick='return check_time_budget();'> 
     Download PDF 
    </a> 

JS

function check_time_budget() { 
     return jQuery.ajax({ 
      url: '/program/check_duration/', 
      data: { 'program_id': {{ instance.id }} }, 
      success: function(response) { 
       console.log(response); 
       if (response.result != true){ 
        return confirm("Your program estimated duration does not match the time allocated. Is this OK?"); 
       } 
       else { 
        return true; 
       } 
      }, 
      error: function() { 
       return false; 
      } 
     });    
    } 

私は、戻っていじっVARSなどを設定しますが、成功裡に正しい値を返すために包まれた成功の機能を得るように見えることはできませんしていますタグ。

私は何を達成するための簡単な方法はありますか?

EDIT: 私は戻ってDajaxiceを使用しに行って、私は考えることができるハックのSetTimeoutと

HTML

onClick='return dajaxice_wrapper(this, {{object.id}});' 

JS

var callback_status; 
    function dajaxice_check_time_budget(data) { 
     var msg = "Your program estimated duration does not match the time allocated.\n\nIs this OK?\n";   
     if (data.result == true) { 
      callback_status = true; 
     } 
     else { 
      callback_status = confirm(msg); 
     }   
    } 

    function dajaxice_wrapper(obj, program_id) { 
     callback_status = false;   
     Dajaxice.programcreator.check_time_budget(dajaxice_check_time_budget, { 'id': program_id }); 
     // Required to get callback_status set from dajaxice callback (asynchronous call via ajax) 
     setTimeout(function() { 
           if (callback_status != undefined) { 
            if (callback_status == true) { 
             window.location = obj.href;         
            }          
           }; 
        }, 500); 
     return callback_status;     
    } 

答えて

0

一つの方法は次のとおりです。

<a id="download-trigger" href='{% url program_pdf object.id %}' onClick='return check_time_budget();'>Download PDF</a> 

function check_time_budget() { 
    return jQuery.ajax({ 
     url: '/program/check_duration/', 
     data: { 'program_id': {{ instance.id }} }, 
     success: function(response) { 
      console.log(response); 
      if (response.result != true){ 
       return confirm("Your program estimated duration does not match the time allocated. Is this OK?"); 
      } 
      else { 
       // This will start to load the pdf. 
       window.location = jQuery('#download-trigger').attr('href'); 
      } 
     }, 
     error: function() { 
      return false; 
     } 
    });    
} 
関連する問題