2012-09-28 76 views
1

我似乎无法为我的生活得到这个工作。基本上情况是这样的。我有一个函数被执行并弹出一个jQuery对话窗口,并在其中嵌入了一个日期选择器。用户选择一个日期和presto,选择日期并将自动化消息捕获到var中。问题是,当再次执行相同类型的代码时,sdate发生更改,但文本与新日期保持不变。我想要有动态日期的动态文本。这很棘手,因为我知道datepicker是一个回调函数,这基本上超出了我对JavaScript编码的知识。jQuery UI Datepicker和var

<div style="display:none" id="dd"> 
<div id="d1"></div> 
</div> 

例如,测试( '1') 测试( '2')

var sdate, text 

//========================================================================== 
    function test(x) { 
     //========================================================================== 
     if (x == '1') { 

      $('#dd') 
       .dialog({ 
       autoOpen: true, 
       modal: true, 
       overlay: { 
        opacity: 1.0, 
        background: 'black' 
       }, 
       title: "SELECT DATE 1...", 
       height: 235, 
       width: 235, 
       draggable: false, 
       resizable: false 
      }); 
      $('#d1') 
       .datepicker({ 
       onSelect: function() { 

        sdate = $(this) 
         .val(); 
        $("#dd") 
         .dialog("close"); 

        text = 'THE DATE YOU HAVE CHOSEN IS: ' + sdate + '.' 
        alert(text) 

       } //end of onSelect: function() { 
      }); //end of datepicker 

     } //end of (x == '1') 


     else if (x == '2') { 

      $('#dd') 
       .dialog({ 
       autoOpen: true, 
       modal: true, 
       overlay: { 
        opacity: 1.0, 
        background: 'black' 
       }, 
       title: "SELECT DATE 2...", 
       height: 235, 
       width: 235, 
       draggable: false, 
       resizable: false 
      }); 
      $('#d1') 
       .datepicker({ 
       onSelect: function() { 

        sdate = $(this) 
         .val(); 
        $("#dd") 
         .dialog("close"); 

        text = 'THE 2ND DATE YOU HAVE CHOSEN IS: ' + sdate + '.' 
        alert(text) 

       } //end of onSelect: function() { 
      }); //end of datepicker 

     } //end of (x == '2') 

    } //end of function 

要疯了,需要在这个论坛的专家的帮助。

很多感谢和赞赏你的帮助的支持

+0

这是什么意思的动态文本与动态日期 –

+0

它可能只是一个复制/粘贴文物,但你似乎在你的代码中丢失了不少分号。另外,你是否真的需要将模式对话框与datepicker结合起来? jqueryui datepicker已经有一个可配置的弹出窗口小部件行为。你可以在代码中显示你正在调用'test(1)'和'test(2)'吗? –

+0

你现在可以描述什么是不对的[这里](http://jsfiddle.net/pVDyM/)? –

回答

1

您运行它,所以我改变了一些事情,我曾与为了一个小问题。我在jsFiddle跑了这一点:

我用这个网站:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" rel="stylesheet" /> 

<div style="display:none" id="dd"> 
    <div id="d1"></div> 
</div> 

<button data="1">1</button> 
<button data="2">2</button> 

按钮只是用来触发

我使用的代码下面的脚本:

jQuery(document).ready(function(){ 
    jQuery("button").click(function(){ 
     test(jQuery(this).attr("data"));   
    }); 
}); 

var sdate, text 

function test(x) { 
    if (x == '1') { 
     $('#d1').datepicker({ 
      onSelect: function() { 
       sdate = $(this).val(); 
       $("#dd").dialog("close"); 
       text = 'THE DATE YOU HAVE CHOSEN IS: '+ sdate +'.'; 
       alert(text); 
       //jQuery(this).datepicker("destroy"); 
      }//end of onSelect: function() { 
     });//end of datepicker 

     $('#dd').dialog({ 
      autoOpen: true, 
      modal: true, 
      overlay: { 
       opacity: 1.0, 
       background: 'black' 
      }, 
      title: "SELECT DATE 1...", 
      height: 400, 
      width: 400, 
      draggable: false, 
      resizable: false}); 

    } else if (x == '2') { 
     $('#d1').datepicker({ 
      onSelect: function() { 
       sdate = $(this).val(); 
       $("#dd").dialog("close"); 
       text = 'THE 2ND DATE YOU HAVE CHOSEN IS: '+ sdate +'.'; 
       alert(text); 
      //jQuery(this).datepicker("destroy"); 

      }//end of onSelect: function() { 
     });//end of datepicker 

     $('#dd').dialog({ 
      autoOpen: true, 
      modal: true, 
      overlay: { 
       opacity: 1.0, 
       background: 'black' 
      }, 
      title: "SELECT DATE 2...", 
      height: 400, 
      width: 400, 
      draggable: false, 
      resizable: false}); 

    }//end of (x == '2') 

}//end of function 

唯一我得到它的问题是操作的顺序。所以我在创建对话框之前创建了日期选择器。