2010-08-24 17 views
19

मैं jQuery UI dialog का उपयोग कर रहा है जब एक बटन क्लिक किया गया एक पुष्टिकरण संवाद प्रदर्शित करने के लिए इस्तेमाल करते हैं। मैं true, जब ठीक क्लिक किया जाता है और false अन्यथा वापसी करना चाहते हैं।रिटर्निंग मूल्य JQuery यूआई संवाद

onClick में संवाद खुले कॉल को संबद्ध करना (जैसा कि here, $dialog.dialog('open'); दिया गया है) घटना उद्देश्य को पूरा नहीं करती है। http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery: तो, एक समाधान के रूप में, मैं एक दृष्टिकोण है, जो इस के समान है का पालन किया।

  1. उदाहरण एंकर टैग का उपयोग करता है और,
  2. यह jQuery यूआई संवाद का उपयोग नहीं करता: इस दृष्टिकोण और मेरा दोनों के बीच मतभेद हैं।

मैंने उदाहरण लिंक में दिए गए कोड को संशोधित किया है, लेकिन यह काम नहीं करता है। मैं आश्चर्यचकित हूं कि मुझसे क्या गलती हो रही है। क्या ऐसा करने का कोई सस्ता तरीका है?

यहाँ, कोड है सभी सीएसएस/जे एस jQuery CDN के लिए संदर्भित कर रहे हैं, ताकि आप व्यवहार को देखने के लिए कोड कॉपी करने के लिए सक्षम होना चाहिए।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Control Panel</title> 
    </head> 

    <body> 
    <form action="http://google.com"> 
     <button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">Start Thermonuclear War</span> 
     </button> 
    </form> 
    <div title="Why so serious?" id="id3" style="display:none;"> 
     <p>You are about to start a war. 
     <p>Click OK to confirm. Click Cancel to cancel this action.</p> 
    </div> 
    </body> 
    <script type="text/javascript"> 
    $('#id2').click(function (event) { 

     if ($(this).data('propagationStopped')) { 
     //alert('true'); 
     $(this).data('propagationStopped', false); 
     return true; 
     } else { 

     event.stopImmediatePropagation(); 

     $('#id3').dialog({ 
      //autoOpen: false, 
      width: 600, 
      buttons: { 
      "Ok": function() { 
       $(this).dialog("close"); 
       $('#id2').data('propagationStopped', true); 
       $('#id2').triggerHandler(event); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
       return false; 
      } 
      } 
     }); 
     //alert('false'); 
     return false; 
     } 
    }); 
    </script> 

</html> 

स्पष्टीकरण: कृपया ध्यान दें कि यह बहुत आसान है (देखें solution by bryan.taylor) एक फ़ॉर्म जमा करना है। मैं यहां क्या करना चाहता हूं बटन क्लिक करके सबमिशन अनुकरण करना है। जावास्क्रिप्ट की confirm() विधि की तरह।

+0

आदर्श रूप में, इस उदाहरण गूगल ठीक और बंद के लिए ले और रद्द करें पर कुछ भी नहीं करना चाहिए:

यह लगभग डुप्लिकेट एक अच्छा उदाहरण प्रदान करता है। मैं स्पष्ट $ (फॉर्म नाम) से बचने की कोशिश करूंगा। सबमिट करें() आधारित समाधान। – Nishant

+0

[jquery ui संवाद बॉक्स का संभावित डुप्लिकेट मूल्य वापस करने की आवश्यकता है, जब उपयोगकर्ता बटन दबाता है, लेकिन काम नहीं कर रहा है] (http://stackoverflow.com/questions/6049687/jquery-ui-dialog-box-need-to-return- मूल्य-जब-उपयोगकर्ता-प्रेस-बटन-लेकिन-खराब नहीं) – Liam

उत्तर

49

जावास्क्रिप्ट अतुल्यकालिक है।

$myDialog.dialog('open'); 

ब्लॉक नहीं होगा, बल्कि तुरंत वापस आ जाएगा।

इसके बजाए, आपको buttonsoption of dialog में प्रदान किए जाने वाले ईवेंट कॉलबैक का उपयोग करना होगा।

jquery ui dialog box need to return value, when user presses button, but not working

+0

http://stackoverflow.com/a/18474005/1876355 – Pierre

8

आपका कोड थोड़ा जटिल है, मुझे लगता है कि यह करने के लिए एक बहुत ही आसान तरीका है। आपको पहले संवाद को तुरंत चालू करना चाहिए, फिर इसे अपने बटन के लिए क्लिक ईवेंट पर खोलें। कोड इस के समान दिखेगा:

<script> 
$(document).ready(function() { 
    var $myDialog = $('<div></div>') 
    .html('You are about to start a war.<br/>Click OK to confirm. Click Cancel to stop this action.') 
    .dialog({ 
    autoOpen: false, 
    title: 'Why so serious?', 
    buttons: { 
     "OK": function() { 
     $(this).dialog("close"); 
     window.open('http://google.com/'); 
     return true; 
     }, 
     "Cancel": function() { 
     $(this).dialog("close"); 
     return false; 
     } 
    } 
    }); 

    $('#myOpener').click(function() { 
    return $myDialog.dialog('open'); //replace the div id with the id of the button/form 
    }); 
}); 
</script> 

<div id="myOpener"></div> 

यहाँ jQuery यूआई संवाद API दस्तावेज़ है, तो आप अपने सभी विकल्पों को देख सकते हैं:

http://api.jqueryui.com/dialog/

+0

पीएस मैंने इस कोड का परीक्षण नहीं किया, बस इसे बहुत अधिक लिखा है ताकि आपको इस मुद्दे पर कैसे पहुंचाया जा सके, तो कुछ मामूली हो सकता है tweaks की जरूरत है। –

+0

हाँ, इस कोड को ठीक है। केवल एक चीज है कि मैं एक फॉर्म जमा करना चाहता हूं .. तो मैं क्या करूँगा $ ('# formId') डाल दें। Window.open ('http://google.com/') के स्थान() सबमिट करें; आपके जवाब में लेकिन मुद्दा यह है कि मैं बटन क्लिक द्वारा सबमिशन अनुकरण करना चाहता हूं।मुझे एहसास हुआ कि शायद सवाल स्पष्ट नहीं था, मैं इस सवाल में स्पष्टीकरण जोड़ रहा हूं। सुझाव के लिए धन्यवाद। – Nishant

+0

@ निशांत: वास्तव में सुनिश्चित नहीं है कि 'बटन क्लिक करके सबमिशन अनुकरण' का अर्थ क्या है। क्या आपका मतलब है कि जब कोई ठीक क्लिक करता है तो आप सबमिट ईवेंट को रोकना बंद करना चाहते हैं? मुझे लगता है कि मैं सिर्फ 'अनुकरण अनुकरण' के बारे में विस्तार करने के लिए कह रहा हूं, क्या आप प्रासंगिक उपयोग केस प्रदान कर सकते हैं? –

संबंधित मुद्दे