0

タブのデザインにjQuery-UIを使用しています.2番目のタブにフォームがあり、データを入力して「送信」を押すと、ページ全体が読み込まれます（フォームが2 番目のタブが表示され、ページは送信後に最初のタブを表示するように戻ります)。

現在のタブの読み込み/更新のみを行うにはどうすればよいですか?

HTML コード:

<!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
    });
});

ありがとうシヴァン

4

0 に答える 0