I have a Master Page in a ASP.NET MVC 4 application. The master page has a menu with several items and each item is a link to a page.
The menu is a jQuery Accordion menu. When I select an item the entire page is reloaded and the accordion menu return to the original state.
To avoid this, I store the last menu opened and store it to an attribute of the header of the menu. On $(document).ready event I loop the headers and activate the menu but this makes an ugly effect to be seen.
How can I avoid reload of the entire page? I have to use the update panel in the MainContent of the ContentPlaceHolder of the Master Page? There is an example?
I'd suggest an Ajax method. You can find a tutorial here:
http://www.codeproject.com/Tips/886473/Implementing-AJAX-in-ASP-NET-MVC
Since you're already using jQuery, another option would be to use $.get(). You can find a lot of tutorials related to that method, like this.
To make a difference when returning data between an 'normal' call to your action and one from an ajax-call use :
if (Request.IsAjaxRequest()) return PartialView("_Index", VM);
return View(VM);
The partial one will not include the lay-out. Otherwise you might get a funny looking page with the multiple top-bars.
Related
I have a site that uses jquery UI accordions on different pages. The script for these accordions is on the page in each case.
We're looking into daily site prints for all pages so we need those accordions to be fully expanded when we do the site print (we'll be doing this by detecting the site printer's userAgent string because they can issue a custom one).
The site printer can halt execution of javascript on a page to keep content fully expanded but we also use AJAX scripts so that would prevent content from loading.
So we need a script that targets any jquery accordions on a page and makes them fully expand. We have a custom.js file that is present on all pages so we could place a command there.
My question is, is it possible to target all instances of accordion objects without already knowing what they are? I'm looking at the possibility of putting a script in the custom.js file rather than having to rewrite all the JQuery accordion calls page by page (and trying to get everybody that adds stuff to the site to also remember to write a conditional userAgent based expand everytime they use an accordion).
Without seeing your code or knowing anything about your current HTML, you can try something like this:
$(".ui-widget.ui-accordion").each(function(index, elem){
// Code that you want to execute on each Accordion
// For example, we could disable each one:
$(elem).accordion("disable");
});
I don't see a method to expand all panels at once. Likely, you would have to activate each panel.
Found this: jQuery UI Accordion Expand/Collapse All
It advises using the theming to make the accordion look correct, and then roll your own ability to expand all.
The scenario I'm trying to build in Kentico is having a user action in one web part cause the reload/update of a second web part without reloading the whole page.
An example would be adding an item to a shopping cart: if a user clicks on the 'add item to cart' button (first webpart), then the item total in the cart (second webpart) in the page header should update without reloading the whole page.
I know how to do this with an ASP.NET MVC application, but I haven't yet figured out how to do this with Kentico.
This is not possible out of the box. You have two options:
Create copy of a web part and adjust it according to your needs. This is a cleaner solution but can be avoided.
Turn on "Use update panel" for desired web parts and do the refreshing programmatically via JavaScript. I wouldn't fear it if it's just for small portions of the website (like updating text of item total).
I'd wrap the "item total" (I guess you use the Shopping Cart Preview) web part in a div (using a container or content before/after properties) and give it a class (e.g. .cartInfo). And then query it and refresh the underlying UpdatePanel (div) by calling ASP.NET's __doPostBack().
__doPostBack(document.querySelector(".cartInfo div").id,'');
You can then hook this piece of code to any event on the page using addEventListener / attachEvent. In your case it would be click event of the "Add to cart" button. My examples are vanilla JS but you can of course use jQuery to do all that.
I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.
In some of the website I found header and footer remains fixed.
When user click on any link in header or footer then new page opens from downside(or any other way) on same window.
I dont remember exactly the link for such site. I appreciate if someone can show me how that work.
I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates.
I google it but could not think correct words to get this exactly.
If you do know how to navigate (just in case - here is an example: AJAX navigation), but need to see examples of navigation "styling", Codrops would be a great place to start:
Codrops - navigation examples
Codrops - page transitions
"I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates."
The simplest method is to have a container div within which you put the variable content (i.e., the current "page"):
<div id="content"></div>
(When your page is first loaded that div can have default content as appropriate, it doesn't have to start empty.)
Then using the Ajax method of your choice (that you mention you already know how to use), in the success handler you then use an animation method to hide that main div, then change its content to the html returned via ajax, then show the div again using the animation method of your choice:
$.ajax({
url: 'yourUrlHere.com',
success : function(newContent) {
$("#content").fadeOut(1000, function() {
$(this).html(newContent).slideDown(1000);
});
}
});
Demo: http://jsfiddle.net/M4ZZ6/
From there you can get as fancy with the transition as you like by applying different animation effects. Or use a page transition plugin...
If you want the easy way check this.
<div id='loadpage' style='display:none'></div>
Jquery code:
$('#loadpage').load('mypage.php',function(){$('#loadpage').fadeIn(300);});
You can add more efects for your loads.
Here is the example.
JSFiddle
I have two pages that inherit from one master page, First.aspx or second.aspx. Navigation is on master page. If I am on first.aspx page & want to go to second.aspx onClick. I just want to load My contentplaceholder, not refresh all of the page. Is this possible or not?How do I do this if it is possible?
I have tried using:
$(function() { $("#btn").click(function() {
$("#Content").load("Second.aspx");
});
});
I have also tried using this:
function SelectRol() {
window.location = 'Second.aspx';
return false;
}
Unfortunately, that is not going to work. You could use ASP.Net UpdatePanel for partial page refreshing, or better use JQuery Ajax methods to load HTML content you want to show.
See http://www.dotnetfunda.com/articles/article1123-partial-page-refresh-using-jquery.aspx for more information about this solution.
Its better to use ajax call if you don't want whole page to get refreshed . or you can use AHAH as the one facebook use for the chat box
There is no such thing as Partial Loading / Partial postback. We can only do Partial Rendering. If you need to load a second page that page's entire page event life cycle would happen which will include the Master page's events.
If you need a true Ajax mechanism. Render your scripts initially which will construct your UI and subsequent communication will be transmitting only the data using RESTful / JSON service.