I have a content page that have 4 different tabs. I use following jQuery to control the tabs. I need to set the default button for each tab, so that when the user clicks Enter, the event of the default button will be fired.
The keypress should do the work. But somehow, when I click Enter, the page is reloaded, not being submitted.
How can I change my code to have the page determine which button is the default button, depending on what user control or tab is active?
$(document).ready(function() {
var selected_tab = document.getElementById("<%=hfSelectedTab.ClientID %>");
//When page loads...
$(".tab_content").hide(); //Hide all content
if (selected_tab.value == 2) {
$("ul.tabs li:nth-child(2)").addClass("active").show();
$(".tab_content:nth-child(2)").show();
}
else if (selected_tab.value == 3) {
$("ul.tabs li:nth-child(3)").addClass("active").show();
$(".tab_content:nth-child(3)").show();
}
else if (selected_tab.value == 4) {
$("ul.tabs li:nth-child(4)").addClass("active").show();
$(".tab_content:nth-child(4)").show();
}
else {
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
}
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
if (activeTab == "#tab1")
selected_tab.value = 1;
else if (activeTab == "#tab2")
selected_tab.value = 2;
else if (activeTab == "#attachmentcontent")
selected_tab.value = 3;
else if (activeTab == "#kb") {
selected_tab.value = 4;
document.getElementById("<%=txtRootCause.ClientID %>").focus();
}
return false;
});
$("form input").keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit] .default').click();
return true;
}
});
});
My solution is to wrap each tab (defined by div) in an asp:Panel and set the Panel DefaultButton property.
Related
In my site am doing popup div with colorbox (in master page).my req is i want to popup this color box only once and that to after login only.
Hi , In my site am doing popup div with colorbox (in master page). its working fine. but i want to pop up this colorbox div after successfull login. this is also done. but my req is i want to popup this color box only once and that to after login only. so could u give any suggestion to find the page is loading firsttime or second time. not using (!ispostback concept in page load)
$(document).ready(function () {
var hfClose = $('#hfCloseColorbox').val();
var page = $(location).attr('pathname'); // index.php
if (page == '/Default.aspx') {
if (hfClose == '2') {
$.colorbox({ width: "32%", inline: true, href: "#DisplayChat" });
}
}
});
if (!IsPostBack)
{
if (hfCloseColorbox.Value == "")
hfCloseColorbox.Value = "2";
else if (ViewState["count"] == null)
hfCloseColorbox.Value = Convert.ToString(int.Parse(hfCloseColorbox.Value) + 1);
else if (ViewState["count"].ToString() == "1")
hfCloseColorbox.Value = Convert.ToString(int.Parse(ViewState["count"].ToString()) + 1);
hfCloseColorbox.Value = Convert.ToString(int.Parse(hfCloseColorbox.Value) + 1);
}
else
{
if (ViewState["count"] == null)
hfCloseColorbox.Value = Convert.ToString(int.Parse(hfCloseColorbox.Value) + 1);
else if (ViewState["count"].ToString() == "1")
hfCloseColorbox.Value = Convert.ToString(int.Parse(ViewState["count"].ToString()) + 1);
}
You can create own special variable within ViewState to determine if page is loaded for the first time (after login).
if (ViewState["Foo"] != null && ViewState["Foo"] == "True")
{
// Code for Pop-Up display
}
Only place that will assign value for ViewState["Foo"] is code after successful login.
I have a group of links that I call fancybox on with the arrows enabled so that the user can click next and prev. Each link is decorated with the iframe class and href='/editdata.aspx'. I would to remove the arrows and pass in the current index so that the editdata.aspx save button can say "save and next" until it reaches the last link, which will then say "save and close".
From editdata.aspx I use
var numLinks = $(".link-items", parent.document.body).children("a.iframe").size();
This gives me the total number of links. I just need to know the current link that is being displayed to the user so that I can update the save button text.
Here is a sample of my code in editdata.aspx:
// change the save button to save and next if fancybox is loading multiple links
if (parent.$.fancybox) {
var links = $(".links", parent.document.body);
if (links && links.length > 0) {
var numlinks = $(links).children("a.popup").size();
var index = getParameterByName('index');
if (index == numlinks ) {
// this element is the last item to display so change the "save and next" to "save and close"
$("#btnSave").val("Save & Close");
$("#btnSave").click(function () {
parent.$.fancybox.close();
});
}
else {
$("#btnSave").val("Save & Next");
$("#btnSave").click(function () {
parent.$.fancybox.next();
});
}
}
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
How can I achieve this?
Thats easy for v2 -
jQuery(".fancybox").fancybox({
beforeLoad : function() {
this.href = this.href + '?index=' + this.index;
}
});
I wanna get client side event for Row double click in Infragistics ultragrid control.
A server side event handler "OnDblClick" is available, but I hope there is some way in client side also.
Thanks for any help.
This is our working code for CellClickEvents:
<igtbl:UltraWebGrid ID="ultGridScenario">
<DisplayLayout>
<ClientSideEvents DblClickHandler="ultGridScenario_CellDblClick" CellClickHandler="ultGridScenario_CellClickHandler"></ClientSideEvents >
</DisplayLayout>
</igtbl:UltraWebGrid>
added the dblclick handler attribute and value as an example.
function ultGridScenario_CellClickHandler(gridName, CellID, button) {
if (button == 0) {
var grid = igtbl_getGridById(ultGridScenario.ClientID);
var row = igtbl_getRowById(CellID);
var rowID = row.Id;
var rowIndex = rowID.substr(rowID.lastIndexOf("_") + 1, rowID.length - rowID.lastIndexOf("_"));
var cellIndex = CellID.substr(CellID.lastIndexOf("_") + 1, CellID.length - CellID.lastIndexOf("_"));
if (cellIndex == 0) {
return false;
}
else {
if (rowIndex == 7) {
ShowScenarioComments(gridName, cellIndex);
}
else {
return false;
}
}
}
}
Also when I ask VS2010 for intelli-sense for the ClientSideEvents Tag, I get a long list of events.
Using Infragistics4 10.2.20102.1011
Some additional Reference:
http://blogs.infragistics.com/forums/p/43398/238276.aspx
I have four controls in a page with update panel. Initially mouse focus is set to first control. When I partially post back the page to server the focus automatically moves to first control from the last focused control from the control I have tabbed down to. Is there any way to maintain the last focus?
Take a look at Restoring Lost Focus in the Update Panel with Auto Post-Back Controls:
The basic idea behind the solution is to save the ID of the control
with input focus before the update panel is updated and set input
focus back to that control after the update panel is updated.
I come with the following JavaScript which restores the lost focus in
the update panel.
var lastFocusedControlId = "";
function focusHandler(e) {
document.activeElement = e.originalTarget;
}
function appInit() {
if (typeof(window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof(document.activeElement) === "undefined"
? "" : document.activeElement.id;
}
function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof(focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}
function pageLoadedHandler(sender, args) {
if (typeof(lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
I find this more elegant:
(function(){
var focusElement;
function restoreFocus(){
if(focusElement){
if(focusElement.id){
$('#'+focusElement.id).focus();
} else {
$(focusElement).focus();
}
}
}
$(document).ready(function () {
$(document).on('focusin', function(objectData){
focusElement = objectData.currentTarget.activeElement;
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(restoreFocus);
});
})();
The .Net generated code for a form with the "DefaultButton" attribute set contains poor javascript that allows the functionality to work in IE but not in other browsers (Firefox specifcially).
Hitting enter key does submit the form with all browsers but Firefox cannot disregard the key press when it happens inside of a <textarea> control. The result is a multiline text area control that cannot be multiline in Firefox as the enter key submits the form instead of creating a new line.
For more information on the bug, read it here.
This could be fixed in Asp.Net 3.0+ but a workaround still has to be created for 2.0.
Any ideas for the lightest workaround (a hack that doesn't look like a hack =D)? The solution in the above link scares me a little as it could easily have unintended side-effects.
I use this function adapted from codesta. [Edit: the very same one, I see, that scares you! Oops. Can't help you then.]
http://blog.codesta.com/codesta_weblog/2007/12/net-gotchas---p.html.
You use it by surrounding your code with a div like so. You could subclass the Form to include this automatically. I don't use it that much, so I didn't.
<div onkeypress="return FireDefaultButton(event, '<%= aspButtonID.ClientID %>')">
(your form goes here)
</div>
Here's the function.
function FireDefaultButton(event, target)
{
// srcElement is for IE
var element = event.target || event.srcElement;
if (13 == event.keyCode && !(element && "textarea" == element.tagName.toLowerCase()))
{
var defaultButton;
defaultButton = document.getElementById(target);
if (defaultButton && "undefined" != typeof defaultButton.click)
{
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation)
event.stopPropagation();
return false;
}
}
return true;
}
It seems that the fix codesta.com that harpo link to is no longer necessary, since the fix event.srcElement is not integrade in ASP.NET 3.5. The implementation of DefaultButton does however still have some problems, because it is catching the Enter key press in too many cases. For example: If you have activated a button in the form using tab, pressing Enter should click on the button and not submit the form.
Include the following JavaScript code at the bottom of your ASP.NET web page to make Enter behave the way it should.
// Fixes ASP.NET's behavior of default button by testing for more controls
// than just textarea where the event should not be caugt by the DefaultButton
// action. This method has to override ASP.NET's WebForm_FireDefaultButton, so
// it has to included at the bottom of the page.
function WebForm_FireDefaultButton(event, target) {
if (event.keyCode == 13) {
var src = event.srcElement || event.target;
if (!(
src
&&
(
src.tagName.toLowerCase() == "textarea"
|| src.tagName.toLowerCase() == "a"
||
(
src.tagName.toLowerCase() == "input"
&&
(
src.getAttribute("type").toLowerCase() == "submit"
|| src.getAttribute("type").toLowerCase() == "button"
|| src.getAttribute("type").toLowerCase() == "reset"
)
)
|| src.tagName.toLowerCase() == "option"
|| src.tagName.toLowerCase() == "select"
)
)) {
var defaultButton;
if (__nonMSDOMBrowser) {
defaultButton = document.getElementById(target);
}
else {
defaultButton = document.all[target];
}
if (defaultButton && typeof (defaultButton.click) != "undefined") {
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
}
return true;
}
For this particular issue, the reason is because javascript generated by
ASP.NET 2.0 has some IE only notation: event.srcElement is not availabe in
FireFox (use event.target instead):
function WebForm_FireDefaultButton(event, target) {
if (!__defaultFired && event.keyCode == 13 && !(event.srcElement &&
(event.srcElement.tagName.toLowerCase() == "textarea"))) {
var defaultButton;
if (__nonMSDOMBrowser) {
defaultButton = document.getElementById(target);
}
else {
defaultButton = document.all[target];
}
if (defaultButton && typeof(defaultButton.click) !=
"undefined") {
__defaultFired = true;
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
return true;
}
If we change the first 2 lines into:
function WebForm_FireDefaultButton(event, target) {
var element = event.target || event.srcElement;
if (!__defaultFired && event.keyCode == 13 && !(element &&
(element.tagName.toLowerCase() == "textarea"))) {
Put the changed code in a file and then do
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterClientScriptInclude("js1", "JScript.js");
}
Then it will work for both IE and FireFox.
Source:
http://www.velocityreviews.com/forums/t367383-formdefaultbutton-behaves-incorrectly.html