I use Jquery UI to create tabs. I want create new tabs with content tab1 = content tab2
You can use a bit of jQuery to accomplish this. Assuming that your jQuery UI tags code looks like:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2">Test content</div>
</div>
You can use something similar to the following to copy the content into the first tab.
var content = $('#tabs-2').html();
$('#tabs-1').html(content);
This code takes the HTML string within the tabs-2 div and stores it in a variable. It then sets the content in tabs-1 div to the variable.
Related
I have a first page called index.html, where i have two links "red fruits" and "yellow fruits".
Then i have "fruits.html" which has two jquery pages with id "redFruits", "yellowFruits".
When somebody clicks "yellow fruits" link on the index.html i need to show the second "page" of the fruits.html. By default, jquery mobile shows the first page of the "fruits.html".
Any idea of how to link to random page of the ajax fetched document.
"index.html"
<div data-role="content">
List of red fruits
List of yellow fruits
</div>
fruits.html
....
<div data-role="page" id="redFruits">
....
<p data-role="content">
<ul>
<li>apple 1</li>
<li>apple 2</li>
<li>apple 3</li>
</ul>
</p>
.....
</div>
<div data-role="page" id="yellowFruits">
.....
<p data-role="content">
<ul>
<li>lemon</li>
<li>papaya</li>
<li>yellow fig</li>
</ul>
</p>
.....
</div>
You can reference the sub pages within a multiple pages document via hash tags:
List of red fruits
List of yellow fruits
You can use the pageparams plugin to send data to the second page - in this case an #id of the page to be displayed.
In the pagebeforeshow of page2 you can check for the param passed and changePage() accordingly.
I have in my form a textarea where some links are stored via the method val():
<li classs="0">Description</li>
The textarea should be hidden and I add these links from some other inputs (Link + Description)
For the user to know what he added, I display these links in an unordered list:
<ul id="sources_display">
<li class="0">Description</li>
<li class="1">Description</li>
<li class="2">Description</li>
</ul>
Now I would like to have a remove_link button, which could be as:
<ul id="sources_display">
<li class="0">DescriptionRemove Link</li>
<li class="1">DescriptionRemove Link</li>
<li class="2">DescriptionRemove Link</li>
</ul>
I could do that. But I would like to be able to add this remove link button each time a new link is displayed in the <ul id="sources_display">. I would like to use something like live() method.
With other words, do you think it's possible to call a function when something like $("ul#sources_display li") is displayed during the load of the page or via AJAX request?
THX guys!
I'll write here how I did with rails.
To be able to add a remove button on the page load, I called a function directly from my show.html.erb:
<script type="text/javascript">
$(document).ready(function() {
add_source_links();
});
</script>
and to be able to add the remove button on the Ajax content load, I call the function from the the corresponding js.erb file this way:
add_source_links();
My function is stored in the application.js file.
Thx for help!
I've created two tabs using jquery UI, and placed two partial views in the tabs as the below code.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
#Html.Partial("Tab1") </div>
<div id="tab2">
#Html.Partial("Tab2")
</div>
</div>
How can I share data from Tab2 partial view to Tab1 partial view.
Thanks,
Naren
You can't. Directly sharing data between partial views is no good architecture, either. Each partial view should exist for one distinct purpose and should not interfere or exchange data with other ones — in fact, Tab1 shouldn't even know that Tab2 exists.
However, you could store the data in the Model property of the view containing the two partial views and hand that over to each partial view that is rendered:
#model SomeModel
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
#Html.Partial("Tab1", Model)
</div>
<div id="tab2">
#Html.Partial("Tab2", Model)
</div>
</div>
Stylistically I prefer to load not load 2 partials in the same page if the user can only see 1 at a time... I personally prefer to just split them into different views (event if the experience to the user make it look like they're clicking through tabs to get the affect you want)
This prevents partial B from doing something that potentially slows down page load times for partial A, thus slowing down the user experience for no apparent reason.
If you loaded these into 2 different views, then you could use standard action links to move the data across... This is also helpful if you need to navigate directly to a tab (that's not the first one)
I have a set of jQuery UI tabs, which load their content via the ajax method:
<div id="tabs">
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
<div id="Inbox"> ... </div>
<div id="Sent"> ... </div>
<div id="Ins"> ... </div>
</div>
JS:
$(document).ready(function () {
$("#tabs").tabs();
}
The tab titles are displayed, and the content of the first tab is loaded OK.
Using the AJAX Tabs method is detailed here
When I switch to a different tab, I can see the browser loads the content for that tab, but the content isn't displayed.
Any ideas what I am missing?
replace your ul list by this :
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
Have fixed it now. I had a subsequent $.ajaxSetup() call that was upsetting things.
I'm trying to use the tabs purely as a navigational menu, loading my pages in the tabs, but being able to bookmark said tabs, and have the address bar correspond with the action I'm executing.
So here is my simple nav partial:
<div id='tabs'>
<ul>
<li id='home'>Home</li>
<li id='test'>Test</li>
</ul>
</div>
And the simple tabs intializer:
$(document).ready(function() {
$('#tabs').tabs({spinner: ''
});
});
My layout just displays $sf_content. I want to display the content for the action I'm executing (currently home or test) in the tab, via ajax, and have the tab be bookmarkable.
I've googled this like 4000 times and I can't find an example of what I'm trying to do. If anyone has a resource they know of, I can look it up, or if you can help, I would greatly appreciate it.
Thank you in advance.
This will make your tabs load using ajax
<div id='tabs'>
<ul>
<li title='home'>Home</li>
<li title='test'>Test</li>
</ul>
<div id="home">home content here</div>
<div id="test">test content here</div>
</div>