Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

create tabs dynamically, issues with href

Posted on 2013-05-13
5
Medium Priority
?
449 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
  • 3
  • 2
5 Comments
 
LVL 83

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 83

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

876 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