We Keep Coding

JS Express Get Paramters issue

I'm fairly new to Express and Node JS. I have set up a server with a paginated table. It also has two views which show different columns (you can switch between the two of them via a button). The GET parameters for the pagination and views are stored in variables and when you click let's say the "next page" button, the href will contain the GET parameter "view" from the previous query as well as the new GET parameter for the next page.
Now I have also added a text input form for each column of the table. I now have issues passing the GET parameters from the previous query.
This is what an example form looks like. The variable allOptions stores the GET parameters from the previous query. Still, the resulting query at the router will only be: {sid: DGP}...
<form action="/idb?<% allOptions%>">
<input size=3 type="text" id="sid" name="sid" value="DGP"><input type="submit" value="Go">
</form>
Can anybody help?
Thanks!

How to make my search bar complete its search

So, I'm trying to write this restaurant Finder app (just a fun project for myself), and I want there to be a search bar to connect what the user has typed (say chicken) into Yelp and be able to search for chicken restaurants.
Yelp's url for that is this: https://www.yelp.com/search?find_desc=chicken&find_loc=Richfield%2C%20MN. I want to be able to take "https://www.yelp.com/search?find_desc=", add x (what the user inputs), and then have the program piece it all together: "https://www.yelp.com/search?find_desc=" + "user search query". Doing it like this just brings me to "https://www.yelp.com/search?find_desc=&find_loc=Richfield%2C+MN". Any ideas?
<div id='content'>
<div id='content-app'>
<input type='text' id='field1' readonly value=''/>
<button onclick='search(<a href="https://www.yelp.com/search?cflt=)' id='search' style='width:80px'><a href="https://www.yelp.com/search?find_desc=" + "field1 readonly value text">Search</button>

There are a number of mistakes in the code that you've posted.
I've created an example below based on what I think you're trying to accomplish. This example demonstrates how to take the input from a text field, build a request URL, and redirect the browser to that URL.
function search() {
// Get value from search text field
var search = document.getElementById('search').value;
// Build Yelp request URL
var yelpUrl = 'https://www.yelp.com/search?find_desc=' + search;
// Redirect browser to Yelp request URL
window.location = yelpUrl;
}
<input id="search" type="text" />
<button onclick="search()">Search</button>
The example can be improved further by not using onclick(), and to instead use the addEventListener() function. But I think you can work up to using that.

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>

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

How can i save multiple section details in asp.net mvc3 page?

I am working on asp.net mvc3 application, in this i have user profile section this having many sections like general details, education, work and many...
Now my issue is i want user to insert their information and on click of add i want to display inserted information in another section and on click of save i want to insert all information into database.
Like,
Education Section::
In this user can fill their school details, college details.
School
School Division: Dropdown
School Name: Textbox
School Branch: Textbox
School Year: Dropdown
***Add School***
College
College Division: Dropdown
CollegeName: Textbox
CollegeBranch: Textbox
CollegeYear: Dropdown
***Add College***
**SAVE CANCEL**
I have this in my education section,
when user click on add school i want entered data display into another section and when user click on save button all data should go into database, so that we can reduce database roundtrip fo saving details on 1 click.
User can enter multiple schools and colleges in their profile.
My question is,
how can i display entered data into another section/div?
what is the best way to do this thing so that when user click on save button my code will fetch all entered data and saving data into database?
I tried this to display information entered on add school click but in this i am not able to get details back for saving.
function addSchool() {
var result = document.getElementById('schoolDiv').innerHTML + "</br>" + "<br/>School: " + document.getElementById('schooldiv').value + "<br/>School Name: " + document.getElementById('schoolname').value +"<br/>Branch: " + document.getElementById('branch').value + "<br/>School Year: " + document.getElementById('schoolyear').value;
document.getElementById('schoolDiv').innerHTML = result;
}
What is the best way to do so in asp.net mvc3?

It seems that you have only one problem, which is to extract the values already entered and display them in another format, almost like a running summary.
Firstly, I would highly recommend that you use a JavaScript library such as jQuery, which will take out all the heavy lifting of extracting and redisplaying values. You could also use the jQuery UI tabs plugin to handle the sections problem: http://jqueryui.com/demos/tabs/
Writing it yourself, there are various approaches you could take to redisplaying the entered data. One simple approach would be to have a Summary template, with its own sections, for example:
<div id="summary">
<div id="personalSummary" style="display: none;">
<p>Various elements to hold summary</p>
</div>
<div id="educationSummary" style="display: none;">
<p>Various elements to hold summary</p>
</div>
</div>
<form>
<div id='sections'>
<div id="personal">
<input type="button" value="Next" />
</div>
<div id="education" style="display: none;">
<input type="button" value="Next" />
</div>
</div>
</form>
So what you need now is some JavaScript that when they click on each button it extracts the values for that section and plugs them into the summary section and displays it. I can't show you how to do all of that but using the jQuery val function it would be something like:
<script type="text/javascript">
function completeSection(sectionId) {
var section = $('#' + sectionId);
var summary = $('#' + sectionId + 'Summary');
// swap a value over.
var value = $('#firstName', section).val();
$('#firstNameSummary', summary).val(value);
// etc
// now hide the input section, display the summary section and move the
// the whole summary to the next input section
section.hide();
summary.show();
$('#summary').prependTo($('#education'));
}
</script>
Note that the above is just a sketch of the idea. The idea is that you keep updating the summary, showing the updated section, hiding the data just input, then moving the summary box to the top of the next section.
When they click the final save button, although your sections are hidden, the will still get submitted.

One easy alternative us to simply do an Ajax save when they add a new section/ for example they click to add a new school, save the prior section or simply put a save button next to each section and when they finish each section they click save which does an ajax call to save only the recent changes. This would be accomplished using a jQuery .Ajax() call.