I'm using jQuery-UI tabs - five in total. Tab 1 has a form for entry which submits into MySQL (via AJAX). Tab 2 pulls data from MySQL, based on what was entered via Tab 1. When I click from Tab 1 to Tab 2, I want the 2nd tab to refresh. I cannot use an external files as advertised on the jQuery-UI API due to some conflicts with other code. I'm using the following:
Here's my JS:
$(function() {
$("#tabs3").tabs();
$("#tabs3").on('click','li',function(event,ui) {
$("#tabs3").tabs("load", "active");
});
});
Here's my HTML:
<div id="tabs3">
<ul class="no-print">
<li>Enter Report</li>
<li>My Reports</li>
</ul>
<div id="tabs-1">
<form name="form" id="form" method="post" action="scripts.php" novalidate>
// form inputs
</form>
</div>
<div id="tabs-2">
<h4>My Reports</h4>
<?php
// PHP scripts that spits out the output
</div>
What can I do to make it so when I click from one tab to the next, it refreshes the content? I'm not opposed to each tab refreshing, but I would like to choose which ones get refreshed and which ones don't if that's not difficult.
Well if you arn't using a source to load the tab you will need to manually refresh whatever content you need to refresh maybe retrieving the tab page via ajax?
However, you want to approach that part is up to you. But all this can be done inside of the jquery ui tabs callback "beforeActivate". Then in the parameters you can determine what tab it is and proceed with refreshing the content at that point.
$(function() {
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {}
});
});
ref: http://api.jqueryui.com/tabs/#event-beforeActivate
And a simple fiddle
http://jsfiddle.net/zjrag3x0/
Related
I have two html webresources in my customer form, one contains a multitab and second contains some tiles, designed using bootstrap and JQuery for events. Want to initiate a Click event of tab exist on first webresource on the click of tiles exist on second webresource.
I have prepared the script on simple html page first all code is working there but not on crm form.
How can I access the tab controls using JQuery from first webresource?
I have written some scripts on each html webresources, can I use the same script/function from another html webresource?
Webresource_1
//html
<div class="row">
<ul id="tab_container_01" class="nav nav-tabs">
<li id="tab_cases"><a id="ahref_cases" href="#">Cases</a></li>
</ul>
</div>
//script
//Following script is working fine on the same page
<script type="text/javascript">
$("ul.nav-tabs").on("click", "li", function () {
var selectedTabText = ($(this).find("a").text());
var tabs = window.parent.Xrm.Page.ui.tabs;
//Some toggle script
});
</script>
Webresource_2
//html
<div class="panel">
<div> Open Cases </div>
</div>
//script
<script type="text/javascript">
$(".panel").on("click", "div", function () {
// following not working on crm form
$("#tab_cases").addClass('active');
$("#tab_cases").parent().siblings().removeClass('active'); //length 0, id not detecting
//window.parent.$("#tab_cases").parent().siblings().removeClass('active');
/* trigger click event on the li */
//trying to use function written on webresource_1 script
$("#tab_cases").closest("ul.nav-tabs li").trigger('click'); //*Not Triggering*
});
</script>
Although, technically since you are all within CRM, and you won't have any Cross Domain Scripting issues, this may be a little over kill, you could use Window.Post Message from Frame1, to communicate to the CRM form, and then have it communicate to Frame 2. This would also mean that your scripts wouldn't have to be dependent on the DOM of each, other subscribe to the same interface for posting/receiving messages.
I want to expand the collapsible content of a jQuery Mobile collapsible content section. I know I can click the heading to expand it, but I don't want to rely on the user to click the same section every time the page refreshes. I know I can set a variable in the html, but that won't do because the collapsible content will still close on postback.
I need this to be done with code rather than by the user. You can see my failed attempt below. I used the template from VS 2013's Web Forms project as a start then I added jQuery Mobile and followed the instructions from jQuery Mobile's site, or so I thought. This is a simplified test page but ultimately, I want to have an ASP.NET variables to detect whether, on postback, a section has already been clicked and if a collapsible section has already been clicked, open it again so the user doesn't have to click the same place again. Is there any way to persist the expanded state or dynamically expand jQuery Mobile's collapsible content?
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ExpandTest._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
$(".myDiv").trigger("expand");
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="myDiv" data-role="collapsible">
<h2>Getting Started</h2>
<p>ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
</div>
</asp:Content>
-- EDIT --
Thing I have tried (even just for proof of concept) that fail:
$(".myDiv").trigger('expand'); // Apparently does not execute
$('.myDiv').on("click", alert("Fe Fi Foo Bar!");); // does not run anything within
$(document).on("pagecreate", function () {
Also, I have recently read that document.ready is supposed to be used for jQuery but not jQuery Mobile. Telling is the fact that I cannot use the same code that other user seem to think works and the same code that works in jsfiddle already. This leads me to believe I'm missing something that should be obvious. I have modified the order of loading jQuery Mobile in relation to the code to no avail.
Add an ASP.Net hidden field to the page with viewstate enabled.
The jQM collapsible has events for expand and collapse. On the client side, you can handle these events and create a list of the currently expanded collapsibles, and save this list to the hidden field. After postback, client code in the pagecreate event can read the list from the hidden field and expand those items.
Assign IDs to all the collapsible divs, then you can save a comma delimited list of IDs to the hidden input:
$(document).on("pagecreate", "#page1", function(){
var prevExpanded = $("#hidden").val().split(',');
$.each( prevExpanded, function( key, value ) {
$("#" + value).collapsible( "option", "collapsed", false );
});
$( "[data-role=collapsible]" ).on("collapsiblecollapse collapsibleexpand", function( event, ui ) {
GetAllExpanded();
});
});
function GetAllExpanded(){
var AllExpanded = [];
$( "[data-role=collapsible]" ).not(".ui-collapsible-collapsed").each(function( index ) {
AllExpanded.push($(this).prop("id"));
});
$("#hidden").val(AllExpanded.join(','));
}
Use <asp:hidden> fields, and on expand change their values. Then you will be able to set the value of $(".col-md-4").trigger("expand"); on postback.
Well the following works, although I'm still at a loss as to better ways that work on Web Forms and I'll have to find a way to conditionally load this, perhaps using hidden fields as suggested earlier. Thanks for the help.
<script type="text/javascript">
$(function () {
$("h2.ui-collapsible-heading").trigger("click");
});
</script>
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...
I have jqueryui tabs on a page which, when clicking the "Tabs" links switches various <section> elements around my page, in other words, all my content is on one page (one file).
The problem I am having, is that on one <section> or one of the "Tabs" if you will, I want to make sure a user has filled out all fields / submitted a form before leaving that section. It is a multi-part multi ajax request form. Thus, if the user has filled out everything and submitted, that's ok. He can leave afterwards.
However, if the user begins the form submission, but doesn't complete, and tries to click on another tab, I want to have a popup like "Stay on Page, "Leave Page".
In the dom, there is I believe a onunload hook that I can use, but I don't know how to do this in jqueryui tabs. Any ideas what hook I can use with the plugin?
My jqueryui tabs code:
$(function() {
$( "#tabs" ).tabs();
});
My html structure:
The navigation:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
The Content:
<div id="tabs" class="container">
<section id="tabs-1">
// Tabs 1 stuff goes here
</secion>
<section id="tabs-2">
// Tabs 1 stuff goes here
</secion>
<section id="tabs-3">
// Tabs 1 stuff goes here
</secion>
</div>
I think you can use something like this event http://api.jqueryui.com/tabs/#event-beforeActivate to achieve that.
$(function() {
$( "#tabs" ).tabs({
beforeActivate: function(e, ui){
if ( ui.oldTab.attr('id') == 'tabs-1' ) {
if (confirm('Sure you want to leave?')) {
return false
}
}
}
});
});
I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.
How can I set the active tab based on a querystring value? With my previous tab solution I was able to pass a querystring value and set the active tab when the page loaded. (I had to abandon this older solution due to other technical challenges.)
When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
How can I set the active tab when a user returns to the Tasks page of my browser application? For example, all within my web application, if the user browses to the Projects page and then returns to the Task page, how can I reset the tab they were previously on?
Javascript:
$(function() {
$("#tabs").tabs();
});
HTML Example code:
<div id="tabs">
<ul>
<li>Description</li>
<li>Action</li>
<li>Resources</li>
<li>Settings</li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
I solved my own jQuery tab issues after additional research and trial and error. Here's a working example. I don't know if this is the most elegant solution but it works. I hope this helps.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({active: document.tabTest.currentTab.value});
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
</script>
</head>
<body>
<form name="tabTest" method="post" action="tab">
<!-- default tab value 2 for Tab 3 -->
<input type="hidden" name="currentTab" value="2"/>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">Tab 1 Content</div>
<div id="tabs-2">Tab 2 Content</div>
<div id="tabs-3">Tab 3 Content</div>
</div>
</form>
</body>
Here's how I answered each of my previous questions.
1. How can I set the active tab based on a querystring value?
I ended up not needing to use a querystring. I added the #tabs-x to the end of my url. For example, if I wanted a link directly to Tab 3 I coded a link as:
localhost:8080/pm/detail?prjID=2077#tabs-3
2. When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
I solved this by capturing the click event, getting the current tab index and then setting a hidden forms element "currentTab" to store the current tab value. Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads.
$(document).ready(function() {
// Set active tab on page load
$("#tabs").tabs({active: document.tabTest.currentTab.value});
// Capture current tab index. Remember tab index starts at 0 for tab 1.
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
3. How can I set the active tab when a user returns to the Project page of my browser application? For example, all within my web application, if the user browses to the Task page and then returns to the Project page, how can I reset the tab they were previously on?
This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". That way when I return the Project page, I can reset the "currentTab" value the same way I set it in the Save forms action.
I hope this example can help someone else with their jQuery tab issues!
jQuery UI Tabs can take in options. The ones that are particularly useful for your questions are cookie and selected. You can read about the options here.
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
Note: Where Sel_tab is hidden field.
onclick on tabs achor link assign value to hidden feild