Alright, So I've searched google for what i'm trying to do and can't seem to find what i am exactly looking for.
What I would like to do is have a image that is updated every second, this image is used for a message icon, similar to that of Facebook. No page refresh, Need the element updated using Jquery(preferred). I know very little on the java-script side of this, however the PHP and MySQL side I can do as long as i know what to tell the java-script to do.
I guess the real Question would be:
How can i make the image update based upon, any change in the MySQL database?
Any help on this would be GREATLY appreciated.
Try something like:
window.setInterval(function() {
$.get("url", { parameters: egTime}, function(response) {
if($("#myImage").attr("src") != response)
$("#myImage").attr("src", response);
})
}, 1000);
the server has to return the new src of the image as a string ;-)
You may first set an interval using jQuery. Refer this question;
JavaScript - jQuery interval
Then you may do ajax requests on that intervals to check for new entries in database. In MySQL, make a flag entry to identify whether the entry is new or old (say set 0 for old and 1 for new). On each ajax request, if there is any entry with status 1, then the PHP may return that number of entries having 1 (ie, may be greater than 1) as the ajax result. Then the status should be set to 0. In javascript ajax, you may check whether the return value is 0 or else. If 0, then you need not do anything. If 1, then you may change some element's css property (like changing background color), so as to make it a notification. When user click that element, the css may be brought back to default.
Related
I have created a dynamic table, with PHP and jQuery and am using CSS for creating auto increment Serial Number.
This is the code
Requirement:
At the moment, the column in which the serial numbers are auto generated are blank. Is it possible to add a text box in which the serial numbers are generated so that the values can be retrieved while being saved?
That is, instead of having :
content: counter(serial-number);
we have something like this :
content: counter(text);
Or is there any possible way to save the serial numbers in a text box to be saved in the database.
Any suggestions will be appreciated.
No, the CSS counter values cannot be accessed outside of CSS. So, there is no way to assign this to a input box or access the value using JS/jQuery etc. More details can be found in the answer here and so I am not going to repeat it.
Like charlietfl had mentioned in his comment, I would ideally recommend checking with the server and then setting the value (using AJAX) or completely do the serial number generation at the backend and just display placeholder values (like 1, 2, 3 etc) in the page. I say this because (a) uniqueness cannot be fully attained if they are generated at client-side and (b) values could easily be tampered if they are generated at client-side and stored as-is into the DB. Either way, it would also be better to validate the incoming data before storing to DB.
But, if for whatever reason you wish to proceed doing this at client side, then you could write a simple function jQuery's index() feature and set the index of the tr to the input box. I am not an expert in jQuery and so there are chances that this could be achieved in a simpler way.
function numberRows(){
$("#tb2 tr").each(function(){
$(this).find("td:first-child input").val($("#tb2 tr").index(this));
});
}
Fiddle Demo
As Brodie had indicated in comments, you may want to change the input from readonly to a hidden input but I'd leave that to you. I used a readonly box just to visibly show the value.
I really like #harry answer if you want to go w/ a clientside solution.
Looking at what you had in your fiddle, if you were to do something like create a hidden input in the first column and set it to a default of 1 (or whatever comes back from the server) you could allow it to increment like this, where on load you pull the serial of the first row and then as the user adds rows, the serial in incremented. This also puts the input into a hidden field so it's not as easily accessible to change from the user perspective (assuming you don't want them to manually change the sn's). Ideally, you would also control the display serial number from this rather than from the CSS.
var serial = $('input[name="serialNumber"]').eq(0).val();
$(function(){
$('#addMore2').on('click', function() {
var data = $("#tb2 tr:eq(1)").clone(true).appendTo("#tb2");
data.find("input").val('');
data.find('input[name="serialNumber"]').val(++serial);
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
}
});
});
It'd be better to put it into a function or even (as suggested by other users) do a small roundtrip to the server and let the server create the row in your database and return you a serial number. Then when you post you have a serial number that you can use to identify the row to update.
I try to retrieve a variable value of a div (height) in order to put it in a table of a database in real-time (I absolutely need it). The value of the height is reacting with the microphone of the device. I would scream in the mic of a computer and see the result on another computer. Is there a simple way to do it?
Thanks.
EDIT : Actually I bring back the sound informations with JRecorder (sajithmr.me/jrecorder-jquery). The height of the div is equivalent to the amplitude of the scream. I would put the value of this height in a simple table.
You'll need to throw in some JavaScript in there. I'll use jQuery in my examples.
To get the height of the div, you can use getClientRects.
var height = $("#yourdiv")[0].getClientRects()[0].height; //For IE, substract the bottom property from the top property
To send it to the server, you can use AJAX
$.post("yourpage.php", {height: height});
In your server PHP page, you can then retrieve the value and store it in the DB:
$height = $_POST['height'];
You now have the value in your database. For another client to see it, you need to make a page that display the latest value and poll that page with AJAX at a set interval to get the value and update your div.
There is no simple way to do this. This is the most simple I could think of. It still requires a good bit of knowledge of JavaScript and AJAX. If you have any questions leave a comment.
PHP can't do anything with your device (microphone), as it's server-side software, not client-side
I didn't get your first part of question, though.
Using jRecorder Plugin, you can use the callback function to decide the mic activity level.
callback_activityLevel : Callback for returning current mic input level (0-100)
You can check the example at: http://www.sajithmr.me/jrecorder/example1.html
Now I'm familiar with JSON and jQuery I'm looking for a library which do this:
Update in real time my table (with the JSON (call every x seconds)) and only delete or hide the rows wich are deleted or insert the new rows, but i need to display the new rows in a special way:
Let me explain:
Json request 1 send:
1;Tomato 2;Apple 3;Salad 4;Carot
Json request 2 send:
1;Tomato 3;Salad 4;Carot 5;Potatoes
I would like the second row disapear with a effect (fadeOut) and the rows below move Up. For the row 5, i just want a new row appears with a fade in.
Is there any library existing doing this?
I'm doing it in PHP, but i hope to write all this in JS.
The user could just look the table and see the new rows appearing and the old rows deleting.
Any ideas or am I supposed to write it from scratch?
You could use the awesome jqGrid plugin.
To do the autorefresh, you should do this:
setInterval(function(){
$("#grid1").trigger("reloadGrid");
}, 10000);
To change which params to send, use the plugin method .setPostData()
Hope this helps. Cheers.
Your can write this in pure jquery. Just load table every time, with .post() as example. Fade in/out - is also not a big problem, just append html (div/row) and them show() with effect of vertical slide. Maybe with opacity change.
PS. Specially suggest your look inside ExtJS grids ... this is another way make table appear nicely. One thing your need to extjs - timer, to update it, if mysql is changing in background also.
I'm looking for a library which do this :
Retrieve a JSON through an AJAX call
Populate table with the JSON
Update in real time the table with the JSON (call every x seconds) and only delete or hide the rows wich are deleted or insert the new rows.
/Editing after first answer
Ok I guess my first explanation was not good.
Retrieving through jQuery a JSON and build a table is good, I could do that, but my request was more on the other part.
I'm looking for a library to display the result in a special way.
Let me explain.
Json request 1 send :
1;Tomato 2;Apple 3;Salad 4;Carot
Json request 2 send :
1;Tomato 3;Salad 4;Carot 5;Potatoes
I would like the second row disapear with a effect (fadeOut) and the rows below move Up. For the row 5, i just want a new row appears with a fade in.
Is that more clear?
Is there any library existing doing this?
I'm doing it in PHP, but i hope to write all this in JS.
The user could just look the table and see the new rows appearing and the old rows deleting.
Any ideas or am I supposed to write it from scratch?
You can get the json like this (use get or post, ill show post here):
function do_json_live(){
$.post('url.php','somedata', function(returnJSON){
alert(returnJSON);
//do something with the `returnJSON`
setTimeout(do_json_live, 2000); //2000 ms = 2 seconds
},'json');
}
If you want something friendly and full of various useful features, you can use jQuery plugin called DataTables.
It provides API allowing you to provide new data from the server on request: http://www.datatables.net/api
It works for simple implementations also, is pretty customizable, allows to change its outlook etc.
Hope this is useful.
Here is a really good article on different polling/comet techniques that you will want to look into. It breifly describes each and points out some pitfalls you might not think of.: http://query7.com/avoiding-long-polling. Also here is a jquery plugin for long polling: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/
Try Jquery Grid Plugin. You can retrieve JSON from server and build a grid on the client side. Take a look at the web site, there are some examples including php.
First I would read this, but the code is actually really simple.
On your front end, you'd have your table
<table id="myTable"></table>
Then you'd make your AJAX post within JQuery
$.ajax({
url: "yourphpfile",
data: <data you want your php file to read>
success: function(data){
$('#myTable').html(data);
}
});
Your method in php would take in your posted data, it would create an HTML string of a table element, and then you'd set your table's innerHTML on the front end with .html() built into JQuery -- that way you never have to worry about showing/hiding, everytime you post, your given the table itself, so you just display exactly that, you can handle all the fancy stuff server side.
You could use the awesome jqGrid plugin.
To do the autorefresh, you should do this:
setInterval(function(){
$("#grid1").trigger("reloadGrid");
}, 10000);
Hope this helps. Cheers.
If real-time updating is truly required, as Neal suggested, Comet or Stream-Hub would be one avenue worth checking into.
As for the interface, I recently have been using JQuery Templates, and when reconciling added / removed / updated records, I use JQuery selectors to clear & update, and use Templates to add in new records. And because I'm using JQuery in all 3 events, I could easily integrate their motion / visual effects.
JQuery Templates
JQuery Selectors
JQuery Effects
Stream-Hub
I myself only needed polling (every 15 seconds) so I'm using Robert Fischer's improved JQuery PeriodicalUpdater
JQuery Periodical Updater
I'm new here and I'm very new at programming but I need some serious hand-by-hand help here.
I was searching jquery and found a script to drag and drop stuff on the screen, basicly i just want to move some divs around, thats the easy part, the script I found has a callback function that writes onto the div that you just moved "dropped", this is exactly what I need but instead of writting dropped I want to save the 2 postion variables into a database (mysql), this is so that if I close the browser and open it again the div's will be on the last place I dropped them.
Can you help? Is there a jquery user interface with this already built in ?
I think this is easy to do with jquery ajax functions right? basicly I should send the serialized data (json right?) into a page that processes that data once its feed into it, then jason returns the handler with success or even with some output right?
It would be cool for the dragabble div to have a handler with last know position retrieve by jason from an external page that acts like a buffer to the database.
Is this the correct pipeline?
Best Regards
Joricam
you have kind of a vague question here, but I can try to help you get closer to the answer.
Imagine two sides of the puzzle:
When the page loads, the two (or more) DIVs are drawn on the screen. If you want them to draw in a specific order, you need to keep track of that in the database. So be sure your db has a field called something like display_order, and then display the DIVs in that order. (You can usually just add ORDER BY display_order to the SQL, so they are retrieved in the order you want, and then draw the DIVs right out in a loop.)
When someone drags and drops a DIV, you use AJAX/JSON/etc to tell your PHP script the new order. In this case, when that happens, rather than draw the word 'dropped' in the DIV, you should instead immediately update the display_order fields in the database. This way you are remembering each DIV's position.
Does that help/make sense?
UPDATED: thinking more about your question, here is the pseudo code:
in "display.php":
Fetch the contents for each DIV from the database, with ORDER BY display_order on the rows.
Draw them on the screen, looping through each database row.
Also in this HTML, use the jQuery script you already have to call another PHP script (dragged.php) when a row is dragged.
in "dragged.php":
This script is called when a row is dragged on the screen.
Currently it puts the word "dropped" in the DIV that is dragged. That's not helpful, so remove that.
Instead, you now know (from the variables passed to you) that a specific DIV needs to be in a specific place.
So grab a list of the DIVs from the database, then change the order of them (by altering the display_order column) based on the new position(s) you know.
Save that back to the database, so when display.php is called again next time, it draws the DIVs in the order you want.
Hope this helps explain further. If you are still struggling, I respectfully suggest you try to write the code, and post a more specific question about the part that you're stuck on. This will help you get a good answer quickly. (You may also want to Google this one a lot; I'm sure there are code samples out there showing how to do all this.)