I have this little code that works great except one thing: If i have my collapsible-set expanded, it will collapse back every 5 seconds because i set setTimeout(loadPage,5000). My question is: How to construct this little code without rewriting, so even if it's expanded it will update without collapsing . . .
$(document).bind('pageinit', function () {
var globalVar = {};
function loadData() {
$.ajax({
url: "http://jsbin.com/wulol/2.js",
async: false,
dataType: 'json',
success: function (data) {
globalVar = data;
}
});
}
function loadPage() {
var items = '';
$.each(globalVar, function (index, item) {
items += "<div data-role='collapsible' id='" + item.id + "'>";
items += "<h3>";
items += "<div class='ui-grid-c'>";
items += "<div class='ui-block-a'>" + item.airline + "</div>";
items += "<div class='ui-block-b'>" + item.number + "</div>";
items += "<div class='ui-block-c'>" + item.people + "</div>";
items += "<div class='ui-block-d'>" + item.time + "</div>";
items += "<div class='ui-block-a'></div>";
items += "<div class='ui-block-b'></div>";
items += "<div class='ui-block-c'></div>";
items += "</div>";
items += "</h3>";
items += "<p><input type='button' value='Button'></p>";
items += "</div>";
});
$("#result").html(items);
$("#result").trigger('create');
setTimeout(loadPage, 5000);
}
function ignite() {
loadData();
loadPage();
}
window.onload = ignite;
});
Here is the working DEMO
I really need your help, people of Earth ! ! !
You can use append() instead of html(), but before you need to check if the item already exist in #result or not.
DEMO : http://jsbin.com/yabopuzu/1/edit
$(document).bind('pageinit', function(){
var globalVar = {};
function loadData(){
$.ajax({
url: "http://jsbin.com/wulol/2.js",
async: false,
dataType: 'json',
success: function(data){
globalVar = data;
}
});
}
function loadPage(){
var items='';
$.each(globalVar,function(index,item)
{
if ($("#result #item"+item.id).size()==0)
{
items+= "<div data-role='collapsible' id='item"+item.id+"'>";
items+= "<h3>";
items+= "<div class='ui-grid-c'>";
items+= "<div class='ui-block-a'>"+item.airline+"</div>";
items+= "<div class='ui-block-b'>"+item.number+"</div>";
items+= "<div class='ui-block-c'>"+item.people+"</div>";
items+= "<div class='ui-block-d'>"+item.time+"</div>";
items+= "<div class='ui-block-a'></div>";
items+= "<div class='ui-block-b'></div>";
items+= "<div class='ui-block-c'></div>";
items+= "</div>";
items+= "</h3>";
items+= "<p><input type='button' value='Button'></p>";
items+= "</div>";
}
});
$("#result").append(items);
$("#result").trigger('create');
setTimeout(loadPage,5000);
}
function ignite(){
loadData();
loadPage();
}
window.onload = ignite;
});
Try adding the data-collapsed="false" attribute ot your wrapper.
Change:
items+= "<div data-role='collapsible' id='item"+item.id+"'>";
To:
items+= "<div data-collapsed="false" data-role='collapsible' id='item"+item.id+"'>";
See the Docs
Related
I am creating dynamic table and appending it to Div tag on my .php page. On my .php page, I have dynamic buttons and if I click on any of the dynamic buttons, the dynamic table is rendered which has multiple headers and rows (for which I have written for loops with ajax requests). The issue is that, if i click on any of the dynamic buttons again, the current dynamic table data is appended to the previous dynamic table, instead I want to remove previously appended table data and render the current dynamic table data. I tried to empty the div tag but nothing seems working here. Hope I get some help, thanks in advance. Below are my .php and .js files:
.php file- I didnt post the function definition for get_Btns() as it is the basic php function to fetch data from the database:
<?php
function get_Btns() {
include "config.php";
$btns = $stmtDivision->fetchAll(PDO::FETCH_ASSOC);
foreach($btns as $btn){
echo "<input type='button' id='".$btn['divisionid']."' value='".$btn['division_name']."'
onclick=getData('".$btn['divisionid']."') >" ; echo "<br/>"; ?>
<script src="./user.js"></script>
<?php }
}
?>
<?php include "templates/header.php"; ?>
<div id="buttons_panel" style="text-align:center">
<?php echo get_Btns();?> </div>
<div id="div" class="divClass" ></div> <br/>
.js file:
function getData(value) {
document.getElementById("div");
var tableHtml = $('<table></table>');
var selectedManager = value;
var isEmpty = $('#div').empty();
// document.getElementById("div").innerHTML === "";
// document.getElementById("div").HTML === "";
// var isEmpty = $("#div").html() === "";
//$(".divclass").empty();
var teams = null;
$.ajax({
url: 'data.php',
method: 'post',
data: 'selectedManager=' + selectedManager,
async: false,
success: function(data) {
teams = JSON.parse(data);
}
});
for (var k = 0; k < teams.length; k++) {
const selectedteam = teams[k];
var selectedteamid = team[k].teamid;
var htmlth = "";
var html = "";
htmlth = "<tr>" + "<th id='thgrp' colspan='4' background-color: #013466;>" + teams[k].teamname + "</th>" +
"<th colspan='2' background-color: #62b8b6;>" + "<a href='Update.php?groupid=" + selectedteam.teamid + "' >" +
'Update Team member' + "</a>" + "</th>" + "</tr>" +
"<tr>" + "<th>" + "<img src='images/member.png'>" + "<b>" + "<div>" + 'Member' + "</div" + "</th>" +
"<th>" + "<img src='images/phone.png'>" + "<b>" + "<div >" + 'Phone' + "</div" + "</th>" +
"<th>" + "<img src='images/email.png'>" + "<b>" + "<div >" + 'Email' + "</div" + "</th>" + "</tr>";
tableHtml.append(htmlth);
var members = null;
$.ajax({
url: 'data.php',
method: 'post',
data: 'selectedteamid=' + selectedteamid,
async: false,
success: function(data) {
members = JSON.parse(data);
console.log(members);
}
});
for (var i = 0; i < members.length; i++) {
html += "<tr>" + "<td>" + members[i].name + "</td>" +
"<td>" + members[i].phone + "</td>" + "<td>" + members[i].email + "</td>";
}
tableHtml.append(html)
}
$("#div").append(tableHtml);
value = "";
}
Issue solved, I tried to empty the dynamic table that I have created instead of emptying the div tag on my html page. I did this earlier but I didn't do it properly. Thank you so much everyone for your time
This is the code:
tableHtml.attr('id', 'tableHtmlId');
$('#tableHtmlId').empty();
In following code i want to run a function when someone click on SELL button(first td) but on click function is not working. it says run function is not defined.
function runfunction() {
alert("success");
}
sendRequest(); //call function
function sendRequest() {
$.ajax({
type: "POST",
url: '<?php echo site_url("ajax/ajax_buybtc"); ?>',
success: function(result) {
var jsonResult = JSON.parse(result);
$(".tab1 tr.tr1").remove();
jsonResult.forEach(function(data) {
var newTr = ""; // I delete the value to avoid double tr declaration
newTr +=
'<tr class="tr1"> <td onclick="runfunction()" style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>';
newTr += "<td id='xbtc " + data.xbtc + "'>" + data.xbtc + "</td>";
newTr += "<td id='xbtc " + data.rate + "'>" + data.rate + "</td>";
newTr += "<td id='xbtc " + data.xpkr + "'>" + data.xpkr + "</td>";
newTr += "</tr>";
$(".tab1 > tbody:last-child").append(newTr);
});
setTimeout(function() {
sendRequest(); //this will send request again and again;
}, 4000);
},
});
}
try to add a click function after adding a class (here I added 'td-click') to the td and remove the onclick attribute from td
$(".tab1").on("click", ".td-click", function(){
alert("success");
})
You need to change onclick="runfunction()" to onclick="runfunction".
Currently what's happening is that the runfunction is executed, and its return value is bound to the onclick event. You want the function itself to be bound, not its return value.
newTr += '<tr class="tr1"> <td onclick="runfunction()" style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>';
move onclick to span tag
newTr += '<tr class="tr1"> <td style="text-align:center;"><a><span onclick="runfunction()" class="label label-warning">Sell</span></a></td>';
https://codepen.io/bot_3310/pen/JajYyY
I was wondering if someone could shed some light on my code and why it may not be working. I am running nodejs 6+ with an electron wrapper.
dependencies for the sqlite are "sqlite3": "^3.1.8
I am managing to list and display the data in rows without issue but on the insert function or search function it is falling over. I must be doing something wrong.
function insertNewVeh() {
db.all("INSERT INTO vehicles VALUES ('" +
document.getElementById('regNo').value + "','" +
document.getElementById('firstName').value + "','" +
document.getElementById('lastName').value +
"')", function(err, rows) {
console.log.msg;
})
}
insertNewVeh();
function srchReg() {
var regNo = document.getElementById("regNo").value
db.all("SELECT ALL FROM VEHICLES WHERE regNo = " + regNo + ""), function(err, rows) {
var reg = document.getElementById("newVehicle").value
rows.forEach(function (row) {
console.log.msg;
document.getElementById('sReg').innerHTML =
"<div>Total</div>"
})
};
};
srchReg();
and the functions
function srchDiv() {
document.getElementById('rSrch').innerHTML =
"<form>" +
"<input type=\"search\" id=\regNo\" placeholder=\"What are you looking for?\">" +
"<button id=\"subSrch\">Search</button>" +
"</form>";
document.getElementById('subSrch').addEventListener("click", function (e) {
srchReg();
});
}
srchDiv();
window.onload = function addVeh() {
document.getElementById('nVeh1').innerHTML =
"<form>" +
"<div class=\"row\">" +
"<label for=\"firstName\" id=\"firstName\">First Name</label>" +
"<input id=\"firstName\" name=\"firstName\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"lastName\" id=\"lastName\">Last Name</label>" +
"<input id=\"lastName\" name=\"lastName\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"address1\" id=\"address1\">Address 1</label>" +
"<input id=\"address1\" name=\"address1\" type=\"text\" />" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"address2\" id=\"address2\">Address 2</label>" +
"<input id=\"address2\" name=\"address2\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"town\" id=\"town\">Town</label>" +
"<input id=\"town\" name=\"town\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"postcode\" id=\"postcode\">Post Code</label>" +
"<input id=\"postcode\" name=\"postcode\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"telephone\" id=\"telephone\">Telephone</label>" +
"<input id=\"telephone\" name=\"telephone\" type=\"tel\"/>" +
"</div>";
document.getElementById('nVeh2').innerHTML =
"<div class=\"row\">" +
"<label for=\"regNo\" id=\"regNo\">regNo</label>" +
"<input id=\"regNo\" name=\"regNo\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<button type=\"submit\" value=\"Add\" id=\"addV\"/>Add</button>" +
"</div>" +
"</form>";
document.getElementById('addV').addEventListener("click", function (e) {
insertNewVeh();
});
}
addVeh();
I am relatively sure it's a syntax error somewhere but can't see it as I am still new to javascript. In either function the search doesnt work, nor does it insert anything to the database.
Note the 'return false', since your are submitting a form
function insertNewVeh() {
const self = this
db.serialize(
function () {
let stmnt = db.prepare('INSERT INTO vehicles VALUES (?, ?, ?)')
stmnt.run(document.getElementById('regNo').value, document.getElementById('firstName').value, document.getElementById('lastName').value, function () {
stmnt.finalize(function () {
// Here goes your callback, if you need one
// self.doSomeThing()
})
})
}
)
return false
}
I retrieve data from an API and I want to get it in my bootstrap layout.
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<div class='row'>";
html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
html += "<span class='item-description'>" + item.description + "</span>";
html += "</div>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
I tried this, but it is not working? why?
Well, just add a container to your DOM where the markup should be added.
<div class="js-table-container"></div>
And then add the html to this container
var html = "";
$.each(data.results, function(index, item) {
html += "<div class='row'>";
html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
html += "<span class='item-description'>" + item.description + "</span>";
html += "</div>";
});
$('.js-table-container').html(html);
If i understand your problem correctly, that's all.
If you what this data to come after or before an element in Dom use jquery insertAfter or insertBefore. Why are you using timeout function?
You can directly add to Dom after processing.
> $.ajax({
> url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>'
> }).done(function(data) {
> console.log(data);
>
> var html = "";
> $.each(data.results, function(index, item) {
> html += "<div class='row'>";
> html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
> html += "<span class='item-description'>" + item.description + "</span>";
> html += "</div>";
> });
> // if you want to load all data inside this container use html
> $(".container").html(html);
> // if you want to load after this
> $(".container").insertAfter(html);
> // if you want before this
> $(".container").insertBefore(html);
I am trying to remove everything in my string after space like so:
value.baseOrSchedStartList[i].substring(0, value.baseOrSchedStartList[i].indexOf(' '))
But I get this error:
Uncaught TypeError: Cannot read property 'substring' of undefined
What am I doing wrong ? This is inside an ajax call...here is the full ajax call:
$.ajax({
type: "GET",
url: "/vendorProject/api/connection/getVendorItems?community=" + $("#communtiyDropdown").val(),
dataType: 'json',
cache: false,
success: function (results) {
var html;
html = "<table border='1'>";
html += "<tr>";
html += "<th>Task</th>";
$.each(results, function (key, value) {
html += "<th>" + key + "</th>";
});
html += "<th></th>";
html += "</tr>";
for (i = 0; i < taskArray.length; i++) {
html += "<tr>"
html += "<td>" + taskArray[i] + "</td>";
$.each(results, function (key, value) {
html += "<td>" + value.baseOrSchedStartList[i].substring(0, value.baseOrSchedStartList[i].indexOf(' ')) + "</td>";
});
html += "<td><input type='checkbox' name='checkbox' id='checkbox' /></td>"
html += "</tr>";
}
html += "</table>";
$("#tableData").html(html);
}
});
The string in question is 12-12-2015 08:00:00 AM and I looking for 12-12-2015....no time.
Try to substr :)
$("button").on("click",function(){
var a = $("input").val();
var cropped = a;
if(a.indexOf(" ")>=0) cropped = a.substr(0,a.indexOf(" "));
$("b").html(cropped);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' placeholder='write something here and hit the button' style='width:60%;'>
<br>
<button>Ready!</button>
<br>
<div>
The result without space and after all : <b></b>
</div>