Question

我正在使用jQuery-UI进行我的标签设计，而我在第二个标签中有一个表单，当我填充数据并按“提交”时，整个页面都被加载（我知道，因为表单位于第二个选项卡中，页面返回以显示提交后的第一个选项卡。

如何才能使当前标签加载/刷新？

HTML code：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
    <script src="tabsJquery.js"></script>
</head>

<body>
<h1>Trader's Friend</h1>
<h2></h2>


<!-- Tabs -->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Market Overview</a></li>
        <li><a href="pages/page1.html">Portfolios</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

page1.html：

<!DOCTYPE html>
<html>
<head>
    <title>Create New Portfolio</title>
    <script src="portfolio.js"></script>
    <script src="tabsJquery.js"></script>

</head>
<body>

<form  name="portfolio" id="portfolio" method="post" onsubmit="createNewPortfolio()">
    <p class="ui-widget-header" id="newPortfolioHeader" >General Info</p>
    Portfolio   Name:   <input type="text" id="portfolioName" name="portfolioName" value="test1"><br>
    Owner First Name:   <input type="text" id="ownerFName" name="ownerFName" value="eyal"><br>
    Owner Last  Name:   <input type="text" id="ownerLName" name="ownerLName" value="becker"><br>
    Init Amount:        <input type="number" id="initAmount" name="initAmount" value="1000"><br>
    Date:               <input type="text" id="datepicker" name="date" ><br>
    <p class="ui-widget-header" id="newPortfolioHeader" >Risk Management</p>
    Stocks (%):           <input type="number" id="stocksPerc" name="stocksPerc" value="50"><br>
    NonStocks (%):         <input type="number" id="nonStocksPerc" name="nonStocksPerc" value="50"><br>
    Risk In Stocks (%):    <input type="number" id="riskInStocksPerc" name="riskInStocksPerc"value="5"><br>
    Risk In nonStocks (%): <input type="number" id="riskInNonStocksPerc" name="riskInNonStocksPerc" value="5"><br>
    <input type="submit" value="submit">
</form>

</body>
</html>

createNewPortfolio（）：

function createNewPortfolio() {


    var portfolioName = document.portfolio.portfolioName.value;

    var ownerFname = document.portfolio.ownerFName.value;
    var ownerLname = document.portfolio.ownerLName.value;
    var initAmount = document.portfolio.initAmount.value;
    var dateVal = document.portfolio.date.value;
    //alert(portfolioName + ownerFname + ownerLname + dateVal);
    var stocksPerc = document.portfolio.stocksPerc.value;
    var nonStocksPerc = document.portfolio.nonStocksPerc.value;
    var riskInStocksPerc = document.portfolio.riskInStocksPerc.value;
    var riskInNonStocksPerc = document.portfolio.riskInNonStocksPerc.value;
    //alert(stocksPerc + nonStocksPerc + riskInStocksPerc + riskInNonStocksPerc);

    var myNewPortfolioJsonObj = {

        "general": {
            "portfolioName": portfolioName,
            "ownerFname": ownerFname,
            "ownerLname": ownerLname,
            "initAmount": initAmount,
            "date": dateVal
        },
        "riskManagement": {
            "stocksPerc": stocksPerc,
            "nonStocksPerc": nonStocksPerc,
            "riskInStocksPerc": riskInStocksPerc,
            "riskInNonStocksPerc": riskInNonStocksPerc
        }


    };
    //alert(JSON.stringify(myNewPortfolioJsonObj));
    localStorage.setItem('Portfolios', JSON.stringify(myNewPortfolioJsonObj));
     //event.preventDefault();
}

tabsJquery.js：

$(function() {
    $( "#tabs" ).tabs();

    $( "#datepicker" ).datepicker({
        inline: true
    });
});

由于斯万

jQuery选项卡设计只刷新一个选项卡内容

0 个答案: