refresh only one div - javascript

I've a webapp using hibernate to mysql. The webapp works fine, if my database gets new values they appear instantly on the webapp after refresh of the page. I want to get away from my "refresh-the-whole-page-every-five-seconds" build and have a checkbox that when activated the list in tbody will refresh alone. I've tried autorefresh on the div as well, but yeah, if anyone of you guys know this please help! thank you!
Code block 1 (head):
<script type="text/javascript">
function auto(){setInterval(
function () { $('#doRefresh'). ????
;}, 2000); } </script>
Code block 2 (div 1):
<input type='button' value='UPDATE' class="btn" onclick="auto()"/>
Code block 3 (div 2):
<tbody id="doRefresh">
<c:forEach var="sensor" items="${listSensors}" varStatus="status">
<tr class="listData">
<td>${sensor.fileName}</td>
<td>${sensor.date}</td>
<td>${sensor.time}</td>
<td>${sensor.channel1}</td>
<td>${sensor.channel2}</td>
<td>${sensor.channel3}</td>
<td>${sensor.channel4}</td>
<td>${sensor.channel5}</td>
<td>${sensor.channel6}</td>
<td>${sensor.channel7}</td>
<td>${sensor.channel8}</td>
</tr>
</c:forEach>
</tbody>
I have been to the following pages for inspiration (and more):
1. https://wowjava.wordpress.com/2010/02/06/auto-refreshing-the-content-
without-reloading-page-using-jquery/
2. http://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/
3. http://crunchify.com/how-to-refresh-div-content-without-reloading-page-
using-jquery-and-ajax/
4. http://stackoverflow.com/questions/5987802/refreshing-only-one-div-in-
page-with-just-regular-javascript
Thank you

Since you already have server code that can be used to generate the html you can use the simplest jQuery ajax method which is load().
Method replaces all the html within the selector with new html from server by simply passing in a url.
/* within interval function */
$('#doRefresh').load('path/to/server/script', function(){
/* new html has been inserted, can run any html related code here*/
});
Since the <tbody> doesn't get replaced, only the rows, just send back rows. Otherwise use $('#doRefresh').parent().load(... to keep <tbody>
Reference: load() Docs

Related

Refresh for only one section (not the whole page)

I would like to refresh only one section of the website. It is only one value that I get from Siemens PLC. I receive actual current value, which I want to update on my website.
HTML looks like this:
<table class="tablePowerCurrent">
<tr>
<td>
<p class="Current">:="Var".Point_1.CurrentNow: A</p>
</td>
<td>
<p class="Power">:="Var".Point_1.Power: kWh</p>
</td>
</tr>
</table>
Right now I'm doing it with iframes. The table here is placed inside another html, which I use with the iframe in my main html. The iframe has meta refresh.
But now I would like to use script or something similar, to refresh the value.
The easiest solution is to place a JS script that will call the Siemens PLC server and get
setInterval(function()
{
// Update the Current value
$('.Current').load("https://siemens.com/api/call");
// Update the Power value
$('.Power').load("https://siemens.com/api/call")
}, 100000) // Repeat the refresh every 10sec
Remember that the API call must return a string or a single value because the code will replace the div value in the HTML with the response that will get by that API call (data). Jquery is required

Conditional page scroll down

I have a JSP page which contains a search field and under it a search results table. When the user presses the search button the request is processed through the java servlet and the page is reloaded with the returned results in the table. I need the page to scroll down to the table after the page loads ONLY after the search was complete.
I researched this topic and found this solution
onclick="document.getElementById('searchtable').scrollIntoView();"
I put this in the search button and it works but when the button is pressed the page gets reloaded, and the reloaded page starts from the top, which is my problem.
This is what I have
<div id="searchtable">
<table>
<c:forEach items="${tableheader}">
<!-- search results go here -->
</c:forEach>
What I was thinking of doing is adding a
<c:if test="${tableheader not equal null}">document.getElementById('searchtable').scrollIntoView();</c:if>
into the <c:forEach>, but I am not sure how to properly implement this.
Any help would be great.
I'm assuming this is a general JSP
<form onsubmit='getTable'>
<button type='submit'>Get Table</button>
</form>
so when you click, the page reloads, and a table is suddenly present, correct?
this can be fixed with JS like so:
<script>
(function autoScroll(){
document.getElementById('searchtable').scrollIntoView();
})()
</script>
or rather, scroll to the table if it contains rows (with jQuery for ease)
<script>
(function autoScroll(){
if( $('#searchtable tbody tr').length > 0 ){
document.getElementById('searchtable').scrollIntoView();
}
})()
</script>

In a dynamically generated table, I want to dynamically generate input tags, each with a unique id and an inline jQuery function, but it won't work.

This isn't working:
My table is generated dynamically using PHP, so each row's edit button has a unique id, and a unique inline jQuery function. That jQuery function will load a jQuery modal dialog for the user to modify the row's data (triggering AJAX to update the database and reload a new tbody into the table with the updated data).
In practice, the button doesn't respond. I've put a simple alert into the function, but it also doesn't work.
(I'm using the $(#...).dialog('open') idiom elsewhere on the same page, and it works well.)
Here is the code:
<tr>
<td>ADT Corporation Common Stock</td>
<td>adt</td>
<td>$31.59</td>
<td>$-0.78</td>
<td>-2.47%</td>
<td>4</td>
<td>FidelityIndividual</td>
<td>4</td>
<td>
<script>
$("#edit199").click(function(e){
alert("in the <script> function"); // doesn't work!
//alert( $("input[name='editfields199']").val() ); // really doesn't work!
e.preventDefault();
$('#the_edit_form').dialog('open'); // should open a nice modal pop-up
});
</script>
// The edit icon that the user can click in order to edit that row/record.
<input type="image" name="editfields199" id="edit199" src="images/gtk_edit.png"
value="ADT Corporation Common Stock^adt^4^FidelityIndividual^199" />
</td>
</tr>
<tr>
....more like the previous one...
<tr>

jQuery Auto-submit form inside of a <div> loads in new page

I'm developing a project of "prettifying" of a part of an existing web application. There is a need of putting the existing code: search criteria form in one div, and search results in another div (forming a kind of tabs, but that's another story).
Using jQuery I was able to manage that, but right now I am struggling with the results page, which by itself is yet another form that auto-submits to another file (using document.form.submit()), which is the final search results view. This auto-submit causes that the final view quits the destination div and loads as a new page (not new window).
So, the flow is like that:
First file, let's call it "criteria.html" loads the search criteria form (inside of a div) + another div (empty) destined to be filled with search results.:
<div id="criteria">... form with search criteria here...</div>
<div id="results"></div>
On submit, using jQuery's "hide()" method, I hide the first div (surrounding the search criteria form), and make Ajax call to the second file, let's call it "results.php":
<script>
$("#criteria").hide();
$.ajax({
...,
url: "results.php",
success: function(data){
$("#results").html(data);
},
...
});
</script>
results.php searches according to given criteria, and displays an "intermediary form" (which returns as a data result of the ajax query above) with a lot of hidden fields, and at the end executes:
<script>document.form.submit();</script>
which submits to another file, let's call it "resultsView.php"
This line causes that a result page shows outside the div "results", as a new page.
As there is a lot of logic in those files (more than 700 lines each), the idea of rewriting this monster just gives me creeps.
And now the question: is this a normal behavior (opening the result outside div)?
I tried removing the document.form.submit() code and everything works fine (well, without showing the results from "resultsView.php"). It's this line that causes the viewport to reset. I also tried with empty pages (to eliminate the possibility of the interaction with contents of the pages) - still the same result.
I hope there is not too much text and the problem is clearly stated. Every suggestion of how to fix this will be greatly appreciated.
If I understand your question correctly, you need to process the final submit using ajax instead of <script>document.form.submit();</script> so that you can handle the results on-page. Traditional form submits will always reload/open the action page. If you want to avoid that you'll have to control the form submit response via ajax and handle the results accordingly... like you are doing with the first submit.
The only alternative I can think of is to make div id="results" an iframe instead, so that it contains the subsequent form submit. Of course, that unleashes further restrictions that may cause other troubles.
I am not sure if I understood your question, but maybe u can do something like this.
This is my JQuery script: [I just wait for the submission search. When it happens, I use the $.Post method to call a function that should return the Html results (You can include somenthing to hide any field you want using JQuery or css)].
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#searchForm").submit(function() {
var theCity = $("select#chooseCity").val();
var theName = $("input#searchInput").val();
$.post("callProvideSearchResults.php", {theCity: theCity, theName: theName}, function(data) {
$("div#searchResults").html(data);
});
return false
});
});
</script>
This is my Body: {it consists of the choice of a city, the a form to provide the name of the person you are lookng for and the place to provide the results.
<body>
<FORM id="searchForm">
<h2>Select the city: </h2>
<select id="chooseCity">
<?php
$theCitiesOptionsHTML = "cityOptions.html";
require($thePathDataFiles.$theCitiesOptionsHTML); / A large list of cities
?>
</select>
<h2> What is the name of the person </h2>
<P> <INPUT id="searchInput" TYPE="TEXT" SIZE=50></P>
<P><INPUT TYPE="submit" VALUE="search"></P>
</FORM>
<div id="searchResults">
<!-- Here: Search results -->
</div>
</body>
// Function callProvideSearchResults.php // Just call the function that makes all the job and echo the $Html page
<?php
include "provideSearchResults.php";
$theName=$_POST['theName'];
$theCity=$_POST['theCity'];
echo provideSearchResults($theName, $theCity);
?>
// provideSearchResults.php // Database connection and search
<?php
function provideSearchResults($theName, $theCity) {
include "databaseConnection.php";
//database Queries
// Generate $theHtml using strings or ob_start, for instance
return $theHtml;
}
?>

Passing name of button as parameter

I am a newbie in JQuery and ajax and I would like to know if it is possible to pass a value in a function as parameter and using that value as a name of the button which was clicked and proceed with the logic so to send to servlet to handle. I am trying to not use javascript as it is page driven. So what I have in javascript is below.
function test(buttonId)
{
alert(buttonId);
}
The thing is I have a dynamic table which depends on some data I get from the database and as part of the table are some button which I create as I loop through the data and creating the table simultenously. So in one of the rows of my table I have a button with following:
<table id="error_data">
<tr>
<th>Rank</th>Other Table columns names........</tr>
<% for(int rank=1 ; rank<data.size();
rank++) { %>
<tr>
<td>
<input type="button" id="button<%=rank%>" value="Suspend Email" onclick="test('button<%=rank%>')">
</tr>
<%}%>
</table>
I hope I am not verbose in my question I want to be able to click on some button in one of my rows and only deal with data for that row and not refresh anything besides for that row data only. And I think maybe it possible with combination of ajax and jquery some how as ajax is data driven. Any shed of light is highly appreciated, is it possible to try and achieve what I am trying to do. Thank you in advance.

Categories