Jquery對話框不能在masterpage中工作？

我在主頁面添加了以下代碼。我能夠得到alert("I am in onload Function");，但jQuery（「uploadPic」）。對話框不起作用。頁面上顯示的<div>部分。Jquery對話框不能在masterpage中工作？

我使用參考jQuery是

<script type=text/javascript src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>

我試過$('#uploadPic').dialog也。但沒有奏效。

<script language="javascript" type="text/javascript"> 
    _spBodyOnLoadFunctionNames.push("onloadFunction"); 
    function onloadFunction() { 
     alert("I am in onload Function"); 
     //setup edit person dialog 
     jQuery("uploadPic").dialog({ 
      autoOpen: false, 
      modal: true, 
      height: 375, 
      width: 400, 
      draggable: true, 
      title: "Upload Picture", 
      open: function (type, data) { 
       $(this).parent().appendTo("form"); 
      } 
     }); 
    } 
    function showDialog(id) { 
     alert("Hi"); 
     $('#' + id).dialog("open"); 
     alert("End"); 
    } 
</script> 

<map name="Map"> 
     <area shape="rect" coords="225,16,287,33" href="/_layouts/MyAlerts.aspx" onclick="javascript:showDialog('uploadPic');" alt="My Alerts"> 
    </map> 
<div id='uploadPic'>   
     <table class="ms-authoringcontrols" style="border-top:1px black solid; border:1px black solid; height:70px " > 
    <tbody> 
    <tr> 
     <td class="ms-sectionheader ms-rightAlign"> 
     Please choose a picture to upload to your picture library. 
      </td> 
    </tr> 
</tbody> 
</table> 
</div>

來源

2011-04-07 James123

你提到你已經包含了jQuery，但是你是否也包含了jQuery UI來訪問.dialog（）函數？如果是這樣，你是否在控制檯中發現錯誤？ – 2011-04-07 15:52:59

論一個<script>元件不引用jQuery的，而不是在一個<script>元件referenceing jQuery UI的，而不是連接到一些jQuery用戶界面的CSS在<link>元件，和由ID jQuery("#uploadPic)選擇時不使用井號#的頂部，既然你已經指定autoOpen: false當你叫dialog({...})

function showDialog(id) { 
    alert("Hi"); 
    $('#' + id).dialog("open"); 
    alert("End"); 
}

...：你也從來不打電話給你showDialog(...)功能

jQuery("uploadPic").dialog({ 
     autoOpen: false, // <--- 
     modal: true, 
     height: 375, 
     width: 400, 
     draggable: true, 
     title: "Upload Picture", 
     open: function (type, data) { 
      $(this).parent().appendTo("form"); 
     } 
    });

...對話框一開始不可見。您必須撥打open(...)或dialog("open") - 就像您在showDialog(...)功能中所做的那樣。

但是由於您從未調用該函數，因此它永遠不會打開對話框。

試試這個：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

    <title>Jquery dialog not working in masterpage?</title> 
    <script type=text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type=text/javascript src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script> 
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" /> 

    <script language="javascript" type="text/javascript"> 
// _spBodyOnLoadFunctionNames.push("onloadFunction"); // since I'm not using SharePoint I have replaced this line with jQuery(document).ready(...) below 

    function onloadFunction() { 
     alert("I am in onload Function"); 
     //setup edit person dialog 
     jQuery("#uploadPic").dialog({ 
      autoOpen: false, 
      modal: true, 
      height: 375, 
      width: 400, 
      draggable: true, 
      title: "Upload Picture", 
      open: function (type, data) { 
       $(this).parent().appendTo("form"); 
      } 
     }); 
     jQuery("#open-button").click(function() { 
      showDialog("uploadPic"); 
     }); 
    } 

    function showDialog(id) { 
     alert("Hi"); 
     $('#' + id).dialog("open"); 
     alert("End"); 
    } 

    $(document).ready(onloadFunction); 
    </script> 


</head> 
<body> 

<a id="open-button" style="cursor:pointer;">Open the dialog</a> 

<div id='uploadPic'>   
    <table class="ms-authoringcontrols" style="border-top:1px black solid; border:1px black solid; height:70px " > 
     <tbody> 
      <tr> 
       <td class="ms-sectionheader ms-rightAlign"> 
       Please choose a picture to upload to your picture library. 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 


</body> 
</html>

來源

2011-04-07 18:41:20

這是工作....但是當我點擊..頁面滾動到頁面的buttom ...它應該留在同一個地方 – James123 2011-04-07 19:04:39

@ James123 - 這是我給出的例子上面的問題，還是它是一個問題您將適用於我描述的解決方案應用於您的母版頁的問題？另外，哪個瀏覽器？ – 2011-04-07 19:06:06

我現在在使用IE9。我正在使用和你一樣的東西。$（document）.ready。 – James123 2011-04-07 19:18:28

你提到你已經包括jQuery的，但也包括jQuery用戶界面得到訪問.dialog（）函數？

來源

2011-04-07 15:54:27

我不是指任何jQuery UI。我在哪裏可以獲得參考？ – James123 2011-04-07 15:56:21

請參閱@ mathieu的帖子 – 2011-04-07 15:58:06

我應該使用jQuery（「uploadPic」）。對話框還是$（「＃uploadPic」）。對話框。我也添加了UI參考。 – James123 2011-04-07 16:04:24

您還沒有添加到jQuery UI的一個參考：

<script type=text/javascript src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>

併線

jQuery("uploadPic").dialog({

應該

jQuery("#uploadPic").dialog({

爲你靶向一個div與ID。

來源

2011-04-07 15:56:16 mathieu

add add。仍然無法正常工作 – James123 2011-04-07 16:02:57

jQuery（「＃uploadPic」）。dialog（{我試過了，仍然不行。 – James123 2011-04-07 16:11:07

我認爲您的直接問題是您在創建對話框時在選擇器頂部沒有＃unloadPic。它不知道你想要選擇什麼，因此從不創建對話框。另外，如果您使用jQuery，爲什麼不使用jQuery爲您的dialog()添加點擊處理程序？

<map name="Map"> 
    <area id="myAlerts" 
      shape="rect" 
      coords="225,16,287,33" 
      href="/_layouts/MyAlerts.aspx" 
      alt="My Alerts" /> 
</map>

請注意，您area標籤，你需要包括id，以及，添加/在>前正確地關閉標籤，你沒有。

這是我用，我已經修改了它爲您例如：

(function($, window, document, undefined) { 

    // grab dialog and area 
    var $dialog = $("#uploadPic"), 
     $myAlerts = $("#myAlerts"); 

    // attach click handler 
    $myAlerts.click(function(e) { 

     // prevent default click action 
     e.preventDefault();   

     // if dialog exists, unbind and open 
     if ($dialog.length) $dialog.unbind().dialog('open'); 

    }); 

    // added to re-center dialog when window re-sizes 
    $(window).resize(function() { 

     if ($dialog.length && $dialog.dialog('isOpen')) 
      $dialog.dialog('option', 'position', 'center'); 

    }); 

})(jQuery, this, document);

編輯：

我還想補充一點，因爲你正在使用MasterPages，我肯定會確保要添加的onLoadFunction()通過：

if (Sys != undefined && Sys.Application) { 

    // add to Application object 
    Sys.Application.add_load(onLoadFunction); 

} else { 

    // fall back to adding to window.onload   
    window.onload = onLoadFunction(); 

}

我看到了_spBodyOnLoadFunctionNames.push("onloadFunction");，但我不知道是什麼確實如此。我會假設它做它應該做的。

來源

2011-04-07 16:26:26

之前，我必須使用Style =「display：none」，對吧？ – James123 2011-04-07 16:33:57

@ James123 - 關於unloadPic div？是的， – 2011-04-07 16:37:53

$ myAlerts.click沒有調用，我在裏面添加了alert方法，不起作用 – James123 2011-04-07 16:43:16

-1

下面是使用jQuery的對話框在asp.net母版頁一篇有趣的文章。

http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/

來源

2013-05-31 13:26:57

Jquery對話框不能在masterpage中工作？

回答

相關問題