I'm trying to create notifications for my chat box, as seen beside the 'talk' title when ever some one new messages you. I've tried multiple things that never work.
a busy cat http://goawaymom.com/damit.png
here is my code
$(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
//Load the file containing the chat log
function loadLog(){
$.ajax({
url: "log.html",
cache: false,
success: function(html){
var chatbox= $("#chatbox");
var atBottom = (chatbox[0].scrollHeight - chatbox.scrollTop() == chatbox.outerHeight());
chatbox.html(html);
if (atBottom )
chatbox.animate({ scrollTop: 99999 }, 'normal');
}
});
}
setInterval (loadLog, 2500); //Reload file every 2.5 seconds
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Are you sure you want to end the session?");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
does any body know how i would go about this. Everything I've tried so far has failed. I tried
using a set interval function that didn't work.
So, if I'm understanding correctly, submitting a message will append it to the end of log.html? I don't think that's going to work for what you're trying to do. You need to have a service to keep track of new posts so that you can check for updates, rather than just reloading the innerHTML of a div.
Once you have that in place, you can keep a count of how many new messages you've loaded since the chat had focus and reset it to 0 every time the chat gets focus.
You can update the title using document.title. So whenever you need to update the count, you can do
document.title = 'my normal title (' + newCount + ')';
Simply put, this isn't a problem you can solve with javascript, you need to redesign your app.
Your question is a bit incomplete / unclear. When you say "whenever someone new messages you", do you mean just when a new message appears (not necessary for you, but rather it's for the whole chat room).
Assuming that's the case, then the number is going to keep increasing whenever someone types something, which leads to the question: when do you decrement the number?
Here's a piece of code that will help you get started. It won't decrement the notification number, because in your question you didn't clarify when that number resets.
In $(document).ready add the following line in the end
// Load log and cache number of message on page when it first loaded
// Pass in a callback function to cache the message count.
loadLog(function(){
window.lastReadMessageCount = $('.msgln').length;
});
Update the loadLog to take in callback:
function loadLog(callback){
...
success: function(html){
if (callback) callback();
...
}
...
}
Now you know how many message the user has seen when the page loaded. Now whenever the page updates the chat, we want to update the new message count.
In your loadLog(), Add the following lines to the end
newMessagesCount = $('.msgln').length - lastReadMessageCount;
document.title = newMessagesCount > 0 ? 'title (' newMessagesCount ')' : 'title';
That's it! All you have to do now is clarify when you want lastReadMessageCount to be updated.
Related
I've recently been trying to create a live-scoring system for squash matches. I've managed to use ActionCable with Rails 5 to auto-update the score on the page, but I'd like to know if it's possible to tell Rails to refresh the page if a certain condition is met.
For example, if the game has finished, a different page is shown to say that the players are having a break between games. I need the page to refresh completely for this to happen.
In my database the boolean 'break' is marked as true when a game ends, and then the view uses a conditional if/else statement to decide what to show.
The code I use to update the score is attached below, I was thinking something along the lines of if data.break == true then the page will automatically refresh.
// match_channel.js (app/assets/javascripts/channels/match_channel.js)
$(function() {
$('[data-channel-subscribe="match"]').each(function(index, element) {
var $element = $(element),
match_id = $element.data('match-id')
messageTemplate = $('[data-role="message-template"]');
App.cable.subscriptions.create(
{
channel: "MatchChannel",
match: match_id
},
{
received: function(data) {
var content = messageTemplate.children().clone(true, true);
content.find('[data-role="player_score"]').text(data.player_score);
content.find('[data-role="opponent_score"]').text(data.opponent_score);
content.find('[data-role="server_name"]').text(data.server_name);
content.find('[data-role="side"]').text(data.side);
$element.append(content);
}
}
);
});
});
I don't know if this sort of thing is possible, and I'm not much good at anything Javascript related so I'd appreciate any help on this.
Thanks.
Reloading the current page is relatively straightforward. If you are using Turbolinks, you can use Turbolinks.visit(location.toString()) to trigger a revisit to the current page. If you aren't using Turbolinks, use location.reload(). So, your received function might look like:
received: function(data) {
if (data.break) {
return location.reload();
// or...
// return Turbolinks.visit(location.toString());
}
// your DOM updates
}
Either way is the equivalent to the user hitting the reload button, so it will trigger another GET, which calls your controller and re-renders the view.
I am new in javascript and php. I am creatng an admin panel in which I have an option for the user to play game. But the issue is, every game have a specific time period say 30 mins. So, what I want is that if a user have started the game, the count down must be started and if user once switch from that page to another page, still the counter must be counting and after 30 mins it should end the game.
For example I am on http://www.examplec.com/Game1 my count down of 30 min will start. If I switch from that page to another like http://www.example.com/order then the counter should still count the total time and when its expired, end it and send query to database.
Kindly reply if anyone know the solution. I have already find a solution using session but I want more efficient solution. One more thing a single user can play more than 1 game.
when your game start set a session of current time like this
$_SESSION['game_start_time'] = strtotime(date('d-M-Y g:i:s A')); // it will give you complete current timestamp.
and now check it on every page by including
if(isset($_SESSION['game_start_time']))
{
$game_start_time = $_SESSION['game_start_time'];
$current_time = strtotime(date('d-M-Y g:i:s A'));
$time_diff = $current_time - $game_start_time;
if($time_diff>(30*60))
{
//expire 30 minutes your code is here
}
else
{
// action if require to do when below 30 minutes of game start.
}
}
What you could do is create a table to keep track of the time, this is not the most efficient way but it would be secure.
So create a new table called gametrack with the following fiels:
id
userid
gameid
timestarted
etc
so when a user starts a game you insert a record with user info.
Next you need to edit the game page. In the game page you could place a jquery code to request for update on the time.
function gameStatus(){
$.ajax({
url: 'status.php?gid=[GAMEID]',
success: function(data) {
if(data == 1) {
//DO SOMETHING, REFRESH THE PAGE, STOP THE GAME ETC
}
}
});
}
setInterval("gameStatus()",10000);
the code above would request status.php every 10 seconds, you need to pass the gameid to the file and assuming that the user is registered you can use session to get user info and return 1 if 30 mins has passed.
You can mix this solution with Satish's Answer to use Sessions instead of Databases and still get a live count down with the jquery code above.
You can try this with localStorage
When you want to set variable:
var name = "value";
localStorage.setItem("someVarName", name);
And in any page (like when the page has loaded), get it like:
var Name = localStorage.getItem("someVarName");
Browser compatibility caniuse.com/namevalue-storage
Demo
I need a problem with a function to update some informations in my database (I'm using the websql). In my application, I'm showing a loading box for do the update, but, the for ends before the get function is complete and the loading box e closed.
I need that the next interaction of the for only happen when the get is finish.
Someone has a solution for this? :(
I'm using the appframework intel (jqmobi)
for (var i=0; i<len; i++){
var url = "http://172.25.129.30:8180/prax/rest/ocorrenciaJSONBean/consultarStatusOcorrencia/"+results.rows.item(i).id;
$.get(url,function(data){
tx.executeSql('UPDATE ocorrencias SET status="'+data.responseText+'" WHERE id = '+results.rows.item(i).id);
});
};
I have the following scenario:
An internal bank with a list of calls that a user opened on cell. What I want is to upgrade the status of the bank.
Today I do a query on internal bank and each id I perform a get on a webservice place to know the status of the call. I would like the next interaction is only occurred when the GET was finalized.
The problem here is that once the function ends, the screen refreshes and the message is "loading" disappears. This is occurring earlier than expected, since the end is before all GETs are finalized.
The get is not waiting to perform a call so you need to do a callback in your get function to perform the next one. You could do something like this:
var index = -1;
function perform_get(){
index++;
var url = "http://172.25.129.30:8180/prax/rest/ocorrenciaJSONBean/consultarStatusOcorrencia/"+results.rows.item(index).id;
$.get(url,function(data){
tx.executeSql('UPDATE ocorrencias SET status="'+data.responseText+'" WHERE id = '+results.rows.item(index).id);
})
.done(perform_get);
}
Now it is waiting to perform the next get call.
Hope this helps.
I basically have a page that when loads, reads an Oracle SQL table for a specific record id that may not currently exist at the point as it may take up to a minute to insert this specific record into the table.
Based on this, I need a means of showing a "Loading Image" while it waits for the record to exist, so has to wait. Once it does, I want to remove the loading image and present the user with the record details. I am using Oracle Application Express 4.2 for this.
My question is not so much the loading/hiding of the image but how to continually check for the record within the Oracle table, during page load.
Either I receive the record successfully and then hide the image or say after 1 minute, I dismiss the checking of the record and present the user with a message indicating that no record was found.
Sorry for my english. I will try help you.
Make your "Loading image" always visible on the page. There is no need to show it on load, you only need to hide it at proper moment.
Add Application Process to your application. Name it for example "GET_MY_ROW". Process must check your event, and return some flag, for example 1 or 0.
Example:
declare
l_cnt number;
begin
select count(*)
into l_cnt
from table1 t
where id = 12345;
if l_cnt > 0 then
htp.p(1);
else
htp.p(0);
end if;
end;
3.3 Add javascript code as page load event (for example by Dynamic Actions):
Javascript code:
var myInterval = setInteral(function {
var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=GET_MY_ROW',$v('pFlowStepId'));
get.GetAsync(function(pRequest) {
if (pRequest.readyState == 4) {
if (pRequest.responseText == 1) {
alert('Record loaded successfully');
// add function call, hiding your "Loading image" here
clearInterval(myInterval);
}
};
});
get = null;
}, 5000); //check every 5 seconds
setTimeout(function() {
alert('Sorry, no record was found. Try again later.');
clearInterval(myInterval);
}, 60000); // fail after 1 minute
Since NoGotnu already answered, I'll put this here:
Is there any reason for the procedure to be called through a job? Is it the only way to create the required record? Is the job called anywhere else? Why not call the procedure directly when the required page has been submitted and show the loading icon there? When it finishes, the user knows it has finished. That would involve a lot less fiddling around as you can make apex show a processing graphic on page submit. You could then just inform the user on the other page that the process has not been ran yet and they'd have to do that first.
Secondly, while NoGotnu's answer will work, I'd like to point out that in apex 4.2 you should use the apex.server namespace instead of the never documented htmldb_Get construction. apex.server.process is a clean implementation of the jQuery ajax setup.
NoGotnu's code translated:
apex.server.process( "GET_MY_ROW"
, null
, { dataType: text
, success: function(pData){
if (pData == 1) {
clearInterval(myInterval);
alert('Record loaded successfully');
};
}
}
);
The call doesn't really need to be async though, but ok.
Another option would be to implement a "long poll" instead of firing the ajax event every 5 seconds. A long poll will just initiate a call to the server and wait for a response. As long as the server is busy, the client will wait. To achieve this you could use dbms_alert, as suggested in Waiting for a submitted job to finish in Oracle PL/SQL?
You'd signal an alert in the plsql code of the job, and in the ondemand process code register an interest in the alert and use waitone/any with a 60 second timeout. Presto long poll.
I am trying to develope a app that checks MYSQL table every minute for new messages and if there is any it should alert the user and show the message. This is the code I use, how should I modify it to make it work?
setInterval ( "getMessages()", 60000 );
var oldmessage = "";
function getMessages() {
$.getJSON(serviceURL + 'messages.php?ID=' + ID, function(message) {
if(JSON.stringify(message) != JSON.stringify(oldmessage)){ // old message is not same as new
var messages = data.key[0];
alert(messages.NEW);
});
oldmessage = message;
}
So what I'm trying to do is save old message to variable and compare it after minute, and if it has changed I alert row NEW
The possible solution is, you take a new column in mysql to mark as viewed or not. By default that will be not viewed (say 0). In your PHP code you should retrieve one row which is marked as "Not viewed" or 0. And same you should display via AJAX and update back that row with 1 (viewed).
If you dont receive any rows, send nothing to AJAX and handle the messages accordingly no new rows found.
This is just a logic and hope it helps.