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>
Related
I keep getting this syntax error on the browser. I am not sure what am I missing here.
Basically I am trying to make a request to an external web api which takes an array of checked check box values as parameters passed in query parameter.
Here is my javascript.
function lookup() {
var query = document.getElementById("sform").value;
// var res = PageMethods.lookupfromjs_Click(query, onSuccess, onError);
var dttypeList;
$('#Button1').click(function() {
$('input[type=\"checkbox\"]').each(function(){
dttypeList.push(this.name);
alert( $.toJSON(dttypeList));
});
});
}
Here is the html
<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/lookup.js" type="text/javascript"></script>
<script src="Scripts/getdatatype.js" type="text/javascript"></script>
</head>
<body>
<section class="webdesigntuts-workshop">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
</asp:ScriptManager>
<div>
<asp:TextBox type="search" name="search" id="sform" placeholder="What are you looking for?" runat="server" />
<asp:TextBox type="search" name="hdnText" id="hdnText" runat="server" />
<button id="Button1" onclick="lookup()" type="button">Search</button>
</div>
<div>
<p> </p>
</div>
<div>
<button id="Getdtbtn" type="button" onclick="getDatatypes()">Get Datatypes</button>
</div>
</form>
</section>
</body>
</html>
Does the lookup function even need to be declared? With the limited HTML snippet you posted, I tried to cobble something closer together resembling what you may have been trying to achieve:
var query = document.getElementById('sform').value;
var dtypeList = [];
$('#Button1').click(function() {
$('input[type="\checkbox\"]').each(function() {
dtypeList.push(this.name);
alert(JSON.stringify(dtypeList));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sform">
<label for="Hello">Hello</label>
<input type="checkbox" name="Hello">
<label for="World">World</label>
<input type="checkbox" name="World">
<button id="Button1" type="button">Search</button>
</form>
This still loops through all of the checkboxes and spits them out to an alert once you click the button.
Also, please refer to this post about $.toJSON(): https://stackoverflow.com/a/7759630/3611025
I want to show data in a popup window. popup window will be show by clicking on an image. but data doesn't show.
javascript codes:
<script type="text/javascript">
$(document).ready(function () {
$('.popup').click(function () {
$('.box').show("slow");
$('.close').show("slow");
})
$('.close').click(function () {
$('.box').hide("slow");
})
})
</script>
by click on image1 popup window show and by click on image 11 an image sould be show in popup window but doesn't work.
<asp:Image ID="Image1" runat="server" CssClass="popup" />
<div class="box">
<div class="close">
×
</div>
<center>
<asp:Image ID="Image11" runat="server" CssClass=bigpic />
</center>
</div>
the image show but fade quickly!
You can use the jQuery UI library to display a popup, here's an example:
Javascript:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.popup').click(function () {
$(".box").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
});
</script>
.ASPX:
<asp:Image ID="Image1" runat="server" CssClass="popup" ImageUrl="~/Images/img1.jpg" />
<div class="box">
<asp:Image ID="Image11" runat="server" CssClass="bigpic" />
</div>
I have created a design using asp .net. On clicking the submit button a validator message will come but style is changed. I have seen that "required" keyword is used for showing validator message in php and it won't change any style. Is it possible to use such a validator in asp .net?
I have tried:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControltoValidate"Control Name"></asp:RequiredFieldValidator>
But I need to show the error message as pop up.
You need to
Set ShowMessageBox="true" in your ValidationSummary control;
Set Display="none" in your RequiredFieldValidator control;
Example:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControltoValidate"Control Name" Display="none" />
<asp:ValidationSummary ID="MyValidationSummary" runat="server"
ShowMessageBox="true"
ShowSummary="false" />
Based on your question, I believe you are looking for a validation example in ASP.net.
Please see the simple example I have for you below:
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
</script>
Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Display="None" ControlToValidate="txtName"
runat="server" ErrorMessage="Name is required."></asp:RequiredFieldValidator>
<br />
Email:
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="None" ControlToValidate="txtEmail"
runat="server" ErrorMessage="Email is required."></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
<div id="validation_dialog" style="display: none">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</form>
</body>
If i have an asp control that has a particular Validation grop
<asp:CustomValidator ID="myRequiredValidator" runat="server" ControlToValidate="myDropDown" ClientValidationFunction="myClientSideValidationFunction" ValidateEmptyText="True" Display="None" ValidationGroup="group A"></asp:CustomValidator>
How can i change the group in javascript?
<script type="text/javascript" language="javascript">
function changeValidationGroup(validator) { validator.ValidationGroup("group B"); }
Or something like that?
Thanks
In ASP.NET validation controls become <span> tags when rendered as HTML, simply change the validationGroup attribute of the required span to a new value:
<head runat="server">
<title>Validation</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function ChangeGroupName() {
var groupName = $("#txtGroupName").val();
if (groupName != '') {
$("#validator").attr('validationGroup', groupName);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="txtGroupName" />
<asp:CustomValidator ID="validator" runat="server" ErrorMessage="Error" ValidationGroup="Group1"></asp:CustomValidator>
<input type="button" value="OK" id="btnChangeGroup" onclick="ChangeGroupName()" />
</form>
</body>
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.
}