Develop Reference

JQUERY dialog box with form

my Jquery dialog box is not hidden. when the page is loaded it is automatically called and displayed while I set its property to autopen to false. I set a button to click event to open the dialog box. but in no vain
my code for Jquery is here
$(document).ready(function () {
$("#dialog").dialog({
buttons: [{ text: "OK", click: function () { $(this).dialog("close") } }],
modal: true,
autoOpen: false
});
$('#btnpopup').click(function () {
$('#dialog').dialog("open");
});
My code for HTML
<div >
<asp:Button ID="btnpopup" runat="server" Text="Add Instruction" />
</div>
<div id="dialog">
<table>
<tr>
<td>Title</td>
<td>
<asp:TextBox ID="titlefield" runat="server"></asp:TextBox>
</td>
<td>Instruction Category</td>
<td>
<select id="category"></select>
</td>
</tr>
<tr>
<FTB:FreeTextBox ID="FreeTextBox1" runat="server"></FTB:FreeTextBox>
</tr>
</table>
</div>
Included Libraries
e<script src="Scripts/jquery-ui-1.12.1.js" ></script>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<link href="Content/jquery.layout-1.4.3.css" rel="stylesheet" />
<link href="Content/jquery.ui.layout.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>nter code here

From your code it seems you loading jquery ui library twice, so it conflicted. Just use it only once after your jquery library has been load. Please see below reference.
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<link href="Content/jquery.layout-1.4.3.css" rel="stylesheet" />
<link href="Content/jquery.ui.layout.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>

It seems you forgot to put a last curly bracket and a bracket })
it works on mine
screenshot
$(document).ready(function () {
$("#dialog").dialog({
buttons: [{
text: "OK",
click: function () {
$(this).dialog("close")
}
}],
modal: true,
autoOpen: false
});
$('#btnpopup').click(function () {
$('#dialog').dialog("open");
});
})
Codepen

Jquery Dialogbox in webforms

I used this Plugin in Webforms. I have Content Place holder on my Form so I converted the Code into Below:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$('#<%=dialog.ClientID %>').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$('#<%=opener.ClientID %>').click(function() {
$('#<%=dialog.ClientID %>').dialog("open");
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="dialog" runat="server" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button runat="server" id="opener">Open Dialog</button>
</asp:Content>
But it is not working. How do i solve this ?

The <button> element submits the page back to the server after being clicked. This is its default behavior inside a form (a Webforms page is a form) and that's why you cannot see the dialog.
You can just add a type="button" to your button like this:
<button runat="server" type="button" id="opener">Open Dialog</button>
It will prevent the button from posting the page back to the server and you will be able to see the dialog.

Showing a dialog on button click

This is a part of my page:
<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
<img alt="" class="logo" src="Images/ECON_76px.png" />
<asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>
<asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>
<asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>
<asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
</asp:ContentPlaceHolder>
</div>
<div id="dialog" title="Restart">
<p>This will clear all data of the current session (as if you would have just logged in)!</p>
<p>Are you sure?</p>
<input id="yes" type="button" value="Yes" />
<input id="no" type="button" value="No" />
</div>
<script type="text/jscript">
function ShowDialog() {
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
}
</script>
</form>
</body>
The idea is to show a dialog when the restart button is clicked as I don't like the alert box of Chrome.
Why does it not work?
Kind of took it straight from an example in a book.

You aren't loading any jQuery UI CSS libraries, and you are loading 2 versions of normal jQuery. As a quick test, try removing your own jQuery libraries and link to Google to get you started. You can then gradually place yours back:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
A side note, you are mixing type "jscript" and "javascript". As of HTML5, you can simply leave off specifying type declarations. It will be assumed to be CSS or JavaScript.

There it needs some changes in your code. Try this:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
});
function ShowDialog() {
$("#dialog").dialog('open');
}
</script>

masonry not animating anymore

I am facing problem with masonry, it was working perfect, now it random stop animating.
i am so much confuse; i try everything but it is not animating pics any more..
is there anyone with solution?
I uploaded a simple webpage with masonry, Please take a look to find error.
http://www.bhinderblink.com/masonryDemo.aspx
http://www.bhinderblink.com (this main page working with DB, repeater and jquery to load pictures)
Script
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
})
});
</script>
Body
<div id="container">
<div class="box">
<div id="imageDiv1">
LoadImage...1<br />
<asp:Image runat="server" ID="img1" ImageUrl="~/pic/jas/pic10.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv2">
LoadImage...2<br />
<asp:Image runat="server" ID="Image2" ImageUrl="~/pic/jas/pic11.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv3">
LoadImage...3<br />
<asp:Image runat="server" ID="Image1" ImageUrl="~/pic/jas/pic12.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv4">
LoadImage...4<br />
<asp:Image runat="server" ID="Image3" ImageUrl="~/pic/jas/pic13.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv5">
LoadImage...5<br />
<asp:Image runat="server" ID="Image4" ImageUrl="~/pic/jas/pic14.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv6">
LoadImage...6<br />
<asp:Image runat="server" ID="Image5" ImageUrl="~/pic/jas/pic15.jpg" />
</div>
</div>
</div>
Main Page body
<form id="form1" runat="server">
<div id="topBanner">
</div>
<asp:Repeater ID="rptCustomers" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div id="container">
<div class="box">
<asp:Image ID="zzz" runat="server" ImageUrl='<%# "~/pic/jas/" + Eval("pic_name") + ".jpg" %>' />
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
<div id="imageDiv">
LoadImage...
</div>
<img id="loader" alt="" src="loading.gif" style="display: none" />
</form>
main page script
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<%--masonry--%>
<script type="text/javascript">
$(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
});
});
</script>
<%--Pagging--%>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "/index.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("failur");
alert(response.d);
},
error: function (response) {
alert("error");
alert(response.d);
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var pic_infoVar = xml.find("pic_info");
pic_infoVar.each(function () {
var customer = $(this);
$("#imageDiv").append("<img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/>");
});
$("#loader").hide();
}
</script>

Swap the order of the scripts
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
jQuery has to be loaded first for masonry to work:
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
Edit:
Your site seems to have masonry applied to every container class, which seems to be different then your demo page.
Demo page:
<div id="container">
<div class="box">
<div id="imageDiv1">
LoadImage...1<br />
<img id="img1" src="pic/jas/pic10.jpg" />
</div>
<div class="box">
<div id="imageDiv2">
LoadImage...2<br />
<img id="Image2" src="pic/jas/pic11.jpg" />
</div>
</div>
</div>
Main page:
<div id="container">
<div class="box">
<img id="rptCustomers_zzz_0" src="pic/jas/pic1.jpg" />
</div>
</div>
<div id="container">
<div class="box">
<img id="rptCustomers_zzz_1" src="pic/jas/pic2.jpg" />
</div>
</div>
So add another container to contain the .containers or apply masonry to the body itself
$(function () {
$('body').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
});
});

$(document).ready(function () {
$('.container').imagesLoaded(function () {
var container = document.querySelector('.container');
var msnry = new Masonry( container, {
// options
colWidth:200,
itemSelector: '.box',
isFitWidth: true,
isAnimated: true,
animationOptions: {
duration: 1000,
easing: 'linear',
queue: false
},
isInitLayout: false
});
msnry._isLayoutInited = true;
msnry.layout();
});
});

UI confirmation not firing the event

I am using jQuery confirmation box within my listView and the confirmation box displayed with the user clicks delete.
The problem that I am faced with, is that when the user clicks OK it, the lvAlbums_ItemDeleting event is not fired.
Below is the .aspx code:
<link href="jQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jQuery/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="https://www.google.com/jsapi?key=" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$().ready(function () {
$('#dialogContent').dialog({
autoOpen: false,
modal: true,
title: "MySql Membership Config Tool",
width: 300,
height: 250
});
});
function rowAction(uniqueID) {
$('#dialogContent').dialog('option', 'buttons',
{
"OK": function () { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
});
$('#dialogContent').dialog('open');
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="thumbs">
<asp:ListView ID="lvAlbums" runat="server" GroupItemCount="15" DataKeyNames="album_id">
<LayoutTemplate>
<table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; width: 100%;">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<div>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ThumbNail.ashx?ImURL=/uploads/"+Eval("photo_file_name") %>'
Width="130" Height="150" BorderStyle="None" />
<asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("album_name") %>' CssClass="photoTitle"></asp:Label>
<br />
<asp:Button ID="btnDeleteAlbum" runat="server" Text="Delete Album" Width="144px" OnClick="lvAlbums_ItemDeleting" OnClientClick="javascript:return rowAction(this.name);"
CommandName="Delete" />
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div class="pager">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvAlbums" PageSize="12">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="true" ShowPreviousPageButton="true"
ShowLastPageButton="false" ShowNextPageButton="false" ButtonCssClass="first"
RenderNonBreakingSpacesBetweenControls="false" />
<asp:NumericPagerField CurrentPageLabelCssClass="current" NextPreviousButtonCssClass="next"
NumericButtonCssClass="numeric" ButtonCount="10" NextPageText=">" PreviousPageText="<"
RenderNonBreakingSpacesBetweenControls="false" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="false"
ShowLastPageButton="true" ShowNextPageButton="true" ButtonCssClass="last" RenderNonBreakingSpacesBetweenControls="false" />
</Fields>
</asp:DataPager>
</div>
</div>
<div id="dialogContent">
<h3>confirm</h3>
<p>Click ok to accept</p>
</div>
</form>
</body>
Firebug throws the following error:
__doPostBack is not defined
[Break On This Error] "OK": function () { __doPostBa...ID, ''); $(this).dialog("close"); },
If anyone could provide a solution with the above, it would be greatly appreciated.
I have spent days looking at different jQuery confirmation box examples but this is the best I can do. Ideally I would want to be use http://jqueryui.com/demos/dialog/#modal-confirmation within gridviews, dataViews and ListViews but can't find examples which exactly provide steps to follow.
Thanks

Or you could use this:
protected void Page_PreRender(object sender, EventArgs e)
{
//If the page doesn't have a control that causes a postback, __doPostBack() won't be output
//as a function definition. One way to override this is to include this line in your Page_PreRender():
Page.ClientScript.GetPostBackEventReference(this, string.Empty);
//This function returns a string calling __doPostBack(); but also forces the page to output
//the __doPostBack() function definition.
}