I am using the Calendar control of ASP.NET. I need to display a pop-up form when I hover over a particular date in the Calendar control. This pop-up should display data from database.
Does anyone have a solution for this?
You should have an empty div:
<div id="popup"></div>
then bind an event to the calendar elements:
('li.calendar').hover(function(){
//make an ajax call and populate the popup div with the data
//easiest method is jquery.load(), but if you need more control use jquery.ajax();
$("popup").load('path/to/page.asp',data,function(){
$("popup").show();
});
});
Look at jquery.load() and jquery.ajax()
I dont know how asp name the date spans, check it, its very easy to detect
after getting the selector
user jQuery to add the event
jQuery('selector').hover(function(){ //or use mousemove
getPopup(jQuery(this).text()); // just send any data to detect the date
}) ;
after that you'll need to make an AJAX request in the getPopup function
you may use
jQuery.get()//or jQuery.post()
__doPostBack()//if you have update panels
//or any ajax technique xmlhttprequest,PM,...
in the response of the ajax request just draw the popup ...
hope this helps
examle getPopup function
function getPopup(date/*for example*/){
jQuery.getScript('www.myWebsite.com/pageThatDrawsThePopup?date='+date);
// getScript assuming that the return value is JS code the immediately draws the popup
// ?date = date assuming that your page takes the date as query string and get the data from the database upon this field
//dont forget to change the url
//very simple very easy ...
}
Add a CSS class to the cell containing the date that should trigger the popup. You'll need to override the DayRender event to do this.
void myCalendar_DayRender(object sender, DayRenderEventArgs e)
{
if (e.Day.Date.Day.ToString().EndsWith("7")){// Replace with your own condition
e.Cell.CssClass+= "specialCell"; //replace with your own custom css class name
}
}
Then add some JavaScript (or Jquery) to trigger the pop-up. The JQuery ajax functions provide the easiest way to get your data and populate the pop-up as per #user1225246's answer.
$(document).ready(function(){
$('.specialCell').hover(function(){
function(){//This will get called when you mouseover
alert('put your JQuery AJAX code here.');
},
function(){
alert('do any clean-up (e.g. hiding the popup if you need to) here.');
}
});
Related
I a have a web form with few textboxes,dropdowns and finally towards the end of the page is 4 custom ajax editors. So on page load the focus is always inside the last editor and no way it comes to the first text box or top of page.On each page load the cursor goes inside the last editor control.How to bring the focus inside the first text box?
Below are the few methods i tried
1.<body onload="document.body.scrollTop = 0;">
2. void Page_Init(object sender, EventArgs e)
{
SetFocus(txtReqtitle);
}
for the above while loading the page i could see the focus goes to the desired text box and then it comes to the last custom control.
3. if(!Page.ClientScript.IsStartupScriptRegistered("scrFocus"))
{
string strScript="var txtBox=document.getElementById('" + txtReqtitle.ClientID.ToString() +"');txtBox.focus();";
ClientScript.RegisterStartupScript(this.GetType(),"scrFocus", strScript,true);
}
4.
function setFocus() {
document.getElementById("txtReqtitle").focus();
}
5. ScriptManager.GetCurrent(this.Page).SetFocus(txtReqtitle);
Any ideas? Thanks..
Seems focus property is not working in load event because of ajax editors
Please add txtReqtitle.Focus() in Page Prerendercomplete() event and let me know whether it works
found the solution which worked for me .would like to share it .. its simple ..just make the autofocus=false for the control.
using jquery
$(document).ready(function(){
$('#<%= txtReqtitle.ClientID %>').focus();
});
I have a form in asp.net webpage which contains 2 drop down lists and a hyperlink + a button.
I want that if user changes an option is dropdowns to change navigate url.
I have done like so:
<asp:DropDownList ID="ddlPackages" AutoPostBack ="true" runat="server"
onselectedindexchanged="ddlPackages_SelectedIndexChanged"></asp:DropDownList>
and then I have the method defined.
The point is that I don't want to make a submit when I change the drop down. Can I do it using only aspx or I have to use javascript?
If I understand you correctly you want to change the href of the hyperlink based on the selected value of the dropdown. You can do this with javascript. Make sure you have AutoPostBack="false" and remove the OnSelectedIndexChanged attribute as well.
To do it using jQuery, use something like this:
<script type="text/javascript>
$(function(){
var $dropdown = $('#<%= ddlPackages.ClientId %>');
$dropdown.change(function(){
//Put logic to decide the link here based on the select value
var newPage = 'page' + $dropdown.val() + '.aspx';
$('#linkId').attr('href', newPage);
});
});
</script>
Edit:
In case you absolutely must have the logic for getting the new url based on the drop down value on the server side, you can turn the method into a Page Method and call it using ajax from the jQuery script above. But you can probably get away with creating the javascript dynamically in the aspx page instead.
I see two options:
1) Wrap the controls in an Update Panel (.NET 3+). Put AutoPostBack=true on the dropdownlist, and define a SelectedIndexChange event for it that changes the hyperlink control's Navigate URL property. When the user changes the dropdown, you're method will fire without the APPEARANCE of a form submission. Downside: there's a slight delay between the dropdown changing and the link changing. If your server is really, really slow, this delay could potentially cause problems (but this is probably unlikely).
2) Use custom JavaScript and do away with your .NET controls completely. This is what I would probably do, assuming you don't need to do anything else with these controls programatically. Your JavaScript function would monitor the dropdown for a SelectedINdexChange and adjust the href attribute of the anchor tag accordingly. Look into jQuery to speed up development if you aren't too familiar with plain JavaScript.
If the control is an ASP:DropDownList, you can use the AutoPostBack="True|False" property to prevent a postback
If you don't want to use the AutoPostBack you have to post the form using jQuery or Javascript
You can add an event on your drop down list onchange and add the code you need to post the form usin jQuery:
$('#formId').submit();
http://api.jquery.com/submit/
If you to want navigate to another Url add the below code at your DropDownList control (make sure AutoPostBack=false)
onchange="window.location.href='yourUrl'"
it would be better put that Javascript on a separate file anyway
I am building a form, where required field validation must have been checked. I am not using asp validator. I am using JQuery validator like
function checkRequiredInputs(){
$("#frmSaleSubmissionInfo").validate({
rules:{
txtFName:{required: true},
txtLName:{required: true},
txtAddress:{required: true},
txtPhone:{required: true}
},
messages:{
txtFName:"Enter Name",
txtLName:"Enter Name",
txtAddress:"Enter Address",
txtPhone:"Enter Phone Number"
}
});
This is my client side validation. I am using c# in my code behind page. Now if I turned off allowjavascript option in my browser, as far as I know it won't allow javascript. So I am also doing server-side validation for required field. But, since ASP.NET does not have a message-box control, I am having trouble to let the user know what field he is keeping empty. Is there any way to use a control like the message box to show or let the user know what field(s) is/are required to fill the form successfully?
In my point of view, the best fitted to your requirement is using ASP.NET AJAX Toolkit ValidatorCallout control, which can help you to build such solution more fast way.
But if you don't want mixed up two javascript framework (ASP.NET AJAX and jQuery) than you can be expired here, where you can find a solution how to deal with a validation and jQuery.
If you want a modal popup, just send some javascript from the server code:
Response.Write(
"<script type='text/javascript'>alert('A required field is missing.');</script>");
alert() is a javascript function. Response.Write() adds the <script> element to the end of the HTTP response (i.e., the rendered HTML page).
A more elegant approach would be to use the ClientScriptManager to register a startup script:
protected void Page_Load(object sender, EventArgs e) {
this.ClientScript.RegisterClientScriptBlock(this.GetType(),
"RequiredFieldValidationScript",
"alert('A required field is missing.');",
true);
}
The javascript code alert('A required field is missing.'); will be executed after the postback.
See also: https://web.archive.org/web/20210417085026/https://www.4guysfromrolla.com/articles/021104-1.2.aspx
Without javascript, I can't imagine a simple way of recreating a modal type popup. You would have to go as to postback and re-render the page with a DIV blocking out the page and another div on top of it with the errors.
You can always pipe out the errors to a tag next to the submit button and call it a day though.
I got this Text box with default value as "First Name" ..Now when I click inside this text box to enter name , this value "First Name" keeps on displaying. What I want is to the text box to clear as soon as I click inside it. What property do I need to set in mt textbox tag ?
[Edit]
ok anything from Telerik that I can use to do that ?
There is not out of the box functionality in TextBox that will accomplish this, but the ASP.Net Ajax Toolkit has a Watermark Extender that will do everything you want.
I have used both, but now personally use a jQuery Watermark Plugin
Either will work just fine, choose based on your needs.
According to the Telerik docs you just have to set the EmptyMessage property on their TextBox control. Demo Page Here
In the code behind, on Page Load you can add the following code to achieve this
TextBox1.Attributes.Add("onClick", "javascript:if(this.value=='First Name'){this.value='';}");
You can use the method suggested by #Josh. If you do not want to use Ajax Toolkit controls or JQuery you could write it on your own using Javascript. Write a function which gets called when the foucs is received by the textbox control. I thik the function is called onfocus or just focus in Javascript.
Hi I just wrote this small function which will achieve your desired result
function clearInputBox(x,prefil){
if(x.value == prefil){
x.value = '';
}
}
Your input box looks like this
<input type='text' value='First Name' onfocus="clearInputBox(this,'First Name')" />
May be this will help you
Taking Shobans advice one step farther, you could add something like this to your Page subclass
protected override void OnInitComplete(EventArgs e)
{
string jsString = "javascript:if(this.value=='" + TextBox1.Text + "'){this.value='';}";
TextBox1.Attributes.Add("onFocus", jsString);
base.OnInitComplete(e);
}
What this will do is, it will always consider that default string is the one this controll contains at esign time (the initial one in your .aspx file), so you wont have to manually change it in codebehind every time you change your .aspx. Remember, that OnIinitComplete fires before any viewstate or postback data has been applied, but after the controlls on your page have been set to their default values.
P.S. As anishMarokey pointed, use onFocus vs onClick, since fields can gain focus without clicks via Tab key.
I encouter some postback issue when using GetPostBackEventReference. Here is the Scenario:
I have a javascript modal popup dialog and got a button in this modal dialog which used to select things (this is NOT an asp:button control)
When this javascript dialog HTML button is clicked, it will call the MS AJAX web service call by the javascript: eval() method. And this MS AJAX web service call is dynamically generated. So the code is like this:
var serviceCall = svcCall + "(" + parameters + ")"; //dynamically generate the MS AJAX web service call here
eval(serviceCall);
//use eval to trigger the MS AJAX web service call
As you may all know, after complete the MS AJAX web service, you can define a callback function to handle the completion:
function OnComplete(result, userContext, methodName) {
//force to call postback manually
eval($(userContext[0]).val());
//close the javascript dialog here
}
As I have mentioned before, the MS AJAX web service call is built dynamically, and when the MS AJAX web service call is construct, it will be passing a userContext which contain the postback value (i.e. "__doPostBack('ctl00$ContentPlaceHolder1$btnSelectUser','')", so when the javascript eval() is called, it simulate a asp:button click postback.
The userContext[0] basically holding a asp:hidden field's ClientID, and the hidden field's value is set during the Page_Load event:
protected void Page_Load(object sender, EventArgs e)
{
btnSelectUser.ValidationGroup = "popupSelect";
btnSelectUser.CausesValidation = false;
this.hdnBtnPostback.Value = Page.ClientScript.GetPostBackEventReference(btnSelectUser, string.Empty, false);
}
As you can see, this is how I bound the asp:button (i.e. btnSelectUser) 's Click Event to the asp:hiddenfield using the GetPostBackEventReference, and set the registerForEventValidation argument to false. I have also tried to use different ValidationGroup and set the CausesValidation to false, but no hope. :(
In summarize, I bound the asp:button's Click PostBackEventReference(i.e. __doPostback(....)) to the asp:hidden field's Value attribute, and using javascript eval() to eval this hidden field's value in order to manually trigger postback.
p.s. the btnSelectUser is an asp:button control and used to call out the javascript modal dialog.
Ok, here is the Problem:
In the same page, there is some asp:validator, e.g. and , and of coz, when the page run into error, this validator and callout will display to the user. e.g. When the user didn't fill in anything and submit the form, the ValidatorCalloutExtender will display a ballon and tell the user. Imagine one of this ballon/validatorCalloutExtender come out and on top of your screen at the moment.
Then you click the btnSelectUser (asp:button) to show the javascript modal dialog, and in the dialog, you Add some users, and once you hit the SELECT button inside this modal dialog, a MS AJAX web service is trigger as mentioned above, and once this web service is complete, it eval() the asp:hidden field's value (i.e. __doPostback(...))......and do the postback manually.
However, because of the validatorCalloutExtender ballon has display, it somehow cannot trigger the postback in this way, but when I close the ballon/validatorCalloutExtender, the manual postback using eval() is just working fine. Even more strange is that, when the ballon is displayed, the first time I click the SELECT button inside this modal dialog it doesn't fire the postback, however, if I do the same thing again (i.e. open up the javascript dialog, and choose some users, then click the SELECT button again). It able to do the manual postback....and I don't understand why the first time doesn't work.
This has really drive me crazy, hope anyone here can help, would be really appreciate. Thank you so much folks. :)
Have a nice day. Looking to heard from you all shortly.
When you call __doPostBack(eventTarget, eventArgument) a form submission is triggered:
This from post will proceed if WebForm_OnSubmit(); return true.
WebForm_OnSubmit result depends on ValidatorOnSubmit result, which in turn depends on
ValidatorCommonOnSubmit result if Page_ValidationActive == true.
Now if you are still with me, as in the function below:
function ValidatorCommonOnSubmit() {
Page_InvalidControlToBeFocused = null;
var result = !Page_BlockSubmit;
if ((typeof(window.event) != "undefined") && (window.event != null)) {
window.event.returnValue = result;
}
Page_BlockSubmit = false;
return result;
}
The result of ValidatorCommonOnSubmit depends on Page_BlockSubmit, so the only thing to block your postback is Page_BlockSubmit == true, it has nothing to do with validation callouts.
I was unable to simulate your case, but if you could post a full code sample it will help me track down the issue.