I'm trying to create a link of drop down list for the Bible on my webpage, I'm new to this thing. What I want is to do is to be able to select or ask the user to input the verse that they want to go to and then click Submit button then take that to the section of the Bible. For instance, if the user input Mathew 1: 2-10, this should take them to that section of that line of the Bible verse. How do I start doing this? and is Javascript and Jquery even the correct script to use or I need to use other programming language?
Thank you.
If you are planning to store the Bible text in a data base on a server, then you would need two programming languages: one for the server and one for the client (browser). JavaScript (with or without jQuery) would be a good tool for the client. Alternatives would be ActionScript (Flash) or a Java applet, but I would not recommend either of them for this.
On the server side, it completely depends on the nature of the server. Probably the most common combination is PHP and MySQL, although there are lots of other possibilities. For instance, you could store the data in XML files on the server and use XSLT to format the results for display in HTML on the client. That's the approach taken by tanach.us (for the Hebrew Bible).
Intrigued by such a task I was wondering. Yes it can be done, but don't just wave away #Ted his comment. It will indeed be a better option to choose for a database application.
But yes, if you don't mind the work and just use it on a small scale, it is possible to create a javascript based application to serve your pages.
You could use an iframe to serve your pages. With creating a selection box that populates a second one, it is possible to make an acceptable application. The pages are collected in javascript objects and served. In this example the domain of w3schools is used.
var Mathew = {
verses: ["verse2_1", "verse2_2", "verse2_3"],
verse2_1: "html/html_iframe.asp",
verse2_2: "tags/tag_select.asp",
verse2_3: "jquery/default.asp"
}
The first selection box will contain a hand coded option list
<select name="book" id="book">
<option value="choose">Please choose</option>
<option value="Mathew">Mathew</option>
<option value="John">John</option>
</select>
The second option list is automatically populated with the help of the javascript object.
function populateSecondSelect(book) {
if (book == "choose") {
$("#verses").children().remove();
$("#verses").append("<option>choose a book first</option>");
$("button").prop("disabled", true);
return;
}
$("button").prop("disabled", false);
var obj = eval(book);
$("#verses").children().remove();
$(obj.verses).each(function () {
$("<option/>", {
name: this,
id: this,
value: this,
text: this
}).appendTo("#verses");
});
}
With the second selection made, the button can be clicked to serve the page:
function fetchVerse() {
var book = $("#book").val();
var verse = $("#verses").val();
var url = baseUrl + eval(book + "." + verse);
$("#frame").attr("src", url);
}
The whole thing is working in a fiddle: http://jsfiddle.net/djwave28/nEqeK/4/
It is fun, but a database for a whole bible is better ..
Related
I need to develop a simple web page that accepts user information( name, age, birthdate, etc) and saves the data to a CSV or a text file to the server. I currently use Google sheets, but I need something that's more customizable and something that does some simple error checking. Are there any open source frameworks out there that I can use to put something together in a couple hours? I have a mechanical engineering background, and I'm not too familiar with web technologies. Any pointers will be greatly appreciated.
jQuery
JavaScript:
function saveUserData(url, data) {
var csv = [], // the array of values
del = "="; // the "delimiter" or "separator"
function handle(string) {
return encodeURI(string)
.replace(/,/g, "%2c");
}
for(var property in data)
csv.push(property + del + handle(data[property]));
// "name=John Doe,dob=Jan 1%2c 2000"
$.post(url, {data: csv.toString()})
.done(function(returned_data) {
// if you need this later
}, "json");
// "url" the the url to send the data to
// "data:" will likely be determined by the server you're using
// "json" will make "returned_data" a JSON object (if the server supports it)
}
Tesla88,
In your case, you need to write a server-side script. Below are 3 links that will show you how to
open, write, and close a file.
That's how far as I would elaborate on my answer, you need to show us that you actually did the work, and if you ran into issues, you can ask here again.
I hope the above helps.
-Anthony
I need some help in understanding what to do next.
I need to write a web based search function to find medical records from an XML file.
The operator can enter either part or all of a patient name and Hit Search on the JSP web page.
The server is suppose to then return a list of possible patient names with the opportunity for the operator to go to next page until a possible patient is found. They can then select the person and view more details.
On the Server side
I have an XML file with about 100,000 records. There are five different types of records in the file. (This is roughly about 20,000 x 5 = 100,000).
I have a java class to source the xml file and create a DOM to traverse the data elements found on the file.
-- XML File Begin
100k - XML file outline
<hospital>
<infant key="infant/0002DC15" diagtype="general entry" mdate="2015-02-18">
<patient>James Holt</patient>
<physician>Michael Cheng</physician>
<physician>David Long</physician>
<diagnosisCode>IDC9</diagnosisCode>
..
</infant>
<injury key="injury/0002IC15" diagtype="general entry" mdate="2015-03-14">
<patient>Sara Lee</patient>
<physician>Michael Cheng</physician>
<diagnosisCode>IEC9</diagnosisCode>
..
</injury>
<terminal key="terminal/00X2IC15" diagtype="terminal entry" mdate="2015-05-14">
<patient>Jason Man</patient>
<physician>John Hoskin</physician>
<diagnosisCode>FEC9</diagnosisCode>
<diagnosisCode>FXC9</diagnosisCode>
..
</terminal>
<aged key= xxxx ... >
...
</aged>
<sickness key= xxxx ... >
...
</sickness>
</hospital>
approx 5 ( )x 20,000 = 100K records.
Key and patient are the only mandatory fields. The rest of the elements are Optional or multiple elements.
-- XML File End
Here is where I need help
Once I have the DOM how do I go forward in letting the client know what was found in the XML file?
Do I create a MAP to hold the element node links and then forward say 50 links at a time to the JSP and then wait to send some more links when the user hits next page?
Is there an automated way of displaying the links, either via a Java Script, Jquery, XSLT or do I just create a table in HTML and place patient links inside the rows? Is there some rendering specific thing I have to do in order to display the data depending on the browser used by client?
Any guidance, tutorials, examples or books I can refer to would be greatly appreciated.
Thank you.
I don't know an automatic way to match the type in jQuery, but you can test the attributes, something like verify if a non optional attribute in the object is present:
// Non optional Infant attribute
if(obj.nonOptionalAttribute) {
// handle Infant object
}
Or you may add an attribute to differentiate the types (something like a String or int attribute to test in your Javascript).
if(obj.type == 'infant') {
// handle Infant object
}
#John.west,
You can try to bind the XML to a list of objects (something like Injure implements MyXmlNodeMapping, Terminal implements MyXmlNodeMapping, Infant implements MyXmlNodeMapping and go on and have a List) to iterate and search by the value at the back end or you can pass this XML file to a Javascript (if you are using jQuery you can use a get or a post defining the result type as XML) and iterate over the objects to find what the user is trying to find...
Your choice may be based on the preference to use processor time in the server side or in the client side...
How do i save entered/ inputted text using JavaScript/ html.
What do I want:
Name or code etc to be entered in a box (prompt box eksample) and then I want it to be displayed/ printed on the page and I want it to remain there so other people that visit can see it.
What I have:
I have code that shows a prompt box where you can enter text then displays it in green. However what i want is for the entered text to remain on the website for others to see...
function mobCode() {
mobCode = prompt("Insert Code", "Code here");
document.getElementById("mC").innerHTML = mobCode;
document.getElementById("mC").style.color="green";
}
<p id="mC"> Mob Code </p>
<button type="button" onclick="mobCode()"> Click to Add </button>
What you will probably have to do is write a script that will send the entered input to a database you build which can store that information,and then have your js access the database to display it in a certain area of your page.
Check out this Q & A one of the answers is a nice article to help explain the idea behind it: Send data from javascript to a mysql database
If you want to deal easier with persistence of the data, instead of setting up database and using server side script you can look at Facebook's Parse. The free plan is quite usefull for small projects. There is a JavaScript SDK that can be used directly from your javascript code.
Also you can view statistics from the Parse dashboard.
Here is some saple code for example:
// Create a new Parse object
var Post = new ParseObject("Post");
var post = new Post();
// Save it to Parse
post.save({"title": "Hello World"}).then(function(object) {
alert("Yay! It worked!");
});
i'm quite new to javascript/jQuery/Json. i'm building myself a local app ( no client side for now). right now i have a simple form (inputs and submit) and would like to get the inputs from the user with javascrip/JQuery and then build a JSON object and store it on a file. i managed to get the inputs using jQuery ,and using JSON.strigify() i have a JSON object. only thing is that i dont know how to write to a file with JS. i searched for a solution and understand that i might need to use PHP for that as JS is not meant for changing files.
here is my code:
HTML form:
<form name="portfolio" id="portfolio" method="post" onsubmit="getform()">
<p>General</p>
Portfolio Name: <input type="text" id="portfolioName" name="portfolioName"><br>
Owner First Name: <input type="text" id="ownerFName" name="ownerFName"><br>
Owner Last Name: <input type="text" id="ownerLName" name="ownerLName"><br>
<p>Risk Management</p>
%stocks : <input type="text" id="stocksPerc" name="stocksPerc"><br>
<input type="submit" value="submit">
</form>
JS code
function getform() {
var portfolioName = document.portfolio.portfolioName.value;
var ownerFname = document.portfolio.ownerFName.value;
var ownerLname = document.portfolio.ownerLName.value;
var stocksPerc = document.portfolio.stocksPerc.value;
var myJsonObject =JSON.stringify({
"general": {
"portfolioName": portfolioName,
"ownerFname": ownerFname,
"ownerLname": ownerLname
},
"riskManagement": {
"stocksPerc": stocksPerc
}
});
alert(myJsonObject);
event.preventDefault();
};
now in "myJsonObject" i have the JSON object which i would like to write to a local file.
later on i would like to read this file ,and maybe update some of the values there.
can someone please help me understand how do i write it to a file ?
you can try and load this page which runs my code. hope it works for you.
note: programming is my area of interest but i didnt study it ,i'm learning all by myself so i'm sorry if i askqdo things that make you blind for a moment :). also this is the first question i post here ,feel free to say if i need to improve.
Thanks
Sivan
update + clarification : Thanks for the answers guys ,localStorage is something i didnt know about. from what i understand about localStorage its only good for working in a single domain/location. (i encountered this question on site). what if i want the option of running the app from different locations - lets say there will be only one person updating the JSON data, no need for sync/lock and stuff like that. right now my files (JS,JSON..) are saved in dropbox ,this is how i can use the app from different locations today , i dont have any other server.
2'nd update : i tried the localStorage solution i've been offered and even though its a great capability ,its not exactly what i'm looking for since i need the JSON data available in more then one location (i'll be using my desktop and my laptop for instance).
i'd be glad if you have other suggestions.
Thanks Again.
Check out the HTML5 localStorage API. You will be able to store your JSON objects there and retrieve them. They will be stored as key-value pairs. You can't write to a file using JS AFAIK.
Don't use a file as storage, use localStorage: http://diveintohtml5.info/storage.html. If you need to save information on a session scope, you should use sessionStorage, mind though that the latter is not persistant.
An example of how you would use it:
var item = {
"general": {
"portfolioName": portfolioName,
"ownerFname": ownerFname,
"ownerLname": ownerLname
},
"riskManagement": {
"stocksPerc": stocksPerc
}
}
// set item, you should think up of a unique key for each item
localStorage.setItem('your-key', item);
// remove it if no longer needed, you don't have a lot of space
localStorage.removeItem('your-key');
Saving files is possible in some browsers but this will probably be removed in the future - so I wouldn't use it unless you must.
This article shows how to -
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
You can post the json to a server and use the server to generate a download file (ask a new question if thats what you seek)
and finally - are you sure you want to save to file? if all you want is to save and restore data then there are better alternatives (such as localStorage, cookies, indexDb)
I'm trying to make a field similar to the facebook share box where you can enter a url and it gives you data about the page, title, pictures, etc. I have set up a server side service to get the html from the page as a string and am trying to just get the page title. I tried this:
function getLinkData(link) {
link = '/Home/GetStringFromURL?url=' + link;
$.ajax({
url: link,
success: function (data) {
$('#result').html($(data).find('title').html());
$('#result').fadeIn('slow');
}
});
}
which doesn't work, however the following does:
$(data).appendTo('#result')
var title = $('#result').find('title').html();
$('#result').html(title);
$('#result').fadeIn('slow');
but I don't want to write all the HTML to the page as in some case it redirects and does all sorts of nasty things. Any ideas?
Thanks
Ben
Try using filter rather than find:
$('#result').html($(data).filter('title').html());
To do this with jQuery, .filter is what you need (as lonesomeday pointed out):
$("#result").text($(data).filter("title").text());
However do not insert the HTML of the foreign document into your page. This will leave your site open to XSS attacks.
As has been pointed out, this depends on the browser's innerHTML implementation, so it does not work consistently.
Even better is to do all the relevant HTML processing on the server. Sending only the relevant information to your JS will make the client code vastly simpler and faster. You can whitelist safe/desired tags/attributes without ever worrying about dangerous ish getting sent to your users. Processing the HTML on the server will not slow down your site. Your language already has excellent HTML parsers, why not use them?.
When you place an entire HTML document into a jQuery object, all but the content of the <body> gets stripped away.
If all you need is the content of the <title>, you could try a simple regex:
var title = /<title>([^<]+)<\/title>/.exec(dat)[ 1 ];
alert(title);
Or using .split():
var title = dat.split( '<title>' )[1].split( '</title>' )[0];
alert(title);
The alternative is to look for the title yourself. Fortunately, unlike most parse your own html questions, finding the title is very easy because it doesn;t allow any nested elements. Look in the string for something like <title>(.*)</title> and you should be set.
(yes yes yes I know never use regex on html, but this is an exceptionally simple case)