Databases
StackOverflow2013
Postsdbo
POHow to prevent a jquery Ajax call from scrolling a form with an input to the top of browser window
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to prevent a jquery Ajax call from scrolling a form with an input to the top of browser window
    primarykey
    data
    text
    <p>First, I'm not totally sure what is causing this behavior. JQuery, Ajax, default browser behavior (happens in IE, FF &amp; Chrome). </p> <p>But, I have a tab control with 5 tabs on a web page. Each tab is loaded via a jquery ajax call. Four of the tabs load without any issue. The fifth tab, the only one that contains a textbox input control scrolls the page so that the tab contents are at the top of the browser window.</p> <p>I would like to stop this behavior if possible, or if I can't identify the cause, how would I use jquery to scroll the browser window back to the top?</p> <pre><code>Code (based on an example from EricDotNet at http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/): &lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %&gt; &lt;div id="tabs"&gt; &lt;ul id="tabMenu"&gt; &lt;li id="tabLi-1" class="tabLi" style="background-color:#fff"&gt;&lt;a id="tabA-1" href="#tabs-1" style="color:#004980" onclick="getContentTab(1);"&gt;Jobs&lt;/a&gt;&lt;/li&gt; &lt;li id="tabLi-2" class="tabLi"&gt;&lt;a id="tabA-2" href="#tabs-2" onclick="getContentTab(2);"&gt;Tab 2&lt;/a&gt;&lt;/li&gt; &lt;li id="tabLi-3" class="tabLi"&gt;&lt;a id="tabA-3" href="#tabs-3" onclick="getContentTab(3);"&gt;Tab 3&lt;/a&gt;&lt;/li&gt; &lt;li id="tabLi-4" class="tabLi"&gt;&lt;a id="tabA-4" href="#tabs-4" onclick="getContentTab(4);"&gt;Tab 4&lt;/a&gt;&lt;/li&gt; &lt;li id="tabLi-5" class="tabLi"&gt;&lt;a id="tabA-5" href="#tabs-5" onclick="getContentTab(5);"&gt;Tab 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabDisplay"&gt; &lt;% Html.RenderPartial("SearchJobsMiniControl"); %&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; function getContentTab(index) { var url='&lt;%= Url.Content("~/ajaxaction/getajaxtab") %&gt;/' + index; var targetDiv = "#tabDisplay"; var selectedLi = "#tabLi-" + index; var selectedA = "#tabA-" + index; var ajaxLoading = "&lt;img id='ajax-loader' src='&lt;%= Url.Content("~/Content/images/") %&gt;/ajax-loader.gif' align='left' height='28' width='28' /&gt;"; $(targetDiv).html("&lt;div style='margin:20px;vertical-align:middle;width:80%'&gt;" + ajaxLoading + "&lt;br /Loading...&lt;/div&gt;"); $.get(url,null, function(result) { $(targetDiv).html(result); }); $(".tabLi").css("background-color", "#004980"); $(".tabLi &gt; a").css("color", "#fff"); $(selectedLi).css("background-color", "#fff"); $(selectedA).css("color", "#004980"); } &lt;/script&gt; </code></pre> <p>The above view + javascript calls into the following action:</p> <pre><code>public ActionResult GetAjaxTab(int id) { switch (id) { case 1: return PartialView("Tab1"); case 2: return PartialView("Tab2"); case 3: return PartialView("Tab3"); case 4: return PartialView("Tab4"); case 5: return PartialView("Tab5"); } return null; } </code></pre> <p>It is actually the first tab that scrolls the page. Further, it does not appear that my initial thought — that it was the input box causing the scroll — is correct. The behavior persists if I remove the input box from the partial view that is loaded (and if I remove all markup from the partial view), if I switch the tab order the same.</p> <p>So maybe something in the HTML or CSS though I still can't find it. There is no default focus being set in CSS. Nothing obvious that would cause scrolling to occur.</p> <p>So, if there is no obvious cause, is there a way to scroll using jquery / javascript?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGene Reddick
    1. USGene Reddick
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to prevent a jquery Ajax call from scrolling a form with an input to the top of browser window
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload