Conditional page scroll down - javascript

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>

Related

refresh only one div

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

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

Javascript is not executing while loading a php page2 into page1 via ajax

I am beginner to php and Javascript. i am facing an issue that is i've a page say page1 which has two input fields and a button(Go).While clicking 'Go' the page2 populates on same page (page1) which has a data table. i am trying to implement JS on that Table BUT JS scripts are not Executing.
(If i have a data table in a single page it works but upper scenario it does not).
Page1(Main page having inputs and button)
<script src="../javascript/file_history.js"></script>
<input name="advance_search" type="text" id="advance_search" size="26" />
<input name="button" type="button" onclick="showFileHistory()" value="Go" />
The Other Page having data table on ajax call through JS
<script src="../javascript/file_history.js"></script>
<script type="text/javascript" src="../javascript/gs_sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
var TSort_Data = new Array('tbl_filemgtview','s', 'i','f');
tsRegister();
alert('This should be pop up');
</script>
<table id="tbl_filemgtview">
<thead id="thead"> <tr class="viewpage_heading">
<th>Table heads </th></tr>
</thead></table>
What should be there? or the way of executing Script tags which are getting by pass in page 2?
Possibly Its because the elements previously were not in the DOM and when you click on the button the elements manipulate the DOM so events firing like
$("#test").click(function(){
// Do something
});
Wont work, Now to make it work you need to use
$(document).on("click", "#test", function(){
// Do something
});
it would be better if you provide us Code or jsfiddle

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;
}
?>

button in jquery mobile doesnt work as expected

I have a jquery mobile webpage. The page consists of a listView which is dynamically generated with jquery. In the end of this list i want to have a simple button , that when i hit it i simply alert something.
My HTML code looks like this :
<div data-role="page" id="Home">
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
</ul>
<form>
<button id="loadMoreAlbums">More Albums...</button>
</form>
</div>
</div>
The button as you see is hard coded under the dynamically generated listView. The jquery for the button is as simple as that :
$("#loadMoreAlbums").click(function(){
alert("yeah i am loaging more!");
});
I have 2 questions now:
1) When i load this page , the button is first loaded and i can see it for 2-3 seconds till the list is loaded and it goes in the end of the list. I dont really like that behavior , i would like that the button is "created" after the listView is already created, so that i dont see it like that in the page. However this is not a really problem , just for cosmetic reasons.
2) The real problem is that when i hit the button , instead of just alerting the simple text and nothing more , it "loads" the page again , and makes the listView vanish and only the button stay on screen. Why is it behaving like that though? Why is it trying to "load" the page again? I just want it to alert something , or do whatever my jquery tells it to do.
Change your HTML from
<button>...</button>
to
<button type="button">...</button>
By default, a <button> element has type="submit" and will submit the form when clicked.
http://www.w3.org/TR/html5/forms.html#the-button-element
$("#loadMoreAlbums").button().click(function(e){
e.preventDefault();
alert("yeah i am loaging more!");
});
The button is acting as a submit. By adding e.preventDefault(); you can supress the submit action.

Categories