Jquery dialog not working in masterpage?

Question

I added below code in the masterpage. I am able to get alert("I am in onload Function");, but jQuery("uploadPic").dialog not working. The <div> portion showing on the page.

I am using reference to jQuery is

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

I tried $('#uploadPic').dialog also. But did not work.

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

You mention you've included jQuery, but have you also included jQuery UI to get access to the .dialog() function? If so, are you getting any errors in the console? — Rory McCrossan, Apr 07 '11 at 15:52

score 3 · Answer 1 · answered Apr 07 '11 at 15:54

3

You mention you've included jQuery, but have you also included jQuery UI to get access to the .dialog() function?

answered Apr 07 '11 at 15:54

Rory McCrossan

331,213
40
305
339

I am not refered to any jQuery UI. Where can i get reference for that? – James123 Apr 07 '11 at 15:56
should I use jQuery("uploadPic").dialog or $("#uploadPic").dialog. I added UI reference also. – James123 Apr 07 '11 at 16:04
1

$("#uploadPic").dialog as you are referencing by ID – Rory McCrossan Apr 07 '11 at 16:06

mathieu · Answer 2 · 2011-04-07T16:07:17.347

3

You didn't add a reference to jquery ui :

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

And the line

jQuery("uploadPic").dialog({

should be

jQuery("#uploadPic").dialog({

as you're targetting a div with an id.

edited Apr 07 '11 at 16:07

answered Apr 07 '11 at 15:56

mathieu

30,974
4
64
90

add also. Still not working – James123 Apr 07 '11 at 16:02

Richard JP Le Guen · Accepted Answer · 2011-04-07T18:46:31.053

On top of not referencing jQuery in a <script> element, and not referenceing jQuery UI in a <script> element, and not linking to some jQuery UI css in a <link> element, and not using an octothorpe # when selecting by id jQuery("#uploadPic), you also never call your showDialog(...) function:

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

Since you have specified autoOpen: false when you called 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");
        }
    });

... the dialog is not visible at first. You have to call either open(...) or dialog("open") - like you did in your showDialog(...) function.

But since you never call that function, it never opens the dialog.

Try this:

<!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>

This is working.... But When I click .. Page is scrolling to buttom of the page... It should stay at same place — James123, Apr 07 '11 at 19:04
@James123 - Is that a problem with the example I gave above, or is it a problem when you apply the solutions I describe to your master page? Also, which browser? — Richard JP Le Guen, Apr 07 '11 at 19:06
I am using IE9 now. I am using samething like you.$(document).ready. — James123, Apr 07 '11 at 19:18
@James123 - But are you using `$(document).ready` in your Master Page or is the problem in my example? I don't see any issue with my example. — Richard JP Le Guen, Apr 07 '11 at 20:02
@James123 - This still is not what you are actually trying to achieve. Your question is **very** misleading. The gist of what you said in the comments of my answer was that you want an ajax loading/processing modal that pops up when a page or action takes too long, to let the user know it's processing. Hence why I sent you on the path of UpdatePanel and UpdateProgress for ASP.NET/MasterPages. You could do the same thing with `$.ajax` if you like, but I just figured you could learn the .NET route first. Using a `dialog()` is not the correct way to achieve this affect. — Code Maverick, Apr 08 '11 at 16:02

Code Maverick · Answer 4 · 2011-04-07T16:49:57.393

1

I think your immediate problem is that you don't have a # in front of unloadPic in your selector up top, when you are creating the dialog. It doesn't know what you are trying to select, thus never creates the dialog.

Also, if you are using jQuery, why not attach a click handler for your dialog() using jQuery?

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

Note that to your area tag you need to include an id, as well as, add the / in front of the > to properly close the tag, which you don't have.

This is what I use and I have modified it for your example:

(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);

EDIT:

I would also add that since you are using MasterPages, I'd definitely make sure you are adding the 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(); 

}

I see the _spBodyOnLoadFunctionNames.push("onloadFunction");, but I'm not sure what exactly that does. I would assume it does what it should.

edited Apr 07 '11 at 16:49

answered Apr 07 '11 at 16:26

Code Maverick

20,171
12
62
114

@James123 - On the unloadPic div? Yes. – Code Maverick Apr 07 '11 at 16:37
$myAlerts.click is not calling . I added alerts method inside that. doesn't work. – James123 Apr 07 '11 at 16:43
@James123 - Question ... why are you calling uploadPic dialog and redirecting them to MyAlerts.aspx at the same time via the map/area? – Code Maverick Apr 07 '11 at 16:46
@James123 - To me, it looks like it would just redirect you to that MyAlerts.aspx page. We should prevent this action. I'll edit the click handler. – Code Maverick Apr 07 '11 at 16:49
MyAlerts.aspx is taking so long to load the page. So I want display a dialog to show "please wait..." kind of dialog.. so user will know... something happening... – James123 Apr 07 '11 at 16:49
@Scott: Do you have any example to "wait popup" until page loads? catch me @ getur.srikanth@gmail.com – James123 Apr 07 '11 at 16:54
@James123 - I wouldn't do that through the `dialog()` and furthermore, that's not what the uploadPic div even suggests you are trying to do. In ASP.NET you can use an [UpdatePanel](http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx) combined with an [UpdateProgress](http://msdn.microsoft.com/en-us/library/system.web.ui.updateprogress.aspx) to achieve that result. – Code Maverick Apr 07 '11 at 16:54
@Jame123 - Check out the links in the previous comment. Plenty of examples in there from Microsoft. – Code Maverick Apr 07 '11 at 16:58

score -1 · Answer 5 · answered May 31 '13 at 13:26

-1

Here is an interesting article using jQuery dialog in asp.net master page.

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

answered May 31 '13 at 13:26

c-sharp

573
1
9
25

Jquery dialog not working in masterpage?

5 Answers5