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
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.
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.
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've got a list of checkboxes and an ImageButton with an OnClick event in my page, clicking the ImageButton performs a postback and runs the OnClick event fine
The trouble is that I want to move the div to be the first child of the <form> so that I can make it appear in a modal window - I've done this using the prototype.js code...
document.observe("dom:loaded", function() {
if ($$('.CheckboxListContainer').length>0) {
var modalShadow = document.createElement('div');
modalShadow.setAttribute( "class", 'MyFormModalShadow' );
modalShadow.style.width = document.viewport.getWidth() + 'px';
modalShadow.style.height = document.viewport.getHeight() + 'px';
var modalDiv = document.createElement('div');
modalDiv.setAttribute( "class", 'MyFormModal' );
var checkboxesDiv = $$('.CheckboxListContainer')[0];
checkboxesDiv.remove();
modalDiv.appendChild( checkboxesDiv );
$$('form')[0].insert( {top: modalShadow} );
$$('form')[0].insert( {top: modalDiv} );
Event.observe(window, "resize", function() {
if ($$('.MyFormModalShadow').length>0) {
var modalShadow = $$('.MyFormModalShadow')[0]
modalShadow.style.width = document.viewport.getWidth() + 'px';
modalShadow.style.height = document.viewport.getHeight() + 'px';
}
});
}
});
... which works fine, but the ImageButton is no longer triggering my OnClick event on postback.
Is there a way to move my div around in the DOM and retain its postback abilities?
Quick answer, yes. Long answer below:
If you're talking ASP.NET WebForms, does your form have the runat="server" attribute and an id? If you're using standard HTML, are the method and action attributes set on the form?
When you look at the HTML source in your browser, if the form looks like: <form action="/your_post_back_page.html" method="post">, then that's all good. Inspect the form with FireBug after the modal dialog has been added, see if it is INSIDE the form tags. If so, that's good.
Do your check boxes <input type="checkbox" /> have a name attribute set? Is your image button <input type='submit' /> or is it a <button>?
If these conditions are met, then there is probably a JavaScript event (a function) wired to your button that is returning false and/or swallowing the postback. JavaScript onclick events generally need to return true to submit a form. Is there any output in your browser's error console?
Personally, I find more and more that pure HTML (by way of ASP.NET MVC) beats the pants off old school ASP.NET WebForms, and jQuery has, in my experience, a far nicer feel than prototype. Using jQuery templates to create a modal dialog would be easy. Can you swap libraries?
First of all, i am not very clear why you need to move the element to be the first child of the form to make it modal. You can make any div modal no matter where is the position in the form. The most important think is controlling the absolute positioning properly.
Each postback gets triggered by a __DoPostBack() javascript function, so you should not have any issues with moving the control around, unless you changed the id of the control.
One possible solution to your problem is calling the __DoPostBack() function from your client code in document.ready, and that way you have full control over the form submission.