Refresh a table without refreshing entire page to show updated data - javascript

I wish to show newly added data to a listing page, which listed on the same page. My problem is that after adding data to my database I needed to reload entire page to see the new data. How can I view without reloading entire page?

If you only want to refresh the table, you can use this jQuery plugin: http://datatables.net
You can call table refresh functions whenever you want. The plugin works using AJAX. To work with you need to have little javascript knowledge as well.
You can find sort of example/demo from here.
http://editor.datatables.net/tutorials/api_manipulation
However if you really want to do this get the concept and you also can develop same thing. You just require to learn some AJAX.

in Button click after data saved to database you need to use following script. no need to go round trips to server to client instead manipulate client side.
$("#btnSubmit").click(function () {
$('#myForm').ajaxForm({
success: function(){
$('#myTable tr:first').after('<tr><td>' + $("#Name").val() + '</td></tr>');
}
});
});

Related

How to refresh a quiz without refreshing the web page?

I'm trying to add button to refresh the Quiz after answering the questions incorrectly but when I click reload it reloads the whole page instead, I'm using the function below, really appreciate any help. thanks
$(function() {
$("#myButton").click(function() {
window.location.reload();
});
});
Working Example Here
It sounds like you want to reset the form instead of refreshing the page. window.location.reload(); is basically hitting CTRL+R.
Consider just resetting the form tag.
document.getElementById('myform').reset();
Keep in mind, however, that you'll still have to reset any values located elsewhere (like the js files) that were based on user input.
If you want to retain the results of the quiz and visit another webpage, then you'll need to use AJAX and store the values in a backend somewhere.

Update part of page automatically when the data from an object changes without reloading the page

I have data being inserted into various divs collected from the backend.
This data gets updated, what i need is for the divs to also automatically update the data within the divs without actually refreshing the whole page.
Right now a page refresh would update the divs but I want the divs to auto update without affecting users experience.
Any suggestions.
As an example, I have a vote up/down button in the frontend, the vote gets sent to the backend then sent back through to the front and inserted into a div, however they wouldnt see their vote registered in the frontend unless they refreshed the page, So I would need the users vote result to be updated in the front end everytime then make a vote or change a vote ect automatically.
This is just one example, there is more data inserted in this table which could be updated at any time.
Update,
Not sure people understand fully what I need or trying to do.
Basically have and object coming through from back-end, on page load, data from that object is inserted into a table such as new posts, votes ect.
What I need to be able to do is check if the object has changed since the page load and if so to then update the data on the page without refreshing the page.
Ideally need this to happen instantaneously, so it recognises as soon as there is a difference between the object data and that being displayed in the browser and updates it.
Hope that makes it more clear as to what I want to do.
I have and object with information such as the suggestiontitle, description, votestatus, etc, these get inserted into a row, when a new. A new row gets added when a new object with main object comes through.
So I need to be able to check for changes in the main object so that I can then add the new objects as rows into the table and also Detect and update any changes with current objects already inserted.
If I understood correctly, all you want is a way to interact with the backend without refreshing the page, correct? If that's the case, you should look into AJAX. Here's a simple way to use it for the voting system example(requires jQuery):
$.post(url_to_interact_with,{key: 1232,vote:1}, function(data){
console.log(data);
}
In this case you sent a post request with key=1232 and a vote of 1. The variable in the function (data) is the output of the request.
However, if this isn't such a simple matter for you, I would recommend looking into websockets. To summarize what they are: A back and forth interaction between backend and front end. The back end can send info at any time without refreshing the page. If websockets are too confusing, then use this: https://pusher.com/
But honestly, you shouldn't try to go for the approach of knowing all info of div in real time unless absolutely necessary. Good luck! :)
What I Understood is that you need to update the div whenever Vote is updated? If I understood correctly then I would like to go with delegate and call a function to the server once you get a response from Vote stuff call.
If you want to get an event from the server-side then I would suggest you go for SignalR, for real-time communication, which will give you an event called the server-side.

to restore a same id in the page when refreshed

I am working on javascript as well as jquery. and i am using 2divs in my page. so when my page loads the second div is hidden and when a button from the first div is clicked it navigates to the second page. so when i press refresh button now. the page navigates to the first div as it reacts when the page is opened for the first time. any ideas or suggestions to make the second div display even when the page is refreshed. thanks in advance. here is my fiddled code it works fine in the fiddle as i exactly want. but it fails in my project code. http://jsfiddle.net/pWryf/ . any example to attain this through cookies.?
Here is my code for the div:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
});
Try something like this using localStorage:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
localStorage['shown'] = '.cont1';
});
$(function() {
var sel;
if (sel = localStorage['shown']) {
$('.cont1, #log1').hide().filter(sel).show();
}
});
http://jsfiddle.net/5aJZR/
Use can also use cookies for this purpose.
I can think of atleast 2 frontend approaches to this problem:
using a cookie or a more modern localstorage solution to handle sessions. (already been here, cookie)
using a one page app, where navigations is after the hash # sign. such as in backbone webapps.
You can also use some kind of server side session handling, most web framework have one embedded.

reload div without reloading page using javascript

I am currently just working on simple and final UI changes for a website I am working on and was wondering if someone could help me figure something out.
I have a page that has three divs on it and I was wondering how I could use javascript to reload the content of these divs without reloading the page when someone clicked on a certain link?
Thanks!
Use AJAX. Watch here
Or as suggested in other answers - use a framework or a library like jQuery which makes element selection and AJAX as easy as possible
in case you need to go to the server to get the content: read about AJAX. there is a good jQuery framework making ajax calls very easy.
if you don't need to go to the server just select the element you need and change his innerHTML value. again - you can select elements via jQuery in a more easy way.
To reload this div you can use ajax call.
With your ajax call, your get your data, without reloading the page, and then replace your div content with the new data.
something like that
$.ajax({
type : 'get',
url : 'urltogetdata',
success : function(data){
$('#yourdiv').html(data);
}
});
this code is jquery code, but it work with other lib

Refresh a webpage with following action

I want to do a very simple thing with AJAX. Apologize if it sounds very simple.
If I add some new data to my database from my client side JS page (with AJAX call) with a save button, then I want make the newer data visible with that button click as well. For this, I assume I have following options -
Refresh the page (which does not work for me since initially my table is hidden and refresh takes the page to its initial position. I also tried to refresh page and then added one action to make that table visible but unfortunately it just refreshed the page and did not perform the following action)
Refreshing the part of the page (that certain div) which I have no idea how to do.
So my question is -
Is it possible to refresh the page followed by other functions?
How can I refresh a div using JS?
Either of the solutions would be fine for me. Thanks in advance.
To refresh a div, as far as I know you need a php page to get the info you want to be displayed in there then use ajax function to put that page in there.
You can have the server side code return the contents of the div to change after the data is saved.
Using jQuery it's very easy to change the content of a div after making an ajax call.
$.ajax({
type: "POST",
url: "/someurl",
data: theDataToSendToTheServer,
success: function(data){
$('#theDivsId').html(data);
}
});
JQuery's html() attribute will allow you to update a single div via Javascript.
You can use JQuery's Post method to update the Server and/or retreive new data to refresh the div with.
Not using jQuery? It's still pretty easy.
document.getElementById('theIDofYourDiv').innerHTML = 'the new contents of your div, including <span>nested HTML tags</span> if you want, provided as a string';

Categories

Resources