I have textbox named 'txtExploitDate' in update panel. And on button click I have set default value for textbox as yesterday's date. I have written below jquery code to bind datepicker with textbox. But when I select date from datepicker it is refleting date in textbox just for second and again changing to default date.
<script type="text/javascript">
//$(document).ready(function DatePickerExploitDate() {
// $(function () {
// $("#txtExploitDate").datepicker();
// });
//});
$(document).ready(function () {
ApplyDatePicker();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyDatePicker);
});
function ApplyDatePicker() {
$('#txtExploitDate').datepicker();
}
</script>
Please ignore the commented code as I was using it earlier when my textbox was not in update panel but there was postback issue that time so I put my textbox in update panel and changed my jquery code.
Please Help me with this.
That is because JQuery datepicker uses unique IDs for all controls that use the plugin. This is something done by most JQuery plugins to control events. When the update panel refreshes those special unique IDs don't point anywhere anymore.
Check the explanation and solution in this article from asp snippets: https://www.aspsnippets.com/Articles/jQuery-DatePicker-not-working-inside-ASPNet-AJAX-UpdatePanel-Partial-PostBack.aspx
Resolution is made possible by having the plugin rerun when update panel refreshes.
As a personal point of view I believe you should try to see a solution without update panel as it is a very cumbersome technology, is to break when you start to mess with the DOM and there is better ways to use AJAX calls, even with JQuery.
Related
I am fairly new to ASP, FYI. The textbox in question is for phone numbers, and I am using an Ajax MaskedEditExtender to create an input mask in the form "()-___".
What is the issue now
The input mask works fine, but when the user clicks into the box, the cursor just sits at whatever position they clicked at, in the middle of the input mask or wherever.
What I need
I need the cursor to be automatically positioned at the beginning (first character) of the textbox when the user clicks into it. I am very familiar with how to do this in VBA using a GotFocus event. But there doesn't seem to be an event to handle this in ASP. Is there JavaScript or some kind of setting I am missing? I have searched but haven't been able to find anything to address this exactly.
I have included a link to a picture of what I am talking about, gotta earn some rep before I can embed...Thanks in advance!
You can set focus to your first textbox with JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myFirstTextBox = $("#MyFirstTextBoxIdHere");
$("myFirstTextBox ").focus();
});
</script>
This will autofocus on page load to your first textbox.
Try this out
<asp:TextBox runat="server" ID="txtMyBox" onFocus="setCursorToStart(this)"></asp:TextBox>
function setCursorToStart(x) {
setTimeout(function() {
x.setSelectionRange(0, 0);
}, 0);
}
I have a GridView that displays a small amount of information about multiple users. In this GridView, I have a button that will display all of the information about the selected user inside a DetailsView below the GridView. The problem is, if I don't search for a specific user, I get a list of over 200 people and the GridView is extremely long. This makes the end-user have to scroll to the bottom of the page, which is very annoying. I have been reading about a ScrollIntoView function but I don't think that it is related to a DetailsView. I also read that I can use JavaScript to potentially get the results that I am looking for. I am not sure what the best approach is for this, but any help would be very much appreciated. I have an empty SelectedIndexChanged method that was generated by Visual Studio when I double clicked on the button. If I do end up going with the JavaScript route, where would I insert the code for this? Would it go in the aspx.cs page or just the aspx page?
If all the clicks of the GridView point to the same place on the page, you could do something like this.
<script type="text/javascript">
$('#<%= GridView1.ClientID %>').click(function () {
$('html, body').animate({
scrollTop: $("#targetID").offset().top
}, "medium");
});
</script>
If you load the DetailsView with a PostBack, ypu can do this. Add a scriptmanager to the code behind.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ScrollToElement", "ScrollToElement('targetID')", true);
And then the matching JavaScript function.
<script type="text/javascript">
function ScrollToElement(id) {
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, "medium");
}
</script>
I was able to create a work around to get this working properly. I created a new button that the user can press that will scroll to the top of the DetailsView. It was quite simple, but it will work for what we do. I created an empty span tag above the DetailsView and used <input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" /> for the button.
I have jquery tabs on my page, each tab has a single iframe in it. Everything works, except...
The iframes refresh each time I switch tabs.
The source for the Iframes is set in the Page_Load and is only executed once. The jquery does not do anything except change the tab...no other code.
Is there a way to not refresh the iframe each time?
This is why I never want to ask anything on this site...I know it's gonna be something simple, but for anyone that may be helped in the future from my pain...
In the code for the jquery tabs to select or hide tabs, I had a call to a button click event that was used to keep track of the current state of the tabs. This is what caused the postback and why my iframes were getting reinstantiated.
$(function () {
$("#tabs").tabs({
select: function (event, ui) {
var sel = ui.index;
$("[id*=SelectedTab]").val(sel);
$("[id*=ChangeTabButton]").click();
},
selected: $("[id*=SelectedTab]").val()
});
});
Thanks Kevin and Vishal...
How can I update a textbox or label (specfically an asp.net control) text property from the code in the silverlight control?
Suggested solution:
I suppose that you could try to do it in two steps:
write a javascript function that updates a control based on a given parameter, let's name it updateControl:
<script type="text/javascript">
function updateControl(newValue)
{
//update your control here with newValue parameter with javascript
...
}
</script>
in your Silverlight application (in the place you want to invoke the control value change) you should write:
HtmlPage.Window.Invoke("updateControl", "this is a new value")
Another solution for page update only:
If you just need to refresh the page to get the value from other place, you can write in your Silverlight code:
HtmlPage.Document.Submit()
In the postback, you could get this data and show it in the control.
References and useful resources:
ScriptObject.Invoke Method : http://msdn.microsoft.com/en-us/library/system.windows.browser.scriptobject.invoke%28v=vs.95%29.aspx
Walkthrough: Calling JavaScript from Managed Code: http://msdn.microsoft.com/en-us/library/cc221359%28v=vs.95%29.aspx
Silverlight and JavaScript interop basics: http://pietschsoft.com/post/2008/06/Silverlight-and-JavaScript-Interop-Basics.aspx
How to set the value of a form element using Javascript: http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
You can do it calling javascript function from silverligt.
Shortly it looks like this:
HtmlPage.Window.Invoke("globalJSMethod", stringParam);
Note that javascript method must be accessable from window - window.globalJSMethod(...)
Check this walkthrough to see in details how to do this.
Using ajax I am causing an OnTextChangedEvent before this happens there is some Javascript that performs a check on the input field for validation and outputs some text based on whether it is valid or not. The Ajax I run resets the changes made by my javascript. It all happens in this order:
Javascript fires!
Text changes show
Ajax fires!
Text changes reset
The ajax partial autopostback is contained in an update panel. Without giving any code away is there anyone who has an idea of a way to stop the javascript changes resetting?
Over the day I will add code as I find time. Thought I would get the question up atleast. Thanks in advanced.
The Text changes are made in the DOM-Model and are not transmitted to the server.
If the ajax fires it will override the changes in the DOM made by javascript.
Solution is to transmit the validation-texts to the server and to add them again via ajax.
An UpdatePanel completely replaces the contents of the update panel on
an update.
This means that those events you subscribed to are no
longer subscribed because there are new elements in that update panel.
Full answer here
In your Page or MasterPage, put the following script
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
Validate(); //method that performs check on input field
}
</script>