I'm working on usercontrol called 'TimePicker',
This usercontrol utilizes the jquery timepicker, and wraps it to make it simple to use in asp.net.
I'm binding the jquery timepicker to a textbox using a simple script:
$('#<%= timepicker_textbox.ClientID %>').timepicker({
onClose: function() {
__doPostBack('<%= timepicker_textbox.ClientID %>', '');
}
});
I also chose to put this textbox inside an update panel, in order to avoid full page refresh after that the user chose a time and caused a postback.
The problem is that after that updatepanel reloaded, any script in the page is not running again, and therefore the jquery timepicker is not applied to the textbox.
I managed to fix this by adding the following code:
Sys.Application.add_load(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%= timepicker_textbox.ClientID %>_onControlLoad());
});
function <%= timepicker_textbox.ClientID %>_onControlLoad()
{
$('#<%= timepicker_textbox.ClientID %>').timepicker({
onClose: function() {
__doPostBack('<%= timepicker_textbox.ClientID %>', '');
}
});
}
This causes the function to be registered and then run again on each partial postback.
The problem is that this fixed the problem only for this specific timepicker,
and not for any other elements in the same page!
This is major issue to me, since I'm having more than one timepicker inside a page,
And when choosing time on one timepicker, the others aren't working...
Any suggestions are welcome.
Thanks,
Eitan.
Using the Updatepanel in the page changes the Id of the controls and jquery document.ready event did not get called proerly,
you can read more from here-
http://www.dotnetfunda.com/articles/article471-jquery-and-aspnet-ajax-updatepanel.aspx
jquery with update panel
A simple solution is to add class="timepicker" to any text box you want the functionality on, and then use this:
$(document).ready(function(){
$('.timepicker').timepicker({
onClose: function() {
__doPostBack($(this).attr('id'), '');
}
});
});
In general, learn to get away from driving client side behavior from the server because that mentality doesn't jive with jQuery's extremely simple select/add behavior paradigm. The whole update panel / postback thing is really old school as well, but if you must use that, you'd have to register the function I showed above with Sys.WebForms.PageRequestManager.getInstance().add_endRequest like you were doing. Or just put the $(document).ready inside the update panel, that might work too.
Related
I have the following JS code:
<script type="text/javascript">
$(document).ready(function () {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
</script>
This populate a dropdownlist with the value Select, the thing is, this dropdownlist appears in a form that it's called once the user clicks a button and then a modal windows opens, with the form in it.
But since it is mark as
$(document).ready
This JS won't execute with the modal, since the document is already 'ready'. How can I achieve this?
Thanks in advance!
Regards,
You can easily achieve this using bootstrap modal events. You can use following code snippet to achieve your objective:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
});
For reference Please check bootstrap modal events.
A useful way to load and execute javascript after the page is loaded, like modal window show ups, is to use ajax getScript function, which Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request through a pre-defined function in main page.
function loadJS(lnk){
$.getScript(lnk);
}
it can be a general way to load any script in a fully loaded page.
One solution is to use jQuery event.on
from this blog post https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html
I will quote the author, because I think it's a very neat explanation.
We can’t register a listener to an element that doesn’t exists.
A work around is to register the listener to an element that will
always exist in the page context. The #modal-book is the closest
element. It is a little bit more complex what happen, but long story
short, the HTML events propagate to the parents elements until it
reaches the end of the document.
More here: https://api.jquery.com/on/
Try something like this:
$('#idofselectelement').change(function() {
//grab the selected option and then do what you want with it.
});
I'm an ASP.NET beginner. I'm having problems getting my ASP.NET web form to process the external JS file I have listed on the page. Does jQuery have limited functionality with ASP.NET when used externally?
It is processing the first click event on the checkbox, but not the submit button. I've run other tests like alert(), alert without jquery using window.document.onready. I've tried to alter the CSS on elements and manipulate the DOM with jQuery. I've had no success with those techniques either. NOTE: When I use embedded jQuery directly on the web form, everything works fine.
To whom ever responds, Thanks!!!
// THIS IS WHAT IS IN THE EXTERNAL FILE
$(function(){
$("#CheckBox1").click(function () { // FIRST FUNCTION WORKS FINE
$('#Panel1').toggle(!this.checked);
}); // end click
$("#SubmitBtn").click(function () { // CONFIRM ON CLICK IS NOT WORKING
return confirm("Are you sure you want to submit?");
}); // end click
}); // end ready
If you're in an external file, you may want to use the CSS class instead of the button ID. Button IDs are dynamic, like the other poster pointed out.
Instead of $('#SubmitBtn'), you could use $('.cssClassname')
Try class for accessing the control..
$(function(){
$("#CheckBox1").click(function () { // FIRST FUNCTION WORKS FINE
$('#Panel1').toggle(!this.checked);
}); // end click
$(".class").click(function () { // CONFIRM ON CLICK IS NOT WORKING
return confirm("Are you sure you want to submit?");
}); // end click
}); // end ready
Here class is the name of the Css Class
Are you using an ASP.NET server control for the submit button? If so, then it automatically generates an ID on the client side. If that's the case, try something like:
$('#<%= SubmitBtn.ClientID%>').click(function () {
return confirm("Are you sure you want to submit?");
});
EDIT: Just saw that this is an external file, so the above solution won't work. If you are using and ASP.NET button, you can always define a function and have it execute on the onClick event like so:
<asp:Button id="SubmitBtn" onClientClick="myFunction()" runat="server"/>
And then in the javascript file:
function myFunction() {
return confirm("Are you sure you want to submit?");
}
I recently added a feature to our ASP.NET MVC web application. There's a page that is displayed when the user clicks on an item in a table. The page uses AJAX to display a partial view in a single div in the page's HTML. The partial view uses the Telerik Kendo UI to define and display dialogs and DropDownList controls. This is complicated in that the JavaScript imports are all on the View for the page, while the PartialView just builds the HTML to be displayed in the div.
The JavaScript I wrote on the page includes a jQuery document.ready event handler:
$(document).ready(
function () {
if ( $('#details-map').val() != '' )
$('#details-map').remove();
var urlTail = '?t=' + (new Date().getTime());
// Make the AJAX call and load the result into the details box.
$('#detailsbox').load('<%= Url.Action("Details") %>' + '/' + '<%: Model.Id %>' + urlTail, displayDetails);
}
)
This works fine when I run the application on my localhost. The problem appears when I deploy the page to our development server. In this case, there's an additional document.ready event handler that's emitted to very end of the page by the Telerik Kendo / ASP.net MVC extensions:
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if(!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo=...;
});
//]]>
</script>
On this page, the $(document).ready event handler I wrote runs before the Telerik handler, and my code clearly depends on the Telerik handler running first. When mine runs first, I get a JavaScript error that says "jQuery.telerik.load is not a function'.
Since this does not happen on my localhost, how do I make sure that the second document ready event handler is run first?
Edit:
After more research, I've found that the problem is that the two scripts mentioned in my answer, which are supposed to be written to the page via the following line in the Master Page used by my page:
<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(false).Compress(false)) %>
Are not being loaded. In other words, the above line does nothing. It works on another page that uses the same Master Page, though. I've placed a breakpoint on the line and it is executing. Does anyone have any ideas?
You're either going to have to make it show up after the second one on the page OR do something I hate to suggest:
$(document).ready(function() {
function init {
/* all your code that needs to be run after telerik is loaded */
}
if ( $.telerik ) {
init();
} else {
setTimeout(function check4telerik() {
if ( $.telerik ) {
return init();
}
setTimeout(check4telerik, 0);
}, 0);
}
});
So, if $.telerik is loaded, it runs, otherwise it polls until it's set, and when it is set, it runs the code. It's not pretty, but if you don't have more control, it's probably your only option, unless $.telerik emits some kind of event that you can hook into.
After spending a few hours working on this, I finally got it to work. The problem turned out to be that two JavaScript files that are used by the Telerik DropdownList control and Window control were not being loaded.
In spelunking through the JavaScript on the page, I came across this script that was generated by Telerik:
if(!jQuery.telerik){
jQuery.ajax({
url:"/Scripts/2011.3.1306/telerik.common.min.js",
dataType:"script",
cache:false,
success:function(){
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}});}else{
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}
This script was emitted by a call to Html.Telerik.DropdownListFor() in my partial view. I'm guessing that the code to include for the two JavaScript files mentioned in the code, telerik.common.min.js and telerik.list.min.js, was not emitted since the call was on a partial view. Or I was supposed to include them all along & didn't know it (I'm very new to these controls). Oddly, everything worked when I ran it locally, so I don't get it.
In any case, I added two <script> tags to my View to include these files and everything started working. That is, I added the following tags to my page:
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.common.min.js"></script>
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.list.min.js"></script>
Live and learn.
My problem is that, I want to call a code behind function from a JS. So that I can implement TextBox on Click event. I am NEW in JS so bear with me on this one...What I heard is that from the client side scripting you cannot call anything to the server (code behind). Here is my code:
<script type="text/javascript">
function callCodeBehind() {
<% txtAgentName_TextChanged(); %>
}
</script>
This is my Textbox:
<asp:TextBox ID="txtAgentName" runat="server" Onclick = "callCodeBehind()"></asp:TextBox>
This is my code behind:
protected void txtAgentName_TextChanged()
{
}
This function is getting fired on Page_Load(), which I don't want it to.
All I want is that to call this function txtAgentName_TextChanged() when user clicks on txtAgentName textbox.
Help!
For simplicity, you can use page methods. Check below articles for exact instructions.
Using Page Methods in ASP.NET AJAX
Using jQuery to directly call ASP.NET AJAX page methods
I think what you are looking for is AJAX. Check out the sample in the link.
You CAN call code behind from server using AJAX and jQuery library, just google it. e.g.
http://blogs.sitepoint.com/ajax-jquery/
A second issue is that the btn.click() will not work cross-browser.
you can insert a code behind method like this:
<% method(); &>
I have a menu which contains a delete button to delete items from it. I put all inside an updatepanel to make partial postbacks. The problem is after i made the post back the jquery jdmenu pluggin stops work. I suppose i should include something like this
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InitializeJdMenuAgain);
function InitializeJdMenuAgain(sender, args) {
//do something here which i am not sure
}
but i am not sure what should i put in InitializeJdMenuAgain because no script is needed when using this pluggin. I was inspecting the code for pluging but i don't have too much abilities which Javascript, what i need to do?
thanks in advance.
You should reattach the menu to the DOM element that was updated by the UpdatePanel:
function InitializeJdMenuAgain(sender, args) {
$('ul.jd_menu').jdMenu();
}