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

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.

Related

Is there a good way to display collected data to the user in HTML or javascript and still keep the data?

I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.
I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.
Here’s how I am collecting, simplified as much as possible:
<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>
...
<p id="demo"></p>
Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>
No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.
The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:
<div>
Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
<br>
Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
<br>
<button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>
<p id="demo"></p>
<script>
function displayNumbers() {
// get the stored values and show them to the user
var providerNPI = sessionStorage.getItem('providerNPI');
var providerTIN = sessionStorage.getItem('providerTIN');
document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
}
function storeNumbers(numbersObject) {
// store the values locally so you can access them wherever you need them
sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
}
function captureNumbers() {
// first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
var providerNumbers = {};
providerNumbers.providerNPI = document.getElementById("providerNPI").value;
providerNumbers.providerTIN = document.getElementById("providerTIN").value;
// then pass the object variable to the storage function
storeNumbers(providerNumbers);
// then call the display function
displayNumbers();
}
</script>
There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.
Or you could use localStorage to save the data temporarily and save them later in certain circumstances...

How to Set Header Text of Modal Dialog According to the Table element and his ID

Hello everyone and sorry in advance for my very bad English.
I'm working on an ASP.NET MVC project with a JavaScript framework as the front-end.
I have a table which contains customer names retrieved from a database. Now I want to show a modal dialog and set the text of its header according to the customer name which has been clicked. At the same time I would like to get the customer Id. For example, when clicking "Georges", the modal dialog pops up and its header text is set to "Georges".
Here is my code.
The customer table look like this:
<div class="col-lg-6">
<div class="container-fluid" id="DailyTask">
<h4>Daily Tasks</h4>
#if (Model != null)
{
List<SchedulerTool.Models.spGetDailyBatchTask_Result> batches = Model.DailyTask;
foreach (var batch in batches)
{
<div class="bs-callout bs-callout-warning" id="dailybatch">
<input name="currentdailyBatchId" id="#batch.BatchId" hidden type="text" value="#batch.BatchId" />
<input name="currentdailyBatchName" id=" #batch.BatchName " hidden type="text" value=#batch.BatchName />
<button class="btn btn-group-justified" id="dailybatchTask" data-title="#batch.BatchName" data-target="#dailybatchTaskModal" data-toggle="modal" data-bid="#batch.BatchId">
<span class="fa-bitbucket-square" id="name">#batch.BatchName</span>
</button>
</div>
}
}
</div>
The JavaScript code is:
$('dailybatchTask').on('click', function ()
{
var batchId = $(this).data('bid');
var batchName = $(this).data('title');
// Here I set the table name a template table
$("h4 a#bathDailyTaskModalLabel").html(batchName);
// Here I set the Id to a template table
loadMasterTable("LoadObjectsNotBatched", batchId, DailyBatchElementUrl, "DailyBatchCollapseElementId");
});
Customers table:
The modal that is popover when clicked on customer:
The problem is: when I clicked on the first element of the customer table, the modal is correctly shown (the header and id are correct) but when I clicked on the others elements the JavaScript code is not executed.
Hope someone can try to understand my problem and will help me!
You are trying to catch all buttons by ids. But in HTML ids must be unique. Because that jquery your click event only matches first data. You need to fix ids before jquery part. If you really need it you can define a counter for loop and use it like this;
id="dailybatchTask-#counter"
But you already defined data-bid so basically, you can just add a class name for the button like this;
class="btn btn-group-justified daily-batch-button"
then only you need to;
$('daily-batch-button').on('click', function () {
...
...
...
});

DOM manupulation in meteor

I want to know abt DOM manipulation in meteor. My code goes as follows:
<template name = "studentList">
{{#each}}
<div class = "name">
Name: {{this.name}}
</div>
<div class = "age">
Age: {{this.age}}
</div>
<button class = "edit"> Edit </button>
{{/each}}
<button class = "addStudent"> Add Student </button>
</template>
Template.studentList.helpers({
studentlist:function(){
return Students.find();
}
});
Template.studentList.events({
//I am doing the DOM manupulation here based on the buttons clicked
});
I get a list of Student Info from the DB and display them in the template. Now for each student, there is an edit button. When user clicks this edit button, I want to change the "name" and "age" field of the student as text field and give an option to "save" and "cancel".
Similarly, I have an "add student" button at the end of the template. When a user clicks it, I want to display a form, where student's name and age is added and then saved.
So far, I am being able to do this, but in a very naive way by using lots of Jquery/Javascript code in the events of studentList. I read many post that says this is not the correct way.
Can anyway please tell how can this feature be achieved in meteor. Or just to some possible ways of doing it.
Help appreciated.
This is a possible way to accomplish this.
Lets try to do this step-by-step
First this is how the HTML should look.
{{#if editName}} <!-- editName template helper -->
<!-- If the Session is equal to true this part of the html will be showed -->
<input type="text" class="newName" value="{{this.name}}" />
{{else}}
<!-- this is what we show by default on the view, if user click the div, the input will be showed -->
<div class="name">Name: {{this.name}} </div>
{{/if}}
Now the JS.
The helper should look like this.
Template.studentList.helpers({tName:function(){
return Session.get("studentName" + this._id); //getting the session true or false.
}
});
And the Events.
Template.studentList.events({
'click .name' : function(event,template){
//On this event we are Setting the Session to true and holding the id of the student
return Session.set("studentName" + this._id,true)
},
'keypress .newName':function(event,template){
//Some keypress to update the value
//using http://docs.meteor.com/#/full/template_$ to get the value using meteor
var newNameStudent = template.$('.newName').val();
if(event.keyCode == 13){ //if enter lets update the value
Students.update({_id:this._id},{$set:{name:newNameStudent}})
return Session.set("studentName" + this._id,false) //setting to false the session to hide the input and show the <div>
}
},
'click .cancel':function(){
return Session.set("studentName" + this._id,false) //setting to false the session to hide the input and show the <div>
}
})
If you see there is not too much code (i guess), you get the idea how to use the sessions to do simple CRUD operations.
I made a Meteorpad of this working example, check it.

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

Clear query term displaying in search bar when results page loads

On a search results page, I have:
1) a global search bar in the site header
2) another search bar, specific to the page, that's part of a custom image search.
Issue:
When I perform a search using #2, and the results page loads, BOTH search input fields are populated with my search term.
Desired functionality:
a) both fields should be cleared when the results page loads
OR, at the very least:
b) a #2 search term shouldn't be populated in the #1 search field as well
There is some existing script tied to the site search, but I'd like to use a separate solution, ideally with jQuery, to clear the search fields. This way the user doesn't have to manually clear out text when performing a new search. Any ideas?
here is a working fiddle:
http://jsfiddle.net/acturbo/S3tqZ/
html:
<div id="search-bar">
<form id="search-bar-form">
<input id="search-bar-input"> value to find
Search
</form>
</div>
<div id="search-bar-page">
<form id="search-bar-page-form">
<input id="search-bar-page-input"> value to find on page
Search
</form>
</div>
jquery:
$().ready(function() {
$("#search-bar-page-btn").on("click", function(){
$("#search-bar-input").val("");
$("#search-bar-page-input").val("");
});
});

Categories