var intervalID;
function autoUpdateFeed()
{
if( document.autoupdatefeedform.autoupdatefeed.checked == true )
{
intervalID = setInterval(updateFeed, 1000);
} else {
clearInterval(intervalID);
}
}
function updateFeed()
{
var oRequest;
try {
oRequest=new XMLHttpRequest();
} catch (e) {
try {
oRequest=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
oRequest=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
oRequest.onreadystatechange=function()
{
if(oRequest.readyState==4)
{
//Start of problem.
var newfeedstable = document.getElementById("newfeeditems");
var newcontent = document.createElement('tr');
newcontent.innerHTML = oRequest.responseText;
while (newcontent.firstChild)
{
newfeedstable.insertBefore(newcontent.firstChild, newfeedstable.firstChild);
}
//End of problem.
}
}
oRequest.open("GET","back/newsfeedlatest.php",true);
oRequest.send(null);
}
Here is the JavaScript code I and my friend are currently using to add new status updates to a table for new status updates on our work-in-process social networking site, the problem is when the new elements are added to the table, they tile to the side, instead of tiling downwards, so I need to know why this is happening and how to fix it, any ideas? For more information, look at the website, you may have to make an account but feel free to use a fake email until we start using email activation again. http://friendgrid.com/
Here's a screenshot of the problem for further reference: http://dl.dropbox.com/u/2281426/Newsfeed%20Error.bmp
The issue would be at the line inside the While:
newfeedstable.insertBefore(newcontent.firstChild, newfeedstable.firstChild);
There the first parameter should be only newcontent without the .firstChild, the firstChild would be inserting only that element and not the newly created <TR>
Altough i suggest you to use DOM methods to modify tables, something easier like:
TableElement.insertRow( 0).innerHTML = oRequest.responseText;
TableElement in your case would be newfeedstable, which if you don't need it later you could reduce to:
document.getElementById("newfeeditems").insertRow( 0).innerHTML = oRequest.responseText;
The 0 as parameter would make the insert always as first row, use a -1 to insert always as last row.
Try next:
oRequest.onreadystatechange=function() {
if(oRequest.readyState===4) {
if(oRequest.status===200) { // HTTP OK
//Start of problem.
var newfeedstable = document.getElementById("newfeeditems");
var newcontent = document.createElement('tr');
newcontent.innerHTML = oRequest.responseText;
// next lines removed: it's a problem: you download a <td> and next code insert its into table directly, without <tr>
//while (newcontent.firstChild)
//{
// newfeedstable.insertBefore(newcontent.firstChild,newfeedstable.firstChild);
//}
// 1) next line added, try next:
newfeedstable.insertBefore(newcontent,newfeedstable.firstChild)
// 2) OR IF RESPONSE CAN CONTAIN MORE THAN ONE <TD> try next (not checked code)
while (newcontent.cells.length) {
var td=newcontent.cells[0];
newcontent.removeChild(td);
var tr=document.createElement('tr');
tr.appendChild(td);
newfeedstable.insertBefore(tr,newfeedstable.firstChild);
}
//End of problem.
}
}
}
Related
I have created the below function that uses bootstrapalert where a pop up comes up that holds random data from a database table. But after I trigger the event and close the window I need to refresh the page in order for it to work again. I don't seem to find the issue in the code that causes this problem. Any suggestions for improvement?
<script>
var alertList = document.querySelectorAll(".alert");
alertList.forEach(function (alert) {
new bootstrap.Alert(alert);
});
function randomName() {
if (
document.getElementById("randomNamePopUp").dataset.showned == "false"
) {
document.getElementById("randomNamePopUp").style.display = "block";
document.getElementById("randomNamePopUp").dataset.showned = "true";
} else {
//window.location.href=window.location.href+"?showRandom=true";
}
}
const urlParams1 = new URLSearchParams(window.location.search);
const myParam = urlParams1.get("showRandom");
if (myParam == "true") {
randomName();
}
</script>
Below is script to highlight rows in html file:
$(function(){
$('table').addClass("table table-bordered table-condensed");
$('.table').on('click', 'tr', function(e){
var $tr = $(this);
var $table = $tr.closest('.table');
var our_index = $($tr,$table).index();
if (e.shiftKey) {
var last_index = $table.data('last-index');
if (last_index) {
if (last_index < our_index) {
while(last_index < our_index) {
$('tbody tr:eq('+(++last_index)+')', $table).click();
}
$('tbody tr:eq('+(last_index)+')', $table).click();
} else {
while(last_index > our_index) {
$('tbody tr:eq('+(--last_index)+')', $table).click();
}
$('tbody tr:eq('+(last_index)+')', $table).click();
}
}
$table.data('last-index',our_index);
} else {
$table.data('last-index',our_index);
}
if ($tr.hasClass('success')) {
$tr.removeClass('success');
} else {
$tr.addClass('success');
}
});
});
I'd like now to save those highlighted rows so that when someone else will open the page, rows highlighted by be will be visible and if I will highlight some cells and then refresh the page they will stay highlighted.
Is there any simple way to achieve that?
Thanks in advance.
-----EDIT-----
I was trying to do it via localStorage:
$('tr').each(function(index){
if(localStorage.getItem(index)!=null){
$(this).addClass(localStorage.getItem(index));
}
});
and part to save:
if ($tr.hasClass('success')) {
$tr.removeClass('success');
} else {
$tr.addClass('success');
$tr.localStorage.setItem(index, 'success');
}
But, that's not working. What I'm doing wrong?
Sorry if my questions are obvious, but I'm starting with web programming.
To condense the comments and try to come up with answers:
You cannot client-side store any information that is available to other users on another computer. You will need some kind of server
When you attempt collaborative editing, you need to handle concurrency or ignore it, so whoever gets to the server first, get their version saved
To communicate with the server, you can use Ajax. NOTE this code was not tested:
var rows = [], saveRows = [];
function saveState() {
$('tbody tr').each() {
if ($(this).is(".success")) rows.push($(this).index())
}
if (rows.join(",") != saveRows.join(",")) {
saveRows = rows.slice(0); // copy;
$.post("storeRows.php",{"rows":rows.length>0?rows.join(","):""},function(res) {
console.log("stored");
if (res.rows.join(",") != saveRows.join(",")) {
$('tbody tr').each(function(i) {
$(this).toggleclass("success",rows.indexOf(i));
});
}
});
}
}
setInterval(saveState,3000);
The server needs to save the list somewhere
1,4,7,9
and then use it to initialise the table when making it OR have the ajax do the job when loading the table.
I currently have the following code on my website:
$(document).ready(function() {
$("#contact").on("click", function(e)
{
e.preventDefault();
$("#contactform").toggle('fast');
});
});
I would like to have an if(isset($_GET['email')); trigger this function as well, so have it open on page load if the $_GET variable is set.
I'm rather new with Jquery and not sure if this is possible, I also have another somewhat related question, I'm not sure if I should make a new question for this as I'm fairly new to stackoverflow as well, but here it is.
Say I have two of these:
$(document).ready(function() {
$("#contact").on("click", function(e)
{
e.preventDefault();
$("#contactform").toggle('fast');
});
});
$(document).ready(function() {
$("#archivestop").on("click", function(e)
{
e.preventDefault();
$("#archives").toggle('fast');
});
});
I want one to close if the other one is opened, how would I go about this?
Thanks!
Here's the Javascript-solution:
function getParam(key) {
var paramsStr = window.location.search.substr(1, window.location.search.length),
paramsArr = paramsStr.split("&"),
items = [];
for (var i = 0; i < paramsArr.length; i++) {
items[paramsArr[i].split("=")[0]] = paramsArr[i].split("=")[1];
}
if (key != "" && key != undefined) {
// return single
if (items[key] != undefined) {
return items[key];
} else {
return null;
}
} else {
// return all (array)
return items;
}
};
if (getParam("email")) {
// ...
}
Regarding your second question you can use the following to determine if an element is visible:
var bool = $('.foo').is(":visible");
So to hide an element if it is visible you would do something like this:
if ($('.foo').is(":visible")) {
$('.foo').hide();
}
I'm silly and have answered my first question. I still have yet to have my coffee.
The following works, just insert it into the div that is to be displayed:
<div id="contactform" style="<?php if(isset($_POST['email'])) echo "display:block;" ?>">
content
</div>
I'm filtering table using jQuery and all is well. This code works nicely:
$("*[id$='EquipmentTypeDropDownList']").change(filterTable);
$("*[id$='StateDropDownList']").change(filterTable);
function filterTable() {
var $equipmentDropDown = $("*[id$='EquipmentTypeDropDownList']");
var $stateDropDown = $("*[id$='StateDropDownList']");
var equipmentFilter = $equipmentDropDown.val();
var stateFilter = $stateDropDown.val();
$("tr.dataRow").each(function () {
var show = true;
var equimpent = $(this).find("td.equipment").text();
var state = $(this).find("td.readyState").text();
if (equipmentFilter != "Any" && equipmentFilter != equimpent) show = false;
if (stateFilter != "Any" && stateFilter != state) show = false;
if (show) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
$("table").promise().done(colorGridRows);
}
function colorGridRows() {
//for table row
$("tr:visible:even").css("background-color", "#DED7D1");
$("tr:visible:odd").css("background-color", "#EEEAE7");
}
colorGridRows function changes background color of even/odd rows for readability
Now, It would be nice if I can replace show/hide calls with fadeIn/fadeOut but I can't because coloring doesn't work (it runs before UI effect completed. If it was just one function parameter - I would just create function for completion and be done with it. But my table has many rows and loop runs through each. How do I wait for ALL to compelete?
EDITED: Code sample updated showing how I try to use promise() but it doesn't work. It fires but I don't get odd/even coloring.
Use the promise object for animations.
$("*[id$='StateDropDownList']").change(function () {
var filtervar = $(this).val();
$('tr td.readyState').each(function () {
if (filtervar == "Any" || $(this).text() == filtervar) {
$(this).parent().fadeIn();
} else {
$(this).parent().fadeOut();
}
}).parent().promise().done(colorGridRows);
//colorGridRows();
});
I have an issue with the refresh of a jquery mobile listview.
This code works fine:
$(document).bind( "pagebeforechange", function( e, data ) {
// Generating a dynamic list
for(var i=0;i<list.length;i++){
var link = '<li>'+list[i].name+'</li>';
$("#listview").append(link);
}
// Listview refresh
$("#myPage").on('pagebeforeshow', function() {
try {
$("#listview").listview('refresh');
} catch (e) {
$("#listview").listview();
}
});
$.mobile.changePage($(#myPage), {
transition:"slide",
dataUrl:url,
allowSamePageTransition:true,
reverse:reverse
});
e.preventDefault();
});
However, I need to dynamically add an icon to list view items which are in user's favorites. I use a function which returns an array by a request to the local database.
$(document).bind( "pagebeforechange", function( e, data ) {
getFavs(function(favsArray){
// Generating dynamic list with image
for(var i=0;i<list.length;i++){
favImg = "";
if(favsArray.indexOf(list[i].id) !== -1){
favImg = '<img src="images/star-36-black.png" class="ui-li-icon" />';
}
var link = '<li>'+favImg+list[i].name+'</li>';
$("#listview").append(link);
}
// Listview refresh
$("#myPage").on('pagebeforeshow', function() {
try {
$("#listview").listview('refresh');
} catch (e) {
$("#listview").listview();
}
});
});
$.mobile.changePage($(#myPage), {
transition:"slide",
dataUrl:url,
allowSamePageTransition:true,
reverse:reverse
});
e.preventDefault();
});
In this second case, Listview() is not applied. I don't understand why this second option is so different that it breaks Listview()...
I found a similar post here, although the solution differs. On the second option, I just have to remove the binding to pagebeforshow:
// Listview refresh
try {
$("#listview").listview('refresh');
} catch (e) {
$("#listview").listview();
}
However, I did not yet understand why the binding to pagebeforeshow is required in the first option, whereas it breaks the code in the second option...