I have a grid that includes a checkbox control with Autopostback=yes and CheckChanged calling a routine in the vb.net code that updates the record with the checkbox value. When a checkbox is clicked it takes a second or two to run the code and return control back to the web page. I have some users that are clicking several checkboxes one after another so the program is not being called correctly and they are getting a hodgepodge of updated records. For now my solution is for them to wait until the page refreshes before they click the next one. Pretty lamo. Does anyone have any suggestions to work around this problem?
Thanks!
You could write a little jQuery function to temporarily hide your checkbox immediately after it has been checked.
Maybe extend the code below slightly to display a <div id="loading">Loading...</div> or loading .gif image to the user so that they know that your page is being processed and don't get frustrated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#" + "<%: CheckBox1.ClientID %>").change(function () {
if (this.checked) {
$(this).hide()
}
});
});
</script>
Thanks so much Dennis! Your solution finally got me learning jQuery (which I have wanted to do for some time) and helped me get it to work like I wanted.
When the grid loads all the check boxes show with their values. When one is clicked the jquery below runs and hides them all. I have an OnCheckedChanged event on the asp checkbox control that calls the program and updates the clicked record, and when the grid loads again all the check boxes show with their correct values. Totally cool!
<script src="../Scripts/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("input:checkbox").click(function () {
$("input:checkbox").hide();
});
});
</script>
Related
I am trying to use TinyMCE editor with my text area in an update panel. On the first page load it works fine, but as soon as the update panel updates the text area lost its formatting and become a simple text area than a rich text editor.
I have tried some solutions but it did not worked. Any help will be highly appreciated.
Best Regards,
You need to initialize your tinyMce again after each partial postback. You can do this by using:
$(document).ready(function () {
BindEvents();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindEvents();
});
});
And on your BindEvents() function place your code for initilize tinyMce or any other events you want to keep alive after the postback.
function BindEvents() {
//bind your jquery events and TinyMce initialization
}
I'm looking for alternative ways of solving a problem. We're using ElFinder for browsing files, and we want to allow the user to change the access rights to a file element through the right-click context menu ("Change permissions"). The solution I have come up with so far is to load a server side ASP.NET usercontrol in a jQuery modal dialog window. This user control will contain the logic needed to add / remove user access to the selected element.
The jQuery Dialog script looks like this (slightly changed for readability), where DisplayItemAccessConfig() is the method that's called from the context menu:
<!-- access control script -->
<script type="text/javascript" charset="utf-8">
function DisplayItemAccessConfig() {
$.getJSON('AccessRights.ashx', function (data) {
var itemName = data["itemName"];
/* set new title (JUST FOR TESTING) */
$(dialog).dialog('option', 'title', itemName);
/* open modal dialog --> */
$(dialog).dialog('open');
});
}
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script>
Challenge 1: find a way to reload the user control each time the jQuery popup is displayed - this is to retrieve the current access settings for the selected element. Now it loads when the page is first loaded, since it's just a div element containing an update panel with a placeholder for my usercontrol and visibility set to none. Anyone have any tips here?
Challenge 2: While I am trying to figure that one out I thought it could be worth while asking for other opinions. Is there a better way of solving this? Should I use a pure jQuery with HTML and call server side .ashx methods to retrieve data, instead of an ASP.NET usercontrol?
You can do this by creating a hidden button on inside the uploadpanel and then trigger it like this:
__doPostBack('<%= Button.ClientID %>','');
Personally I would drop the UpdatePanel and go for jQuery AJAX calls to update the content of the dialog window, but this depends on the complexity of your user control. Hard to say without seeing more of your code.
I have a compare validator on a Password field compared it to a password repeat field. If there is a validation error the error doesn't disappear until the lost focus event is fired. The client wants this changed to be the key up event.
What is the best way of going about this?
It is doable as below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function () {
$('#TextBox1').keyup(function () {
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
}
});
});
</script>
Edited: Changed mouseup to keyup.
It does not seem like there is likely to even be a mouse click in this case. After the field is filled out the user would either tab or click to the next box..in either case the previous box would lose focus and fire the validator...unless i am missing something.
Other than that i'd say javascript is your answer.
I have an asp.net page with some JQuery tabs. Everything works ok.
I added a dropdownlist in one of the tabs, that causes a postback. After the postback I want the same tab to be selected.
I initialize the tabs as:
<script type="text/javascript">
$(document).ready(function() {
var $myTabs = $(".tabsDiv").tabs();
</script>
Then, on the PageLoad event, I inject a script to select the tab:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", "$myTabs.tabs('select', 1);", true);
For some reason this doesn't work. The script is running but the tabs are not selected.
Is it because the RegisterClientScriptBlock places the script in the bottom of the page and, for some reason, it runs too late?
Any help is appreciated.
Thx in advance
Calling $myTabs.tabs('select', 1); I think results in an error. $myTabs is not a global variable. It's scope is only in $(document).ready(function() { ... });
Can you try with $(".tabsDiv").tabs('select', 1); and see if it works?
Regards...
It might run too early... bottom of the page is good, try this instead:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect",
"$(document).ready(function() { $myTabs.tabs('select', 1); });", true);
Basically, it also runs this code at the ready event.
I have this code in some of my ASCX files:
<%=Html.ActionLink(Resources.Localize.Routes_WidgetsEdit, "Edit", "Widget",
new { contentType = Model.ContentType, widgetSlug = Model.Slug, modal=true},
new
{
rel = "shadowbox;height=600;width=700",
title = Resources.Localize.Routes_WidgetsEdit,
#class = "editWidget"
})%>
Take note of that rel="shadowbox..." there. This is to wire up ShadowBox Lightbox clone for this ActionLink.
This works fine when user requests a page containing this User Control thru normal browser request. But I also render/build those View User controls trough AJAX requests. For instance, I would make request to /Widget/RenderToString/... using jQuery .ajax() method and it would return HTML code for that control. This works fine and it renders the code fine. I would then insert (append) the result to a DIV in a page from where the AJAX request was made. This also works fine and the returned HTML gets appended. The only problem is - ShadowBox is not wired up. Even though the code for it gets rendered.
It seems it requires page reload (F5) every time to wire ShadowBox up. Since I am doing AJAX GET and instant append to get rid of having to make a server roundtrip, I would also want ShadowBox to wire up without doing refresh.
Can someone help me with that? Thank you
UPDATE:
Yes, I have this in my Site.Master head:
<script src="<%=Url.Content("~/Scripts/shadowbox-build-3.0rc1/shadowbox.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// insert functions calls here that provide some default behaviour
externalLinks();
});
Shadowbox.init({
language: "en",
players: ["img", "html", "iframe"],
onClose: function() { location.reload(true) }
});
</script>
How do I init the Shadowbox again after AJAX call?
There are many shadowbox plugins... which one are you using? (I can't give you exact code without it.) In any case I imagine you have something in your $(document).ready(function () { ... }); that tells shadowbox plungin to bind itself. You need to call that again after the AJAX call.
Just found the solution here
// call this after adding the new HTML to the page
// set up all anchor elements with a "editWidget" class to work with Shadowbox
Shadowbox.setup("a.editWidget", {});