私は、変数からjqueryダイアログにrefreshingせずに変数をプルしようとしています

私はここでこれを達成しようとしていることを説明していますか？私は、変数からjqueryダイアログにrefreshingせずに変数をプルしようとしています

変数にテーブルが設定されていて、Jqueryダイアログボックスにテーブルを表示したいのですが、更新するときのみ可能です。ボタンをクリックしてダイアログボックスを開くと、ロードする方法はありますか？

私は立ち往生して、バナナを運転しています。

フィードバックありがとうございます。

ここで基本的なコードだ...

$(function() { 
    $("#dialog").dialog({ 
    autoOpen: false, 

    }); 

    $("#opener").on("click", function() { 
    $("#dialog").dialog("open"); 
    }); 
    }); 


<div id="dialog" title="Basic dialog"> 
<p>#myVariable</p> 
</div> 

<button id="opener">Open Dialog</button>

................................ ............................

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Fli</title> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="https://resources/demos/style.css"> 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 


<style> 

.ui-widget-overlay { 
    background: rgba(0,0,0,0.9); 
} 
.ui-button { 
     background-color:#1C2733; 
     height:60px; 
     width:200px; 
     color:white; 
     border-color:#1C2733; 
     border-radius:0px; 
    } 
    .ui-button:active { 
     background-color:#0E1F21; 
     color:white; 
    } 
    .ui-button:hover { 
     background-color:#0E1F21; 
     border-color:#1C2733; 
     color:white; 
    } 
    .ui-button:link { 
     background-color:#0E1F21; 
     color:white; 
    } 
    label { 
     font-size:13px; 
    } 
    .button-SD { 
    background-color: #FF3F00; 
    border: none; 
    color: white; 
    padding: 10px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
    width:100%; 
    border-radius: 4px; 
    } 
    .button-SD:hover { 
    background-color: #FB7005; 
    color: white; 
} 
#sd-search-form { 
    padding: 0 15px; 
    margin-left: -18px; 
} 
input[type=text], select { 
    width: 100%; 
    padding-left: 15px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    height:30px; 
    font-size:12px; 
} 

input[type=submit] { 
    width: 100%; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
}input[type=checkbox] { 
    font-size: 13px; 
} 
input[type=radio] { 
    font-size:13px; 
} 

input[type=submit]:hover { 
    background-color: #45a049; 
} 
option { 
    font-size: 13px; 
} 
input { 
    font-size: 13px; 
} 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    font-size: 13px; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    font-size: 13px; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    font-size: 13px; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    font-size: 13px; 
} 
.ui-dialog { 
    position: absolute; 
    height: auto; 
    top: 62px; 
    left: 0px; 
    display: block; 
    width: 287px; 
} 
#sdopener { 
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABZUlEQVQ4jb3TQU7CQBQA0H8Ej+ARuAA34AT2Em5IXDUGCKZthITQCSlmphAaKm1aaAJRNMWFG9gYNtUS2CgutLCBtRkXpAkabYsl/uSvJv/lz/w/ADsEK6qMgNtYwG18ippHu9R+ibykVZBuTweTBR0vKR0vKR1MFhTp9jQvaZWdMJ5Yfdv1Vj70PW3XW/HE6kfuLAjbRiN1emHdP4VhfiLdngVirKgy228WloPJgrKiyvwKcsSUo2J+csSU/w/c+5X3PhQAgFxVwzePbx8R1mYdujbHRXJQUrqj8mWfBqG2661DFzvNSwkeG05v6NCS0h3lqhpGuj374evNQjvbxnhsOCdn5NA/Y0WV4Ygpc8SUQwcAAJBBzWSh1nnxsTQvJUKLgrBi3XrvDR16XuvMY2OodT3vDR1aqFteBjWTf8ay5UbKx1Dr6jUWtulOEYy7B1o1bp9jYwCbfcsgRciWG6nYGAB8As5qVlsy+41jAAAAAElFTkSuQmCC") 50px center no-repeat; 
    height:60px; 
} 
#sdopener:hover { 
     background-color:#0E1F21; 
     border-color:#1C2733; 
     color:white; 
} 
.ui-dialog .ui-resizable-se { 
    width: 14px; 
    height: 14px; 
    right: 3px; 
    bottom: 3px; 
    background-position: -80px -224px; 
} 

</style> 


</head> 

<body> 

<!-- Navigation Buttons Start --> 

<div id="menu" style="background-color:#1C2733; width:100%; height:60px; margin-top: -8px; margin-left: -8px; padding-right:16px"> 

<input name="SDSearchDialogOpener" type="button" class="ui-button ui-widget ui-corner-all" id="sdopener" style="margin-left:-18px" value="    SD Search"> 

<!-- SD Search Start --> 

    <div id="sddialog" title="SD Search"> 

    <label for="sdkeyword">Seed Keyword(s):</label> 
    <input type="text" id="TextBoxKW" placeholder="ie. iphone case" variable="#TextBoxKW"> 
    <br> 

<div class="ratings"> 
    <label for="rating">Rating:</label><br> 
    <input type="radio" id="TwoThumbs" name="Rating" fillwith="checked" variable="#TwoThumbs" /> 
    <span style="font-size: 13px"> 2+ Rating</span><br> 
    <input type="radio" id="OneThumbs" name="Rating" fillwith="checked" variable="#OneThumbs" /> 
    <span style="font-size: 13px"> 1+ Rating</span><br> 
    <input type="radio" id="ZeroThumbs" name="Rating" fillwith="checked" variable="#ZeroThumbs" /> 
    <span style="font-size: 13px"> 0 Rating</span><br> 
    <input type="radio" id="AllThumbs" name="Rating" fillwith="checked" variable="#AllThumbs" /> 
    <span style="font-size: 13px"> All Ratings</span> 
    </div> 
    <br> 

    <label for="price">Price:</label><br> 
    <input type="text" id="PriceLow" style="width:101px" placeholder="$ min" variable="#PriceLow"> - 
    <input type="text" id="PriceHigh" style="width:101px" placeholder="$ max" variable="#PriceHigh"> 
    <br> 

    <select id="DropDownDate" variable="#DropDownDate" style="font-size: 13px"> 
     <option value="Any Time"><span style="font-size: 13px">Any Time</span></option> 
     <option value="Past Week"><span style="font-size: 13px">Past Week</span></option> 
     <option value="Past 2 Weeks"><span style="font-size: 13px">Past 2 Weeks</span></option> 
    </select> 
    <br> 


<input class="button-SD" type="button" value="Search" id="sdopener2" onclick="ubot.runScript('ProductSearch()')" /> 
</div> 
<br> 
<br> 
<br> 
<br> 
<br> 
    <!-- <input class="button ButtonResults ButtonResultsinput" type="button" value="Return to results" id="ButtonResults" style="width:240px; visibility:hidden; height:20px" onclick="ubot.runScript('Back to Search Results()')" /> --> 


<div id="sddialog2" title="Search Progress"> 


<input class="button-SD" type="button" value="View Search Results" id="sdopener3" style="width:300px;" /> 
</div> 

<div id="sddialog3" title="Search Results"> 
<div>HERE'S WHERE THE TABLE CHART VARIABLE WILL GO</div> 
</div> 



<!-- SD Search End --> 



<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script> 



<script> 

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

$("#sdopener").click(function() { 
    $("#sddialog").dialog("open"); 
}); 
$("#sddialog").dialog({ 
    autoOpen: false, 
    modal: false, 
    position: [0,61], 
    width: 289, 
    height: 642, 
    open: function (event, ui) { 
     $(".ui-dialog #sdopener2").click(function() { 
      $("#sddialog2").dialog("open"); 
     }); 
    } 
}); 

$("#sddialog2").dialog({ 
    autoOpen: false, 
    modal: true, 
    width: 335, 
    height: 250, 
    open: function (event, ui) { 
     $(".ui-dialog #sdopener3").click(function() { 
      $("#sddialog3").dialog("open"); 
     }); 
    } 
}); 

$("#sddialog3").dialog({ 
    autoOpen: false, 
    modal: false, 
    position: [298,61], 
    width: '900', 
    height: 642, 
    resizable: true, 
    handles: "all", 
    autoHide:true 
}); 

</script> 
<body> 
</body> 
</html>

出典

2017-04-16 Light

どこコードはありますか？ – julekgwa

この目的のために多くの資料があります。いくつかの明確な例を挙げて、完全な機能とデザインを実現します。

Jquery Modal

これを試してみてください：

$(function() { 
    $("#dialog").dialog({ 
    autoOpen: false, 

    }); 

    $("#opener").on("click", function() { 
    $("#dialog").dialog("open"); 
    $("#content").html($("#tables").html()); 
    }); 
    }); 


<div id="dialog" title="Basic dialog"> 
<p id="content">#myVariable</p> 
</div> 

<button id="opener">Open Dialog</button> 

<div style="display: none;" id="tables"> 
    Write here to show in modal... 
</div>

出典

2017-04-16 06:37:22

あなたの返信してくれてありがとう、しかし私はあなたが提供したリンクで何を探しているのかわからない。変数を取る方法についてより具体的なものを私に送ってください。ダイアログを開くためにクリックすると、その変数の内容がダイアログボックスに表示されます。変数の内容を表示するには、まずリフレッシュする必要があるようです。ありがとう。 – Light

リンクをクリックするとダイアログが表示されますか？ –

はいダイアログが表示されますが、更新しない限り変数データは表示されません。 – Light

私は、変数からjqueryダイアログにrefreshingせずに変数をプルしようとしています

答えて

関連する問題