Adding a jQuery dialog to Admin side

Greetings,

I'm currently working on a piece of custom code that will be attached to a Product's Detail called Product Comment (different from Reviews since it is used only by admins).  I have the grid and pieces in place using a new window, however, I would like to use jQuery's dialog instead.  I'm curious to what it would take to get the dialog to show up on the admin side.  Here is what I did (that didn't work).

_AdminLayout.cshtml - added the following references:

Html.AppendCssFileParts(@Url.Content("~/Administration/Content/smoothness/jquery-ui-1.8.17.custom.css"));
Html.AppendScriptParts(@Url.Content("~/Administration/Scripts/jquery-ui.min.js"));

Once I had those two in, I got the dialog to work, however, I got the following error:

Error: Could not complete the operation due to error 80020101.

I finally gave up and removed jQuery-ui.  My question is, how do you add it properly?  I am thinking I may have missed something since it works fine on the user side but not the admin.  Any help would be appreciated.

Kindest Regards,
Chad Johnson

chajo10 wrote:

This is a JavaScript problem. I think the jQuery UI code is trying to call some function / property that doesn't exist. That can be caused by jQuery / DOM not properly loaded. Can you check the rendered HTML, and see if jQuery has been included BEFORE jQuery UI? Also, make sure you are calling the jQuery UI functions after the DOM has been loaded. You can place the code that calls jQuery UI functions right before the closing BODY tag, or use

$(document).ready(function() { });

I placed jQuery in first, then jQuery-ui, and lastly the stylesheet for jQuery-ui.  I am placing the script within $(document).ready(function()) already.  Everything looks right but does not function right.  I can open a dialog but get an issue when I try to load a view into one, hence where the error is coming from.  I'm thinking it's just something wasn't done correctly in adding jQuery.

chajo10 wrote:

Could it be you are provided the Action path to jQuery UI incorrectly? Perhaps you can show your code here for better analysis of the problem? Have you tried debugging the script in the browser (F12 in IE and Chrome, or FireBug in FireFox)?

In _CreateOrUpdate.cshtml in Administration/Views/Product, I have the following (skipping straight down to my div and script since the grid/buttons, etc. are pretty long):

...
<div id="divComment">
</div>
    
<script type="text/javascript">
     var selectedIds = [];

     $(document).ready(function () {                
          $("#divComment").dialog({
               height: 150,
               width: 400,
               modal: true,
               autoOpen: false,
               draggable: false,
               resizable: false,
               open: function() {},
               close: function(event, target) {
                                $("#divComment").html('');
                                return false;
                            }
          });

          ...

           //"Edit" button
           $('#edit-selected').click(function (e) {
                    e.preventDefault();

                    //You can only edit one item at a time
                    if (selectedIds.length != 1) {
                        alert("You must select only one comment to edit");
                        return false;
                    }

                    //Get selectedId and set link
                    var selectedId = selectedIds[0];
                    var link = '@(Url.Action("ProductCommentAddPopup", "Product", new { Id = "-1",
                                         btnId = "btnRefreshProductComments", formId = "product-form" }))';
                    link = link.replace("-1", selectedId);

                    $("#divComment").load(link);
                    $("#divComment").dialog("open");

                    //Open dialog for Comment
                    //OpenWindow(link, 400, 125, true);
                    return false;
                });
                 
                ...
       });
</script>

Over in my view for the popup (ProductCommentAddPopup.cshtml):

@{
    Layout = "~/Administration/Views/Shared/_AdminPopupLayout.cshtml";
}
@model ProductModel.ProductCommentsModel
@*@{
    if (ViewBag.ShouldClose)
    {
        <script type="text/javascript">
            try {
//                $("#divComment").dialog("close");
                window.opener.document.forms['@(ViewBag.formId)'].@(ViewBag.btnId).click();
                window.opener.document.forms['@(ViewBag.formId)'].selectedIds = [];
                window.close();
            }
            catch (e){} 
//            var url = $("#productcomments-grid").attr("url");
//            jQuery.ajax({
//                url: url,
//                timeout: 2000,
//                cache: false
//            }, function () { });
        </script>
    }
}*@
@using (Html.BeginForm())
{
    @Html.HiddenFor(model => model.CustomerId)
    @Html.HiddenFor(model => model.ProductId)
    @Html.HiddenFor(model => model.CreatedDate)    
    @Html.HiddenFor(model => model.LastModifiedDate)

    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.Comment):
            </td>
            <td class="adminData">
                @Html.TextAreaFor(model => model.Comment)
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button id="save" name="save" value="save" class="t-button">@T("Admin.Common.Save")</button>
            </td>
        </tr>
    </table>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#save").click(function (e) {
                var formId = "@(ViewBag.formId)";
                var btnId = "@(ViewBag.btnId)";

                $.ajax({
                    cache:false,
                    type: "POST",
                    url: "@(Url.Action("ProductCommentAddPopup", "Product"))",
                    data: { "formId": formId, "btnId": btnId },
                    complete: function () { alert("here"); },
                    success: function (html) {
                            return false;
                            window.opener.document.forms['@(ViewBag.formId)'].@(ViewBag.btnId).click();
                            $("#divComment").dialog("close");
                    },
                    error:function (){
                            alert('Failed to add/update product comment.');
                    }  
                });
            });
        });
    </script>
}

In ProductController.cs:

        [HttpPost]
        //[FormValueRequired("save")]
        public ActionResult ProductCommentAddPopup(string btnId, string formId,
                 ProductModel.ProductCommentsModel model)
        {
            if (!_permissionService.Authorize(StandardPermissionProvider.ManageCatalog))
                return AccessDeniedView();

            var productComment = PrepareProductComments(model);

            //Update a Product Comment
            if (productComment.Id != 0)
                _productService.UpdateProductComment(productComment);
            //Adding a new Product Comment
            else
                _productService.InsertProductComment(productComment);

            //Update the fields and set the close flag to true
            ViewBag.btnId = btnId;
            ViewBag.formId = formId;
            ViewBag.ShouldClose = true;
            return PartialView(model);
            //return View(model);
        }

The commented pieces are how I make it work with a popup window instead of the dialog.

I can't find bug in your code (I might overlook it as the formatting in the forum is terrible... Haha... Anway... Let's assume your code is alright as you are able to load it from a Popup Window)...

I've done some research on the internet, and it turned out that this is a well-known jQuery bug. http://senseicris.wordpress.com/2012/05/19/jquery-error-80020101-a-fix/ for example has a fix. Perhaps you can try applying this fix?

It does work with the popup.  I've confirmed.

I've also found the jQuery bug article you pointed out and trust me, the fix doesn't work.  I need the Id to know which comment is being edited.

I am also not sure if the bug reported there is the one you are experiencing... as I've also found on the Internet other bugs reported with the same error code... so we have to try and see...

I would suggest doing the following: try with any Url that doesn't require querystring, and confirm if that's the bug. If you can confirm that the querystring is the problem, then create a custom route in nopCommerce such that your URL turns in to a nicely parameterized URL instead of using query string... :P

This is what I get currently:  http://localhost:2619/Admin/Product/ProductCommentAddPopup/3753

Making a route would look the same.  :P

chajo10 wrote:

so with

var link = '@(Url.Action("ProductCommentAddPopup", "Product", new { Id = "-1", btnId = "btnRefreshProductComments", formId = "product-form" }))';

you are getting this url: http://localhost:2619/Admin/Product/ProductCommentAddPopup/3753?

hmmm... if it's not the URL problem then it become tricky... haha...

anyway... I found that the Admin has heavy use of Telerik controls. For example, the Product Details page has the following:

<script type="text/javascript" src="/Scripts/2012.1.214/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.tabstrip.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.textbox.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.grid.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.grid.editing.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.list.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.draganddrop.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.window.min.js"></script>
<script type="text/javascript" src="/Scripts/2012.1.214/telerik.menu.min.js"></script>

It could be that jQuery UI is having conflict with Telerik controls...

Also, Telerik already has an implementation of a modal popup, and you can easily use it with (taken from Edit Product Details page):

jQuery('#productmodel-delete-confirmation').tWindow({effects:{list:[{name:'toggle'}],openDuration:200,closeDuration:200}, modal:true, draggable:false, resizable:false});
jQuery('#copyproduct-window').tWindow({modal:true, draggable:true, resizable:false});

You can use modal popup without jQuery UI... haha... a workaround I would say (or even better since the function is already there that we can reuse)... :P