Thursday, August 30, 2012

Dialog Popup with hyper link

Java script function for Dialog popup 

After click the link popup the data which is return form that link.

link
@Html.ActionLink("Name", "Action","Controller",new {//data need to pass as query string}, new {
// html attributes
class = "LinkClassName", dialog-title = "this is tiltle name ",  dialog-id  = "dailog id" ....
});

 $(".LinkClassName").live("click", function (e) {
            e.preventDefault();     
.append($loading) // this is for load image for fully loaded 
.addClass("dialog") // css class for loading 
.attr("id", $(this) // div id 
.attr("dialog-id")) // poup id
.attr("dialog-path", $(this).attr("data-dialog-path")) // after close page refresh 
.appendTo("body") // attached div content to the body 
.dialog({
   title: $(this).attr("data-dialog-title"), // popup dialog title 
   close: function () {  $(this).remove()   }, // close finction 
   modal: true, /
   resizable: false,
   width: '400px'
}).load(this.href); // href is the url
        });
more details available here.(http://jqueryui.com/)


Form submit using Ajax 


var form = $("#yourFormId");
$.ajax({
                url: '@Url.Action("ActionName","ControllerName")',
                data: form.serialize(),
                type: 'POST',
                success: function (data) {
                    $("#targetUpdateDiv").html(data);
                }
            });