Mixing
table data keeps refreshing even if I apply a filter in javascript
0
I'm using websocket to get data and to bind it to the html. Here is my code:
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});<table>
<tbody id="showdata">
</tbody>
</table>Here is the javascript code of my search filter :
$('#search').keyup(function() {
var lastValue = $(this).val();
console.log(lastValue)
showHide(lastValue, $('#Activity').val());
});
function showHide(lastValue, activity) {
$(".usrRow").show();
var v;
if (lastValue.length > 0) {
$(".usrRow").each(function() {
if ($(this).attr("extn").toLowerCase().indexOf(lastValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
if (activity != "All") {
if ($(this).find(".callstatus").html().toLowerCase().replace("&", "&") != activity.toLowerCase()) {
$(this).hide();
}
}
});
}
}
My problem is that I have a filter in the html to filter the data by typing the name or username etc. The filter works perfectly.
But the search result shows for a second and the table gets refreshed so my search result is gone and the entire table gets displayed.
When I stop the socket service then the data stays there as the table doesn't get refreshed as no data is coming from the socket.
I want the search result to stay as long as there is some text in the search input.
What is wrong with the kind of approach I'm using? How can I fix this issue?
javascript jquery html html5 websocket
asked Jan 2 at 5:23
node_mannode_man
542519
add a comment |
0
I'm using websocket to get data and to bind it to the html. Here is my code:
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});<table>
<tbody id="showdata">
</tbody>
</table>Here is the javascript code of my search filter :
$('#search').keyup(function() {
var lastValue = $(this).val();
console.log(lastValue)
showHide(lastValue, $('#Activity').val());
});
function showHide(lastValue, activity) {
$(".usrRow").show();
var v;
if (lastValue.length > 0) {
$(".usrRow").each(function() {
if ($(this).attr("extn").toLowerCase().indexOf(lastValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
if (activity != "All") {
if ($(this).find(".callstatus").html().toLowerCase().replace("&", "&") != activity.toLowerCase()) {
$(this).hide();
}
}
});
}
}
My problem is that I have a filter in the html to filter the data by typing the name or username etc. The filter works perfectly.
But the search result shows for a second and the table gets refreshed so my search result is gone and the entire table gets displayed.
When I stop the socket service then the data stays there as the table doesn't get refreshed as no data is coming from the socket.
I want the search result to stay as long as there is some text in the search input.
What is wrong with the kind of approach I'm using? How can I fix this issue?
javascript jquery html html5 websocket
asked Jan 2 at 5:23
node_mannode_man
542519
add a comment |
0
0
0
I'm using websocket to get data and to bind it to the html. Here is my code:
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});<table>
<tbody id="showdata">
</tbody>
</table>Here is the javascript code of my search filter :
$('#search').keyup(function() {
var lastValue = $(this).val();
console.log(lastValue)
showHide(lastValue, $('#Activity').val());
});
function showHide(lastValue, activity) {
$(".usrRow").show();
var v;
if (lastValue.length > 0) {
$(".usrRow").each(function() {
if ($(this).attr("extn").toLowerCase().indexOf(lastValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
if (activity != "All") {
if ($(this).find(".callstatus").html().toLowerCase().replace("&", "&") != activity.toLowerCase()) {
$(this).hide();
}
}
});
}
}
My problem is that I have a filter in the html to filter the data by typing the name or username etc. The filter works perfectly.
But the search result shows for a second and the table gets refreshed so my search result is gone and the entire table gets displayed.
When I stop the socket service then the data stays there as the table doesn't get refreshed as no data is coming from the socket.
I want the search result to stay as long as there is some text in the search input.
What is wrong with the kind of approach I'm using? How can I fix this issue?
javascript jquery html html5 websocket
asked Jan 2 at 5:23
node_mannode_man
542519
I'm using websocket to get data and to bind it to the html. Here is my code:
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});<table>
<tbody id="showdata">
</tbody>
</table>Here is the javascript code of my search filter :
$('#search').keyup(function() {
var lastValue = $(this).val();
console.log(lastValue)
showHide(lastValue, $('#Activity').val());
});
function showHide(lastValue, activity) {
$(".usrRow").show();
var v;
if (lastValue.length > 0) {
$(".usrRow").each(function() {
if ($(this).attr("extn").toLowerCase().indexOf(lastValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
if (activity != "All") {
if ($(this).find(".callstatus").html().toLowerCase().replace("&", "&") != activity.toLowerCase()) {
$(this).hide();
}
}
});
}
}
My problem is that I have a filter in the html to filter the data by typing the name or username etc. The filter works perfectly.
But the search result shows for a second and the table gets refreshed so my search result is gone and the entire table gets displayed.
When I stop the socket service then the data stays there as the table doesn't get refreshed as no data is coming from the socket.
I want the search result to stay as long as there is some text in the search input.
What is wrong with the kind of approach I'm using? How can I fix this issue?
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});<table>
<tbody id="showdata">
</tbody>
</table> var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});<table>
<tbody id="showdata">
</tbody>
</table>javascript jquery html html5 websocket
javascript jquery html html5 websocket
asked Jan 2 at 5:23
node_mannode_man
542519
asked Jan 2 at 5:23
node_mannode_man
542519
asked Jan 2 at 5:23
node_mannode_man
542519
asked Jan 2 at 5:23
node_mannode_man
542519
asked Jan 2 at 5:23
node_mannode_man
542519
542519
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You can add a condition to check if the search input has some value before you changing the html
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
var searchText = $('#Activity').val();
if(!searchText.length){
$('#showdata').html(html);
}
});
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
1
If that is the case, then you can remove the if condition and call theshowHide(lastValue, $('#Activity').val());function just after$('#showdata').html(html);
– Vineesh
Jan 2 at 5:53
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001596%2ftable-data-keeps-refreshing-even-if-i-apply-a-filter-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can add a condition to check if the search input has some value before you changing the html
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
var searchText = $('#Activity').val();
if(!searchText.length){
$('#showdata').html(html);
}
});
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
1
If that is the case, then you can remove the if condition and call theshowHide(lastValue, $('#Activity').val());function just after$('#showdata').html(html);
– Vineesh
Jan 2 at 5:53
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
add a comment |
1
You can add a condition to check if the search input has some value before you changing the html
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
var searchText = $('#Activity').val();
if(!searchText.length){
$('#showdata').html(html);
}
});
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
1
If that is the case, then you can remove the if condition and call theshowHide(lastValue, $('#Activity').val());function just after$('#showdata').html(html);
– Vineesh
Jan 2 at 5:53
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
add a comment |
1
1
1
You can add a condition to check if the search input has some value before you changing the html
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
var searchText = $('#Activity').val();
if(!searchText.length){
$('#showdata').html(html);
}
});
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
You can add a condition to check if the search input has some value before you changing the html
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
var searchText = $('#Activity').val();
if(!searchText.length){
$('#showdata').html(html);
}
});
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
answered Jan 2 at 5:42
VineeshVineesh
2,7601027
2,7601027
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
1
If that is the case, then you can remove the if condition and call theshowHide(lastValue, $('#Activity').val());function just after$('#showdata').html(html);
– Vineesh
Jan 2 at 5:53
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
add a comment |
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
1
If that is the case, then you can remove the if condition and call theshowHide(lastValue, $('#Activity').val());function just after$('#showdata').html(html);
– Vineesh
Jan 2 at 5:53
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
this is working for me. But when I have a timer in my code the time get's paused as well
– node_man
Jan 2 at 5:46
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
Where you are printing the timer?
– Vineesh
Jan 2 at 5:49
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
it's being displayed in the table only. actually time is coming from the socket. so according to your code the time is also paused
– node_man
Jan 2 at 5:51
1
1
If that is the case, then you can remove the if condition and call the
showHide(lastValue, $('#Activity').val()); function just after $('#showdata').html(html);– Vineesh
Jan 2 at 5:53
If that is the case, then you can remove the if condition and call the
showHide(lastValue, $('#Activity').val()); function just after $('#showdata').html(html);– Vineesh
Jan 2 at 5:53
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
this worked perfectly. thank you :)
– node_man
Jan 3 at 5:06
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001596%2ftable-data-keeps-refreshing-even-if-i-apply-a-filter-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
