Solved

create tabs dynamically, issues with href

Posted on 2013-05-13
5
425 Views
Last Modified: 2013-05-26
I found code to create tabs dynamically.  I have "sections" that have ids like "FC", "CC", and such.  I am trying to get the tabs to have the ID/href structure like:
<div id="tabs">
     <ul>
         <li> <a href="#FC"> tab header here </a></li>
     </ul>
      <div id="FC"> here is tab content </div>
</div>

Open in new window


But using the code below, the hfef for the tab is the url + parameters + #FC.

How do I just get the FC?
    function createTabs(){
        var tabs = $("#tabs").tabs();
        var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
        tabCounter = 0;

        var varParams = "" ;
        $.getJSON( 'DynamicReturn.asp',{proc:"GetPMSections",params: varParams}, function (data) { 
            $.each(data, function (key, value) {
                var label =  value.ButtonText,
                    id = value.HeaderID ,
                    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
                tabs.find( ".ui-tabs-nav" ).append( li );
                tabs.append( "<div id='" + id + "'></div>" );
                tabs.tabs( "refresh" );
                tabCounter++;

                fillTab(value.HeaderID);
            });
            tabs.tabs('select', 0);
            //startCheck=true;
        });
    }

Open in new window

or if better, I am trying to assign the 'FC'  to currTab by using the code below:
  $(function() {
    $("#tabs" ).tabs({
        beforeActivate: function(event,ui){
            alert('current: ' + currTab);
            if (startCheck){return (saveForm()==1);}
        },
        select: function( event, ui ) {
            currTab=$(ui.tab).attr('href');
        }
    })
  });

Open in new window

0
Comment
Question by:KCTechNet
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39163506
please provide a link to your page
0
 

Accepted Solution

by:
KCTechNet earned 0 total points
ID: 39163602
Sorry This is an intranet page but pretty much all the tab generating code is shown in the post.

I did come up with a work around by getting everything after the last pound sign, but I gotta keep the question open because I would like to know why the attrib is returning the url.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39163609
if it's intranet, right click on the page, choose view source to post it here
remove/replace any sensitive data (but not the tags) if needed
0
 

Author Comment

by:KCTechNet
ID: 39165068
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  
<script type="text/javascript"> 
 
// get querystring as an array split on "&"
    var querystring = location.search.replace( '?', '' ).split( '&' );
    var urlParams = {};
    // loop through each name-value pair and populate object
        for ( var i=0; i<querystring.length; i++ ) {
              var name = querystring[i].split('=')[0];
              var value = querystring[i].split('=')[1];
              urlParams[name] = value;
        }
 
//get paramaters from URL
    var programID = urlParams["programID"];
    var fiscalStart = urlParams["fy"];
    var qtrNumber = urlParams["qtr"];
    var leaderID = urlParams["leaderID"];
    var rFlag = urlParams["rFlag"];
    var answerHeaderID = urlParams["ahID"];
 
    function newWindow() {
        if (saveForm()) {
            var rndNum=Math.floor(Math.random()*100000);
            window.location.href = 'PMQtrProgressReport.asp?rnum=' + rndNum + '&id=' + urlParams["leaderID"];                
        }
    }       
        
    var currTab="";
    var startCheck=false;
  
  $(function() {
    $("#tabs" ).tabs({
        beforeActivate: function(event,ui){
            if (startCheck){return (saveForm()==1);}
        },
        select: function( event, ui ) {
            currTab=$(ui.tab).attr('href');
            var n = currTab.lastIndexOf("#");
            currTab = currTab.substring(n+1);
        }
    })
  });
 
    function createTabs(){
        var tabs = $("#tabs").tabs();
        var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
        tabCounter = 0;
 
        var varParams = "" ;
        $.getJSON( 'DynamicReturn.asp',{proc:"GetPMSections",params: varParams}, function (data) { 
            $.each(data, function (key, value) {
                var label =  value.ButtonText,
                    id = value.HeaderID ,
                    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
                tabs.find( ".ui-tabs-nav" ).append( li );
                tabs.append( "<div id='" + id + "'></div>" );
                tabs.tabs( "refresh" );
                tabCounter++;
 
                fillTab(value.HeaderID);
            });
            tabs.tabs('select', 0);
            startCheck=true;
        });
    }
    
    function fillTab (strSection){
        var strHTML="", strTable="", strTH="", strTR="", strRows="", strTD="",strForm="";
 
        var varParams = '"' + strSection + '"' + ',' + answerHeaderID;
        var randomnumber=Math.floor(Math.random()*100000);
        $.ajaxSetup({ cache: false });
        $.getJSON( 'DynamicReturn.asp?rn='+ randomnumber,{proc:"GetPMSurveyResponses",params: varParams}, function (data) { 
            if (data) {                    
                strForm = '<form id="form' +strSection+ '" method="post">'
                strTable ='<table border = "1" width="100%" id="Table1' +strSection+ '">' +
                    '<col width="50%"/>' +
                    '<col width="50%"/>' 
                
                $.each(data, function (key, value) {
                    strHTML = '<center><h3>' + value.HeaderText + '</h3></center>' 
                    if (strTH == "") {strTH = '<tr><th id="th1' +strSection + '">' + value.Question1 + '</th><th id="th2' +strSection + '">' + value.Question2 + '</th></tr>'};
                    strTR = "<tr>"
                    strTD = "";
                    
                    if (value.TableGroupID=="1"){
                        for (var intColumnLoop=1;intColumnLoop<3;intColumnLoop++) {
                                if (value["AnswerType" + intColumnLoop] == "checkbox") {
                                    strTD+= "<td class='Side" + intColumnLoop + "'> <input type = 'checkbox'"; //we can add up #table1 class=Side1 to see if side was answered
                                    strTD +=  " name='" + value["QuestionID" + intColumnLoop] + "' value=1 '"; 
                                    if (value["ItemResponse" + intColumnLoop] == "1") {
                                        strTD+= " checked "
                                    }
                                    strTD+= "'/>";
                                    strTD+= value["OptionText" + intColumnLoop] +  '</td>' ;
                                }    
                                else if (value["AnswerType" + intColumnLoop] == "Memo") {
                                    strTD = "<td>" + value["OptionText" +intColumnLoop];
                                    strTD +=  "<textarea ";
                                    strTD +=  " name='" + value["QuestionID" + intColumnLoop] + "'";
                                    strTD +=  " cols='80' rows='5'>"
                                    if (value["ItemResponse" + intColumnLoop] != null) {
                                        strTD +=   value["ItemResponse" + intColumnLoop];
                                    }
                                    strTD +=  "</textarea></td>";
                                }
                        }
                        
                        if (value["OptionSortOrder1"] != "99") {
                            strTR += strTD + "</tr>";
                            strRows += strTR
                        }
                        else
                        (
                            strRows += '</table>' +
                                        '<table border = "1"  cellpadding="0" cellspacing="0" width="100%" id="Table99' +strSection + '">' +
                                        '<tr align="center"  border="0" ><td>' + strTD +  '</td></tr>'
                        )
                    }
                    else {
                        strTD = value.Question1 + "</br>";
                        strTD +=  "<textarea ";
                        strTD +=  " name='" + value.QuestionID1 + "'";
                        strTD +=  " cols='80' rows='5'>";
                        if (value.ItemResponse1 != null) {
                            strTD +=  value.ItemResponse1 
                        }
                        strTD +=  "</textarea></td>";
                        
                        strRows += '</table>' +
                                    '<table border = "0" width="100%" id="TableMemo' +strSection + '">' +
                                    '<tr><td>' + strTD +  '</td></tr>'
                        
                    }
                     
                }); // end each
                
                strHTML += strForm + strTable + strTH + strRows +  '</table>'
                strHTML += '<input name="sHeaderID" id="sHeaderID" type="hidden" value="' + strSection + '" />';
                strHTML += '</form>';
                
                $('#'+strSection).html(strHTML);
                
            }
            else
            {
                $('#grid1').append( 'There was no data to display' );
            }
        }) //end getJSON
    .fail ( function( jqxhr, textStatus, error ) {
        var err = textStatus + ', ' + error;
        $('#grid1').append( err );
        $('#btnSave').hide;
    }); //end fail     
    }
    
    function saveForm() {
        var canContinue = 1;
        var n      
 
            $('#th1'+currTab).css("background-color","");
            $('#th2'+currTab).css("background-color","");
            n = $('#Table99'+currTab).find(":checkbox:checked").size();
            if (n == 0) {
 
                n = $('.Side1', '#Table1'+currTab).find(":checkbox:checked").size();
                if (n == 0) {
                    $("#th1"+currTab).css("background-color","red");
                    canContinue = 0;
                }
                
                n = $('.Side2', '#Table1'+currTab).find(":checkbox:checked").size();
                if (n == 0) {
                    $("#th2"+currTab).css("background-color","red");
                    canContinue = 0;
                }   
            }
            
            if (canContinue==0){
                alert('If not fully explored/implemented, then you need to select at least one item in the first and second column');
            }
            else {
                 var formData = $('#constants,#form'+ currTab).serialize();
                 $('#outputArea').html('http://bhrsweb:8080/QtrProgressReports/savePMSurvey.asp?' + formData);  //just to make sure formData is correct
                  $.get('savePMSurvey.asp',formData, function(data){
                        answerHeaderID = data;
                        $('#answerHeaderID').val(data);
                  }); //end get
            }
            return canContinue;
    }
    
    $(document).ready( function(){
        createTabs();
        
        var strHeader = "Program: " + "</br>";          //GetProgramName  value.id
            var dtFY = new Date(fiscalStart).getFullYear()
            strHeader += "Fiscal Year: " + dtFY + "/" + (dtFY+1) + "</br>";
            strHeader += 'Quarter: ' + qtrNumber + '</br></br>';
            strHeader += '<input type="button" name="btnDone" value="Submit" onClick="newWindow()" />'
            $('#headerArea').html(strHeader);
        
        $('#constants').html(
            '<input  name="programID" id="programID" type="hidden" value="' + programID + '" />' +
            '<input  name="fiscalStart" id="fiscalStart" type="hidden" value="' + fiscalStart + '" />' +
            '<input name="leaderID" id="leaderID" type="hidden" value="' + leaderID + '" />' +
            '<input name="rFlag" id="rFlag" type="hidden" value="' + rFlag + '" />' +
            '<input name="answerHeaderID" id="answerHeaderID" type="hidden" value="' + answerHeaderID + '" />' +
            '<input name="qtr" id="qtr" type="hidden" value="' + qtrNumber + '" />'
            
        );
    }); // end ready
    
</script>     
 
<body>
    <div id="headerArea"></div>
 
    <div id="tabs">
        <ul></ul>
        <div id="tabContent"></div>
    </div>
    <form id="constants" method="post"></form>
 
    
    <div id="grid1"></div>
 
    <div id="outputArea"></div>
</body>    
</html>

Open in new window

0
 

Author Closing Comment

by:KCTechNet
ID: 39197437
I guess the URL is part of the hfref and my work_around was needed.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question