I have a GridView that displays a small amount of information about multiple users. In this GridView, I have a button that will display all of the information about the selected user inside a DetailsView below the GridView. The problem is, if I don't search for a specific user, I get a list of over 200 people and the GridView is extremely long. This makes the end-user have to scroll to the bottom of the page, which is very annoying. I have been reading about a ScrollIntoView function but I don't think that it is related to a DetailsView. I also read that I can use JavaScript to potentially get the results that I am looking for. I am not sure what the best approach is for this, but any help would be very much appreciated. I have an empty SelectedIndexChanged method that was generated by Visual Studio when I double clicked on the button. If I do end up going with the JavaScript route, where would I insert the code for this? Would it go in the aspx.cs page or just the aspx page?
If all the clicks of the GridView point to the same place on the page, you could do something like this.
<script type="text/javascript">
$('#<%= GridView1.ClientID %>').click(function () {
$('html, body').animate({
scrollTop: $("#targetID").offset().top
}, "medium");
});
</script>
If you load the DetailsView with a PostBack, ypu can do this. Add a scriptmanager to the code behind.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ScrollToElement", "ScrollToElement('targetID')", true);
And then the matching JavaScript function.
<script type="text/javascript">
function ScrollToElement(id) {
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, "medium");
}
</script>
I was able to create a work around to get this working properly. I created a new button that the user can press that will scroll to the top of the DetailsView. It was quite simple, but it will work for what we do. I created an empty span tag above the DetailsView and used <input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" /> for the button.
Related
I have textbox named 'txtExploitDate' in update panel. And on button click I have set default value for textbox as yesterday's date. I have written below jquery code to bind datepicker with textbox. But when I select date from datepicker it is refleting date in textbox just for second and again changing to default date.
<script type="text/javascript">
//$(document).ready(function DatePickerExploitDate() {
// $(function () {
// $("#txtExploitDate").datepicker();
// });
//});
$(document).ready(function () {
ApplyDatePicker();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyDatePicker);
});
function ApplyDatePicker() {
$('#txtExploitDate').datepicker();
}
</script>
Please ignore the commented code as I was using it earlier when my textbox was not in update panel but there was postback issue that time so I put my textbox in update panel and changed my jquery code.
Please Help me with this.
That is because JQuery datepicker uses unique IDs for all controls that use the plugin. This is something done by most JQuery plugins to control events. When the update panel refreshes those special unique IDs don't point anywhere anymore.
Check the explanation and solution in this article from asp snippets: https://www.aspsnippets.com/Articles/jQuery-DatePicker-not-working-inside-ASPNet-AJAX-UpdatePanel-Partial-PostBack.aspx
Resolution is made possible by having the plugin rerun when update panel refreshes.
As a personal point of view I believe you should try to see a solution without update panel as it is a very cumbersome technology, is to break when you start to mess with the DOM and there is better ways to use AJAX calls, even with JQuery.
In my application i have 3 panels corresponding anchor tags. Initially when the page is load first panel is visible rest of two panels is in disable state. when i click second anchor tag it is not displaying once it display in that when i click button data is not display properly i need to display when i click anchor tag corresponding panel data will be display
Remove following part from your code.
$("#<%= btnGetAct.ClientID %>").click(function () {
$("#<%= pnlPw.ClientID %>").hide();
$("#<%= pnlAct.ClientID %>").show();
$("#<%= pnlUserdetails.ClientID %>").hide();
});
You are calling this Click from both side. From your client side as well as server side so I think it is creating conflict and because of that you're not getting your desired output.
You can remove the show/hide init of your panels in your $(document).ready function to prevent resetting to the initial state every time your page is loaded, for example when you're clicking your GET button.
You can set this initial state directly in your aspx code, setting a display:none to the panels you want to hide at start:
<asp:Panel ID="pnlAct" runat="server" Style="display:none;"> [...] </asp:Panel>
<asp:Panel ID="pnlUserdetails" runat="server" Style="display:none;"> [...] </asp:Panel>
Comment/remove theses lines in your JavaScript:
//$("#<%= pnlPw.ClientID %>").show();
//$("#<%= pnlAct.ClientID %>").hide();
//$("#<%= pnlUserdetails.ClientID %>").hide();
Then, your code should work properly.
Hello i need to stay on a jquery tab after asp.net postback, but nothing what i found here or somewhere else in the web works for me.
I tried:
Staying on current jQuery tab across post back?
and
Jquery postback, maintain same tab after postback
but also some other sources.
Everytime when im changing
$("#tabs").tabs();
to something like:
$(function () {
$("#tabs").tabs({
show: function() {
var selectedTab = $('#tabs').tabs('option', 'selected');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
selected: <%= hdnSelectedTab.Value %>
});
});
With hiddenfield etc. i get this error 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'tabs'.
When im Using the jquery.cookie.js file with this code:
$("#tabs").tabs({ cookie: { expires: 1 } });
i dont get an error but i dont stay on the tab after postback.
You can give your input button a css class.
#inputField {
display:none !important;
}
Save this as yourCssClass.css
document.getElementById("inputField ").className += "yourCssClass";
Add this to your JavaScript
I found out what the Problem was, I inserted jquery on the end of my master page because of that somehow it overwrote the jqueryui file in that specific aspx file. After i added the jqueryui.js file after the jquery.js everything worked fine.
I have jquery tabs on my page, each tab has a single iframe in it. Everything works, except...
The iframes refresh each time I switch tabs.
The source for the Iframes is set in the Page_Load and is only executed once. The jquery does not do anything except change the tab...no other code.
Is there a way to not refresh the iframe each time?
This is why I never want to ask anything on this site...I know it's gonna be something simple, but for anyone that may be helped in the future from my pain...
In the code for the jquery tabs to select or hide tabs, I had a call to a button click event that was used to keep track of the current state of the tabs. This is what caused the postback and why my iframes were getting reinstantiated.
$(function () {
$("#tabs").tabs({
select: function (event, ui) {
var sel = ui.index;
$("[id*=SelectedTab]").val(sel);
$("[id*=ChangeTabButton]").click();
},
selected: $("[id*=SelectedTab]").val()
});
});
Thanks Kevin and Vishal...
I have a menu that is a nested ListView Control that is on my master page. I use the Jquery below to turn this ListView into a accordion. The problem is when I click on the Menu titles it will cause a postback. So the submenu flashes and ones the post back is complete it reloads the page and the menu(closing the Active submenu).
$('.head').each(function () {
var $content = $(this).closest('li').find('.content');
$(this).click(function (e) {
// e.preventDefault();
$content.not(':animated').slideToggle();
});
});
Well simply put there are few ways you can maintain state during postback. Two easiest are using POST and GET, ie the ViewState or some kind of query string.
Continued
I would personally recommend using a hidden field, let's say that you want the 3rd item to open on load, then you would use something like
<input id="hidMenuItem" type="hidden" value="3" />
Then using jQuery
$(document).ready(function {
var itemIndex = $("#hidMenuItem").val();
$("li .content:nth-child(" + itemIndex + ")").slideToggle();
});
To save the open item before postback do this in the click event
var itemIndex = $("li .content").index(this);
$("#hidMenuItem").val(itemIndex);
It's untested but this is the idea.
Hope that helps