3

マスターページに以下のコードを追加しました。を取得できますalert("I am in onload Function");が、jQuery("uploadPic").dialog が機能しません。<div>ページに表示される部分。

私は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>
4

5 に答える 5

3

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({

IDでdivをターゲットにしているため。

于 2011-04-07T15:56:16.153 に答える
3

あなたは jQuery を含めたと言いましたが、.dialog() 関数にアクセスするために jQuery UI も含めましたか?

于 2011-04-07T15:54:27.617 に答える
2

要素でjQuery を参照せず、<script>要素で jQuery UI を参照せず、<script>要素で jQuery UI css にリンクせず、id で選択するときに<link>オクトソープを使用しないことに加えて、関数を呼び出すこともありません。#jQuery("#uploadPic)showDialog(...)

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

autoOpen: falseお電話の際にご指定いただきましたので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");
        }
    });

... ダイアログは最初は表示されません。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-07T18:41:20.027 に答える
1

私はあなたの当面の問題は、ダイアログを作成しているときに、セレクターの上部にある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()viaを追加していることを確認します。

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-07T16:26:26.190 に答える
-1

asp.net マスター ページで jQuery ダイアログを使用した興味深い記事を次に示します。

http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/
于 2013-05-31T13:26:57.693 に答える