jQuery tab content loaded from PartialView using Ajax - tabs

I am loading 2 jQuery UI tabs with data from ASP.NET MVC 3 PartialView using $.ajax(). I am specifying the '/controller/action' as URL. This works fine and I am able to load the two tabs with content returned by the partial views.
I have a Save button in the _layout.cshtml.On clicking the Save button, I want to get data from all tabs and send it to the controller as a JSON object.I want to use only one Save button for saving all data in the tabs instead of having Save button at the bottom of each tab.
The problem is I am able to get data from only the first tab. I get 'No Source Available' error when I try to get data from the other tab. The $('#some_id').change() event is also not fired for the controls in the second tab.
Please suggest if there is a better way to implement this ?
I would also like to know why the HTML generated by PartialView is not seen when I view source HTML of the page ?
Thanks.

It turned out to be an issue of async requests that were being made to load the tabs. I used the load() of jQuery tabs to resolve this.

Related

AngularJS - How to reload data in Custom directive

I have a custom directive..I need to reload the data up on a button click...fetching the data fresh from back-end service and refresh on the screen. can someone help me with getting through this ?
You can bind local scope/directive property to parent scope property. Here is a simple example that updates contents of directive on button click.
http://jsbin.com/dijijonedu/1/edit?html,js,output

The form data going to another page while action set to another page

I have a form in which the attribute action is set to go to a page but whenever i press the submit button its taking the data to another page.
while writing your form use post method if you are using get method or use get if using post. one of them uses to carry data while navigating to target.. so just change your form method..

Convert table to JSON using multiple tabs

I am using a jQuery plugin named "Table-to-JSON" (http://lightswitch05.github.io/table-to-json/) in order to convert an HTML table to a JSON object. Everything works smoothly.
My problem has arisen when I use another jQuery library "jQuery UI Tabs" to have multiple tabs within a single HTML file.
On each tab I have a table. At the bottom of the page I have a save button. I would like to give the chance to users to press the save button and for each table in each tab the corresponding JSON object to be saved.
The problem is that when you press the save button, you can only save/export the JSON object of the current (selected) tab. Add some more tabs and then, when you try to export(alert) the JSON object of each table in each tab (only the table of the selected tab is exported) , the rest of them are empty [] as you can see in my jsfiddle example provided below.
I would like to export all the JSON objects of each table in each tab.
Is it a jQuery issue regarding IDs? or table-toJSON library does not work with jQuery-UI tabs?
Any advice would be appreciated.
there's an option for the function tableToJSON called ignoreHiddenRows.
set this option to false to accomplish what you need.
here's the fiddle : http://jsfiddle.net/7t5cB/

how to use in condition in yii

I am facing this problem that how to use in conditon in yii.
I want to make a CListView in a tab which the tab number not at first.
How can I do ajax pagination on CListView, so I don't get the page refreshing but only the CListView instead ?
Call this in javascript: $.fn.yiiListView.update('id-of-your-listview');
the same for grid view: $.fn.yiiGridView.update

data role page dynamic display

I am creating a HTML page with multiple data-role pages.loading time we will check some condition and display that particular data-role page.currently id display first data-role, how can i display data role page conditionally.
Take a look at the docs section "autoInitializePage". Here you can disable the default initialization until $.mobile.initializePage is manually called.
Because the mobileinit event is triggered immediately, you'll need to
bind your event handler before jQuery Mobile is loaded. Link to your
JavaScript files in the following order:
jquery.js
custom-scripting.js
jquery-mobile.js
Please take a look at this fiddle. What it basibally does is adding a hash to your url thus redirecting to the subpage.
Source