I m using a Ajax Tab panel in my application.
There are 4 tabs on Left hand side and a partial view on right hand side.
In each of these tab I m displaying some data and there is a select link button on each tab.
when I click on any of the select link button I m filling the partial view with some information.
When this happens my view is completly loaded again.
A B C D
eg these are the tabs.
let us suppose that I m on tab B and now when I click on the select link button My view is completly loaded with information.
but the tab loose the focus at this point. I comes back to the default value.
so I want help on this
1) either I have to refresh only the partial view without loading the complete page
2) or I need to maintain active tab index value on click on select link button
Please help me with this problem
and provide me examples
jQuery Tabs - Load contents only when clicked
Here is the example which loading content of the tabs dynamically by Ajax. It is for PHP what you need to change is put controller/action instead of URL of the PHP page.
$.get("controller/action", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml");
or else instead of Ajax.ActionLink
use <a onclick="LoadTab(#item.ID)">Item #item.ID</a>
and jquery function to change the tab and load data dyanamicaly
function LoadTab(id){
//Change tab here Ex: $('#tabs').tabs('select', index);
$.get('ajax/test.html', {Id, id},function(data) {
$('#Partial_Controller_Name').html(data);
});
}
Write an ajax call on click event of tab and load the partial view in the container of the tab
This can be done using RjsResult class
if using mvc1 u can use RjsResult.cs
by this..you can update as many div you want in a page...
use this for implementation
public ActionResult Some_Method(){
RjsResult r = new RjsResult();
ViewData["SomeData"] = Some_Function();
r.update("DIV_id","PartialPagePath",ViewData,ControllerContext);
return r;
}
so when you click on somethink..this function will be implemnted and will refresh you div with tht partial
View part
<div id="DIV_id"></div>
you can update as many dv as you want with a single click :)
Related
I am having an issue with Bootstrap Modal, you know when we call a modal, the page where we called it is disabled (it turns gray) and you can only type/click on the modal right? On my part though, both the main page and the modal is disabled so I can't click nor close my modal after I called it. I can fix it by making the data-backdrop property to false but that removes the effect both on my modal and the page.
Default Modal:
data-backdrop = "false"
I think the reason for this is because the content of my modal is a partial view, and the modal is called from a partial view also. To help you imagine: I have 3 pages
1. Index.cshtml(main page)
2. SearchResult.cshtml (partial view)
3. Edit.cshtl (partial view)
Index is where my search criteria bar, when Go is clicked, SearchResult partial view is called at the center of the page, then when I click edit, the modal popup.
My assumption is that the backdrop also disables my SearchResult so my whole page become disabled. I am not really sure though. I hope you can help me figure this out. Thank you!
Do you have an example of your code? I am guessing without looking that your div that you are populating with the modal content is inside the div(s) with the rest of your page content. If this is the case, try moving the modal div out of any nested tags so that it stands on its own.
I.E.
`<div id="PageContent"></div>
<div id="ModalContent"></div>`
I put this code on my document ready , to catch when that element is adding to the page and I remove his css attribute position to relative:
$('body').on('DOMNodeInserted', '.modal-backdrop', function () {
$(this).css('position','relative');
});
Here's my layout. I'm using a Kendo splitter control. The left pane contains a menu and the right is the main content. Some of the content pages contain kendo grids that can contain several pages of data. My problem is that when the user clicks on the next page of the grid, it performs a post back and the whole page refreshes taking the user back to the home page. The left menu loads the right panel using javascript. Does anyone know how to get around this?
In another words, I need the grid to load the next page and target the right side of the splitter control. How do I "Ajaxify" the next page of the grid control?
It sounds like your Grid is configured for Server Binding - if so you need to change it to Ajax binding and there is not other way to put it inside a Splitter which content is loaded with Ajax.
On an iPhone when you have a NavBar at the top, there is a back button.
Rather than say "Back" it has the title of the previous page in it.
So you might be on say the "Checkout" page. The title of the NavBar would be "Checkout" and the button might say "Books".
Clicking on the button that says "Books" takes you back to the previous page.
How can this be accomplished in jQuery mobile without the need to code in the name of the back button as you may have gotten to that page from a different route?
edit
I know I can do this on the page;
<div data-role="page" id="pageViewChallenges" data-add-back-btn="true" data-back-btn-text="previous">
But that makes the buttons text "previous" instead of the name of the page.
U can use
Books
(If u r using external page)
and
Books
(When using Internal page)
This is simple settings to customise back button and if u want previous page title as back button then simply get the title of back button through jquery method and set in the back button title.IF u can get the previous page title then set it on pageshow event by getting the id of back button using jquery like this:
$('#MaterialAndQuantityDetails')
.live(
'pagebeforeshow',
function() {
// page header Management
$('#bkbtnid').html("");
$('#bkbtnid').html(BackButtontext);
});
And if u r thinking how to get the title of previous page then on previous "pagehide" write the code
var BackButtontext = document.getElementById('previous_page_header_id').value;
Here BackButtontext is global variable that is to be used to set the back button text.
I've got a big ViewModel for a ContactViewModel with several addresses (default, invoice, delivery). This ContactViewModel I would like to edit within a DefaultAddress tab, etc. and I would like to know how to handle this without JavaScript? Is this possible?
Tell me if I'm off base here;
The way i think i'd approach this is to create a partial view which takes a list. the partial view would itterate through the list and create another partial view which is the tab.
on click of the tab i'd do a postback and store the clicked tab. this id then becomes the active tab.
when i come back to rebuild my page, the partialview for the actual tab would need to check to see if it's active and then make itself visible. if not visible then simply render nothing maybe.
This can be done with CSS. Here is an example: http://www.alistapart.com/articles/slidingdoors/
The selected tab/view will need to be rendered on the server. I can see each tab being a link, when the link is clicked the correct view and selected tab is returned.
Some of the css tabs don't work correctly in IE6. I'm not sure if the above link is one of them.
I am using jQuery UI tabs to have a tab where I can search for records and then other tabs where I can view individual record details. I am trying to have search results link clicks open the relevant tab and load the specific ajax content for that search result.
I am able to switch tabs using an href with something like the jQuery UI tabs example code:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
I see ajax content is normally loaded via setting the href on the tab itself:
<li><a id="customerTabLink" href="#tabs-2"><span>Customer</span></a></li>
I've tried adding this to the my-text-link onclick function to dynamically set the href for the tab but that doesn't load the content in my tab.
$('#customerTabLink').attr("href", "/view/dspClient.cfm?id_customers=15");
Is there another way I can be loading ajax content in the tab without setting this href? Or am I setting the href incorrectly? Is this something I should be using the load even for? http://docs.jquery.com/Events/load
Thanks!
-Matt
To change the URL that tab is using for AJAX calls you should use this:
$('#example').tabs('url', 1, '/view/dspClient.cfm?id_customers=15');
First argument tells that you want to change tab URL. Second argument is the index of the page you want to change the url (zero-based so 1 is the second tab), and third argument is the new URL.