I am new to this forum so first let me say a big hello and thanks for providing such a great website!
I am new to JQuery but I love it, I have some JQuery tabs doing the usual List/Edit/Create stuff in a backend.
I have managed to set the edit tab to deisabled when viewing the list tab (as you need to slect a list item to edit) and it is enabled when a list item edit icon is clicked.
The question I have is if I then click the third tab how do I disable the second tab onlick?
This is my standard tab code...
$(function()
{
$("#tabs").tabs({disabled: [2]});
$("#tabs").tabs();
}
);
HTML:
<div class="demo">
<div id="tabs">
<ul>
<li><wont let me post 3 links>Jobs</a></li>
<li>Create Job</li>
<li>Edit Job</li>
</ul>
<div id="tabs-1" style="background-color: #fff">
Include...
</div>
<div id="tabs-2" style="background-color: #fff">
Include...
</div>
<div id="tabs-3" style="background-color: #fff">
Include...
</div>
</div>
Thanks
First you HTML is no correct so the plugin does not initialiaze well. The first tab button link is incorrect:
<li><wont let me post 3 links>Jobs</a></li>
Should be
<li>Jobs</li>
Then you are initializing two times the plugin, only do it once.
In the show event handler, enable/disable the tabs according to the actual tab shown:
$(function()
{
$("#tabs").tabs({
//disabled: [2],
show: function(event, ui) {
if (ui.index === 0) {
$('#tabs').tabs('enable', 1);
$('#tabs').tabs('enable', 2);
} else {
$('#tabs').tabs('disable', ui.index === 1 ? 2 : ui.index === 2 ? 1 : -1);
}
}
});
/*$("#tabs").tabs();
}*/
);
Here is a live working example on jsfiddle
Related
I've got a div element which I am using as a popup which does not update itself. I'll use the picture below to explain:
When I click on each row in the grid, the right hand side updates to show the details, part of which is a potentially lengthy Note field. The button View Note triggers a popup with the full text inside. Here, I have previously selected Donor 2000000, which displayed the correct note. However, when I select another Donor(2000002 as highlighted) the information in the popup retains the info for the first selected Donor. So, essentially it sets it once and then does not update.
The (partial) code for the main View is:
<div class="col-md-4 col-md-push-8">
<h4>
Donor Details
</h4>
<div id="donor-details">
<p class="muted">
Select donor to display detailed infomation
</p>
</div>
</div>
<div class="col-md-8 col-md-pull-4">
#Html.Action("DonorSummaryGrid") #* configure grid in a partial view *#
</div>
</div>
<script>
$(function () {
pageGrids.donorSummaryGrid.onRowSelect(function (e) {
$.post("/Donor/GetDonorDetails?donorId=" + e.row.DonorId, function (data) {
if (data.Status <= 0) {
alert(data.Message);
return;
}
$("#donor-details").html(data.Content);
});
});
});
</script>
The code for the partial view - which contains the details - is:
#if (!String.IsNullOrWhiteSpace(Model.CurrentNoteText)) {
<div id="note-dialog" title="Note for Donor #Model.DonorId">
<p>#Html.DisplayTextFor(model => model.CurrentNoteText)</p>
</div>
<br />
}
#Scripts.Render("~/Scripts/NoteDialogue.js")
When I debug, the value of Model.CurrentNoteText and #Model.DonorId do reflect the correct data.
NoteDialogue.js is:
$(function() {
$("#note-dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 200
}
});
$("#opener").click(function() {
$("#note-dialog").dialog("open");
});
});
I hope this is clear :)
Oh, there are no errors shown in the browser, and everthing functions as expected, except for updating the info in the popup.
I have tried
<script>
$("#note-dialog").html("#Model.CurrentNoteText");
</script>
with no success.
Got there in the end :)
Looking at the generated source, I noticed that the code for
<div id="note-dialog" title="Note for Donor #Model.DonorId">
<p>#Html.DisplayTextFor(model => model.CurrentNoteText)</p>
</div>
<br />
was being generated right at the bottom, outside all the other divs containing the grid and details. Looked something like this:
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" role="dialog" aria-describedby="note-dialog" aria-labelledby="ui-id-1"....>
As I clicked each row with a note in, an extra div was being generated, with the aria-labelledby attribute incrementing, e.g. "ui-id-2", "ui-id-3"...
The first generated div was being selected for the dialogue opening.
The solution was to remove the div on the row click event. Code now is:
$(function() {
pageGrids.donorSummaryGrid.onRowSelect(function (e) {
$("#note-dialog").remove();
$.post("/Donor/GetDonorDetails?donorId=" + e.row.DonorId, function(data) {
if (data.Status <= 0) {
alert(data.Message);
return;
}
$("#donor-details").html(data.Content);
});
});
});
JQM 1.3 Iscrollview 1.3.1
I have a list of links to events using data-iscroll. Each event is also a list (title/date-location/description).
Each time I click on the event list, the event is displayed. If I scroll down the content, when I go back to the event list and then click on another event, the view scrolls to where the previous view was stopped.
I've successfully stopped this by launching an empty() on the event content and then calling updatelayout on the back button of the event content :
$("#bhome").on('vclick', function(e) {
$('#econt').empty().trigger('updatelayout');
$.mobile.loading('show');
e.preventDefault();
$.mobile.changePage("#page1");
});
But, of course, android users don't use a back button and use the back key instead.
I've tried to empty() and updatelayout on the pagebeforehide event but apparently, the position is saved before that event happens :
$('#event').on('pagebeforehide', function(event, data) {
$('#econt').empty();
$('#econt').trigger('updatelayout');
$('#escroll').trigger('updatelayout');
});
I've also tried to use the silentscroll function but it's not working either :
$(document).on('pageshow', '#event', function(){
$.mobile.silentScroll(0);
});
How can I make sure that on viewing a new event, the position is back to the top ?
Here is a snippet of my index.html file :
<div id='container'>
<div data-role='page' id='page1' data-theme="c" style="background: black;">
</div>
<div data-iscroll style='background-color:#ddd;'>
<ul id="el"></ul>
</div>
<div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false">
</div>
</div>
<div data-role="page" id="event" data-theme="c" style="background:black;">
<div data-role='header' data-position='fixed' data-theme="a" style="height:42px;">
<a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a>
<h1 id='eh1'></h1>
</div>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>
The answer was given by the iscrollview author (works perfectly) :
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);
I am using jquery UI tabs to create tabbed content. When a tab title is selected, I want it to link to the original location.
$(function() {
$("div.tabs").tabs("div.items > div");
});
<div id="items">
<div class="tabs">
<div class="tab">Tab title 1</div>
<div class="tab">Tab Title 2</div>
<div class="tab">Tab title 3</div>
</div>
</div>
When not-selected clicking on tab title 1 shows the tab content.
After being selected, the tab title 1 would link to http//www.example1.com.
I added a class if the tab had been clicked once already, and then used mouse down to trigger the link.
$(".tabs").tabs(".items > div");
$(".tabs .tab:first a").addClass("lasttab");
$(".tabs .tab").mousedown(function() {
if ($(this).find('a').hasClass("lasttab")) {
window.location.href = $(this).find('a').attr('href');
}
$(".tabs .lasttab").removeClass("lasttab");
$(this).find("a").addClass("lasttab");
});
The example at: http://jqueryui.com/demos/tabs/, I would like the form is submitted when clicking the tab-2 menu.
The following is my code. However, the form doesn't submit after clicking.
Can anyone help me? Many thanks!
<script>
$(function() {
$( "#tabs" ).tabs();
$('#tabs-2').click(function() {
$('#target').submit();
});
});
</script>
<div id="tabs">
<form id="target">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
<li>Tab-3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</form>
$(document).ready(function(){
$('#tabs-2').click(function() {
$('#target').submit();
});
});
You'll probably find that the tab plugin is preventing the default actions of the click anyway and not calling your click event.
You should try hooking into tabselect event instead and use ui.tab to check if the selected tab's href attribute is #tabs-2.
$("#tabs").bind("tabsselect", function(event, ui) {
if(ui.tab.attr('href') == '#tabs-2') {
$('#target').submit();
}
});
Or you could do this when you create the tabs instead:
$("#tabs").tabs({
select: function(event, ui) {
if(ui.tab.attr('href') == '#tabs-2') {
$('#target').submit();
}
}
});
You could also use ui.index to get the zero-basde index of the selected tab, or ui.panel to get the selected content div for that tab. Whichever you prefer!
I think you need to define id for Tab-2 as mentioned here. but here you are referring div id click.
<li>Tab-2</li>
$('#tabs2').click(function() {
$('#target').submit();
});
I'm using the jquery tab plugin with the same results that are on jquery ui site (link text).
The problem is that I want to change the tab label to something like "Loading" when the Ajax request is waiting for a response. How shall I achieve that?
Edit:
What I have now:
<div id="tabs">
<ul>
<li>User Profile</li>
<li>Edit</li>
<li>Delete AccountT</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("UserProfile", Model); %>
</div>
</div>
and on javascript I just have the following code:
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
});
});
</script>
What i want is to show a loading message inside the div of the active tab.
According to the widget doc, ajax should work outside the box if your href is an actual link :
To customize loading message, you can use the spinner option :
Fetch external content via Ajax for
the tabs by setting an href value in
the tab links. While the Ajax request
is waiting for a response, the tab
label changes to say "Loading...",
then returns to the normal label once
loaded.
<script>
$(function() {
$( "#tabs" ).tabs({
spinner: "<em>My Loading Msg</em>",
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
Why don't you just set the tab label to "loading" onclick and change it to whatever you want once you get a response back from your AJAX?
$(function () {
$("#tabs").tabs();
$("#tab1").click(function() {
$(this).val("Loading...");
$.ajax({
blablabla...
success: function() {
$("#tab1").val("Tab 1");
}
});
});
This should give you an idea, obviously the function could be written better to act on each tab.
I think what you are after already exists in the jquery ui for Tabs.
The HTML content of this string is
shown in a tab title while remote
content is loading.
http://jqueryui.com/demos/tabs/#option-spinner
Hope this helps!
From your example am I correct in assuming that you want to navigate to another page when the user clicks on either of the second two tabs, but you want a loading message to be displayed while you are waiting for the next tab to load?
If so, you could do it by keeping a loading message in the other tabs like so:
<input type="hidden" id="modelId" value="<%=Model.Id%>" />
<div id="tabs">
<ul>
<li>
User Profile
</li>
<li>
Edit
</li>
<li>
Delete AccountT
</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("UserProfile", Model); %>
</div>
<div id="tabs-2">
<p>Loading, please wait...</p>
</div>
<div id="tabs-3">
<p>Loading, please wait...</p>
</div>
</div>
And doing the redirection to your other pages in your javascript, doing it something like this:
$(document).ready(document_ready);
function document_ready()
{
$("tabs").bind("tabsselect", onTabSelected);
}
function onTabSelected(event, ui)
{
var modelId = $("#modelId").val();
switch (ui.panel.id)
{
case "tabs-2":
window.location.href = "/User/EditUser/" + modelId;
break;
case "tabs-3":
window.location.href = "/User/Delete/" + modelId;
break;
}
}