Display Scrape Data Then Display In Jquery Dialog Box...

wizeone17 · April 20, 2017

Hello Guys/Gals,

I'm using the ui html panel and I'm trying to populate a Jquery dialog box with scraped data. The only way it seems to populate is after I refresh the ui html panel by clicking another tab then returning.

Is there a way to display that scraped data without a refresh?

Thanks!

deliter · April 20, 2017

post some code

wizeone17 · April 21, 2017

Thanks for replying deliter, here's the code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FlikBay</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;
	;
}
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; ; padding-right:16px">

<input name="SDSearchDialogOpener" type="button" class="ui-button ui-widget ui-corner-all" id="sdopener" style=";

<!-- 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>
</html>

deliter · April 21, 2017

you'l need the dom to render it, Ive written many scripts for clients but not much UI's with the Ubot UI thing,

I remember before I did have some crazy way of having an invisible element thats innerHTML was a ubot variable, when the variable changed it changed the elements innerHTML, and I had a recursive function that basically kept checking the element every second or so, if changed, update another element with that data, of course that is super complicated for what sounds like an easy enough task, I waited before replying to see if someone who knows more about Ubots UI HTML Panel could post an easier solution, and I could learn something too

I'l write that up on Monday if you dont get a response by then

HelloInsomnia · April 21, 2017

Which box and with what data? Do we need the rest of the script?

wizeone17 · April 22, 2017

Ok sound good deliter. I appreciate your time.

you'l need the dom to render it, Ive written many scripts for clients but not much UI's with the Ubot UI thing,

I remember before I did have some crazy way of having an invisible element thats innerHTML was a ubot variable, when the variable changed it changed the elements innerHTML, and I had a recursive function that basically kept checking the element every second or so, if changed, update another element with that data, of course that is super complicated for what sounds like an easy enough task, I waited before replying to see if someone who knows more about Ubots UI HTML Panel could post an easier solution, and I could learn something too

I'l write that up on Monday if you dont get a response by then

wizeone17 · April 22, 2017

I have a dialog box popup box and I want it to display an html table I scraped. The table doesn't display unless if refresh it. I need it to display when I press the button that opens the dialog.

Which box and with what data? Do we need the rest of the script?

wizeone17 · April 26, 2017

Can you still help me deliter? I still haven't figured it out.

you'l need the dom to render it, Ive written many scripts for clients but not much UI's with the Ubot UI thing,

I remember before I did have some crazy way of having an invisible element thats innerHTML was a ubot variable, when the variable changed it changed the elements innerHTML, and I had a recursive function that basically kept checking the element every second or so, if changed, update another element with that data, of course that is super complicated for what sounds like an easy enough task, I waited before replying to see if someone who knows more about Ubots UI HTML Panel could post an easier solution, and I could learn something too

I'l write that up on Monday if you dont get a response by then

deliter · April 26, 2017

ok so you want the dialog box to display a list of items that ubot scraped? dissapointed I thought there was an easy way of doing this but if you dont know javascript it wont help you much for the next time you try to do this

wizeone17 · April 27, 2017

Yes I scraped data and added to table. It works and looks great but only populates data on refresh.

ok so you want the dialog box to display a list of items that ubot scraped? dissapointed I thought there was an easy way of doing this but if you dont know javascript it wont help you much for the next time you try to do this

deliter · April 27, 2017

Im not exactly sure what you need but this should be enough to get you going, so you need the part in the script to dynamically update like a table etc from ubot in the code where it says "HERE'S WHERE THE TABLE CHART VARIABLE WILL GO"

run this script, see the varThree variable at the end of the page, whenever that value changes it is reflected in that table chart div

so leave the ui open go to the pop up where it says heres where the table chart, then click run on varThree variable to initialize it and it is immediately updated

ui html panel("<!doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title>FlikBay</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;
	;
\}
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 -->
<input type=\"hidden\" id=\"invElem\" variable=\"#varThree\" onChange=\"updateTable()\" />

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

<input name=\"SDSearchDialogOpener\" type=\"button\" class=\"ui-button ui-widget ui-corner-all\" id=\"sdopener\" />


    <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 id=\"tableChart\">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
\});


function updateTable()\{



    $(\"#tableChart\")[0].innerHTML =    $(\"#invElem\")[0].value
    
\}
</script>
</body>
</html>",600)
set(#varThree,"<table id=\"customers\">
  <tbody><tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</tbody></table>","Global")

wizeone17 · April 28, 2017

Thanks deliter, I will give this a try tomorrow when I return from work! Thank You!!!

Im not exactly sure what you need but this should be enough to get you going, so you need the part in the script to dynamically update like a table etc from ubot in the code where it says "HERE'S WHERE THE TABLE CHART VARIABLE WILL GO"

run this script, see the varThree variable at the end of the page, whenever that value changes it is reflected in that table chart div

so leave the ui open go to the pop up where it says heres where the table chart, then click run on varThree variable to initialize it and it is immediately updated

ui html panel("<!doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title>FlikBay</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;
	;
\}
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 -->
<input type=\"hidden\" id=\"invElem\" variable=\"#varThree\" onChange=\"updateTable()\" />

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

<input name=\"SDSearchDialogOpener\" type=\"button\" class=\"ui-button ui-widget ui-corner-all\" id=\"sdopener\" />


    <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 id=\"tableChart\">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
\});


function updateTable()\{



    $(\"#tableChart\")[0].innerHTML =    $(\"#invElem\")[0].value
    
\}
</script>
</body>
</html>",600)
set(#varThree,"<table id=\"customers\">
  <tbody><tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</tbody></table>","Global")

wizeone17 · April 28, 2017

That works great deliter! Any reason why it's not displaying the tables pagination, sortable columns, search box, etc?

http://oi68.tinypic.com/2prznvb.jpg

Im not exactly sure what you need but this should be enough to get you going, so you need the part in the script to dynamically update like a table etc from ubot in the code where it says "HERE'S WHERE THE TABLE CHART VARIABLE WILL GO"

run this script, see the varThree variable at the end of the page, whenever that value changes it is reflected in that table chart div

so leave the ui open go to the pop up where it says heres where the table chart, then click run on varThree variable to initialize it and it is immediately updated

deliter · April 29, 2017

You are using datatables , this needs to be initialized on the new table, there's an example to do this in there docs I think, any trouble let me know

wizeone17 · April 29, 2017

Ok thanks for your help!

You are using datatables , this needs to be initialized on the new table, there's an example to do this in there docs I think, any trouble let me know

wizeone17 · April 30, 2017

I can't find a solution deliter, can you help me?

You are using datatables , this needs to be initialized on the new table, there's an example to do this in there docs I think, any trouble let me know

deliter · May 1, 2017

sorry man dont know its not easy

wizeone17 · May 1, 2017

Thanks for all the help! I'll keep going at it.

sorry man dont know its not easy

Display Scrape Data Then Display In Jquery Dialog Box...

Recommended Posts

wizeone17 7

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

wizeone17 7

Link to post

Share on other sites

Join the conversation