<s:if test="%{tool == 'leveraged'}">
<s:radio
id="extra_ID_EXERCISE_RIGHT"
name="form.ID_EXERCISE_RIGHT"
list="#{'' : ' All','2':' (alfa, beta, gama)','1':' (www, abc, def)'}"
onchange="fetchResultCountWithDelay();"/>
AND
function fetchResultCountWithDelay() {
if (delayTimer) {
window.clearTimeout(delayTimer);
}
delayTimer = window.setTimeout("fetchResultCount()", 1300);
}
In IE8, clicking on another radio button does not refresh the results.
This happens ONLY when the page is first started.
After the second click the results are refreshed.
After the first click on the radio button the results are not refreshed.
The problem is that by the first two radio buttons clicks, the fetchResultCountWithDelay() method is not executed.
Can somebody help?
Thank you !
Related
I have an inherited MVC5 web application using Razor that when the page loads, there are two drop downs displayed, some data, and five buttons, one of which is disabled (Save). When I select a different option from the first drop down, what is supposed to happen an input field with a date picker is to display, along with an "OK" button, and the "Save" button is supposed to be enabled. This works fine in IE 11, but in Microsoft Edge, a message appears asking "Leave site? Changes you made may not be saved." If I click the "Leave" button, the spinner appears and I stay on the page.
In IE 11, when any other option is selected from the first dropdown, the spinner appears, the page reloads with the input field with date picker, but OK button appears, and the Save button is enabled. The only time a similar message displays is when the back button is clicked.
I went through the code and found the following:
The code for the first drop down:
#Html.DropDownListFor(m => m.StatusId, new SelectList(Model.StatusList, "Value", "Text", Model.StatusId), new { #class = "form-control", #id = "StatusList"})
I also found a submit button that has been hidden:
#Html.HiddenFor(m => m.CurrentTypeName, htmlAttributes: new { id = "CurrentTypeName" })
<input id="FinalizeValidationButton" type="submit" name="action:FinalizeValidation" style="visibility:hidden" />
In a javascript file I found the following:
//This is the first dropdown mentioned above
$('#StatusList').change(
function () {
triggerFinalizeValidation();
setVisibility();
});
var triggerFinalizeValidation = function () {
var selectedStatus = $('#StatusList').val();
$("#CurrentSignificantActivityTypeName").val($("div.active").prop("id"));
if (selectedStatus != 1) {
navParams.userAction = true;
$('#finalizeButton').prop('disabled', true);
navParams.isDirty = false;
$('#FinalizeValidationButton').trigger('click');
}};
So what's happening is, the user selects a different option from the first dropdown (StatusList), which triggers $('#StatusList').change, which in turn calls triggerFinalizeValidation(), which in turn adds a click event to the hidden submit button ("FinalizeValidationButton"). For whatever reason, it's like it triggers a postback like response, which causes Microsoft Edge to think the user is trying to leave the current page, when they are not.
The hidden button, when clicked, executes the following code in the RiskController.ca. There are a number of dropdowns, fields, etc on the screen other than the fields/buttons that have already been mentioned. So the this part of the code validates what the user has selected and peforms calculations based on what was selected. When I comment out the click event in the JavaScript, the browser message doesn't display, but then the FinalizeValidation method doesn't execute either.
[AcceptVerbs(HttpVerbs.Post)]
[MultiButtonAction(Name = "action", Argument = "FinalizeValidation")]
public ActionResult FinalizeValidation(RiskViewModel viewModel)
{
string currentActivityTypeName = viewModel.CurrentActivityTypeName;
var risk = _riskRepository.FindFull(viewModel.Id);
I'm wondering if there is a way to use #onchange in the dropdown to somehow call the FinalizeValidation method in the controller to see if that resolves the browser message from appearing...Thoughts?
I ended up using
$(window).off('beforeunload');
After
$('#FinalizeValidationButton').trigger('click');
Which resolved the issue.
I am trying to create a simple confirmation ("Do you want to close this window?") when closing a modal dialog page with the (X)-button.
What would be the most efficient way to implement this in Apex 5.0?
I tried to implement a solution using the dialog closed event, this seemed to have had no effects on closing the dialog with the (X)-button, however.
Try to create a dynamic action, on page load, in your modal page with that code:
Your da should execute a javascript code:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.unbind(); //remove the behavior
//put another behavior to the button
button.on('click', function() {
apex.message.confirm( "Your message here", function( okPressed ) {
if( okPressed ) {
apex.navigation.dialog.cancel(true);
}
});
});
Try to confirm if the "X" button have the css class "ui-dialog-titlebar-close", they can change between versions of apex.
If necessary, update the first line of the code with the correct class.
Have you considered hiding the button (x) and canceling the modal dialog page by clicking on the "cancel" button?
If you want to rename the standard button names in the confirmation window, use:
apex.lang.addMessages({"APEX.DIALOG.OK": pOkLabel});
apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.
I have a form in an ASP.Net MVC project on which I am using qTip2 to display validation erros. On that form, I also have text fields that are activated/deacivated depending on choices made with radio buttons. When fields are not to be used, I set their disabled="disabled" properties. This ensures that client side validation (jQuery unobtrusive validation) for these fields is also deactivated. Now, I am wondering how to reset the qTip2 "bubbles" for fields that get disabled.
Let's say I have radio buttons 1 and 2 that enable text boxes A and B respectively. Let's also say that radio button 1 is selected by default, and that text boxes A and B are required fields when the corresponding radio button is selected. If I press on the Submit button without filling any text field, a qTip error bubble appears beside text box A. Now, if I press on radio button 2, I have to clear that bubble, disable text box A and its validation, and enable text box B and its validation. However, if I press submit at this point without filling text box B, no error bubble appears and the form is not getting submitted.
I tried various combinations of the following commands to accomplish this, but then the validation errors get completely disabled:
$('.qtip').remove();
$('.qtip').hide();
$("input.input-validation-error").removeClass("input-validation-error"); // watch out for the error message labels or they won't go away
$('form').data('validator').resetForm();
$("form").validate().form();
No matter what combinations of these commands I execute after a radio button got clicked and the proper text-boxes disabled/enabled, the qTip bubbles disappear, but they never reappear even if I click on the Submit button and other errors should appear on the form.
I am probably not using the right commands to reset qTip validation bubbles.
Ok, I found a solution right after posting the question. I used the solution proposed on this page http://johnculviner.com/?tag=/unobtrusive-validation-reset that I modified a bit. I added the following line: $form.find('input').qtip('destroy');
It gives this:
//Taken from: http://johnculviner.com/?tag=/unobtrusive-validation-reset
(function ($) {
$.fn.resetValidation = function () {
var $form = this.closest('form');
//Destroy qTip error bubbles (http://craigsworks.com/projects/forums/thread-using-qtip-with-jquery-validation-framework)
//$form.find('input:not(.errormessage)').qtip('destroy');
$form.find('input').qtip('destroy');
//reset jQuery Validate's internals
$form.validate().resetForm();
//reset unobtrusive validation summary, if it exists
$form.find("[data-valmsg-summary=true]")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid")
.find("ul").empty();
//reset unobtrusive field level, if it exists
$form.find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
return $form;
};
//reset a form given a jQuery selected form or a child
//by default validation is also reset
$.fn.formReset = function (resetValidation) {
var $form = this.closest('form');
$form[0].reset();
if (resetValidation == undefined || resetValidation) {
$form.resetValidation();
}
return $form;
}
})(jQuery);
Then when a radio button is clicked, I call $("form").resetValidation(); after the proper fields have been enabled/disabled.
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.