HTML/Javascript search function with AJAX - javascript

I've created a webpage where I want users to be able to search for a word/term stored in a CSV file, and if that term is found the full line for that line entry will be returned and displayed to the user (ideally in table format, otherwise a textarea will do).
But I need to do this using AJAX, and I also cant use PHP (unfortunately, otherwise I wouldn't be asking this question).
So far I have a table for the form/input/button, and I've also got the code to read the file, but I'm a bit stuck with bringing both together. I know this should be an easy thing to do, but I've spend a lot of time going through tutorials and online questions but havent been able to find anything similar.
If anyone knows of any tutorials that covers this, or can help out with the code below it would be appreciated.
<table>
<tr><td>Enter Search Term:
<input type="text" name="searchword" />
<input type="button" name="searchbutton" value="Search" onclick="contentDisp();">
</td></tr>
<tr><td><textarea id="contentArea" rows="40" cols="60"></textarea></td></tr>
</table> //currently using text area but ideally this would be displayed in a table
<script type="text/javascript">
function contentDisp()
{
$.ajax({
url : "file.csv",
success : function (data) {
$("#contentArea").html(data); // I THINK SOMETHING NEEDS TO GO IN HERE, WHICH WILL GRAB THE SEARCH TERM ABOVE AND THEN ONLY DISPLAY FILE CONTENTS USING THAT TERM, POSSIBLY 'CONTAIN' */
}
});
}
</script>

It is possible to do this strictly via JavaScript by using some strpos and indexOf functions (indexOf is the starting point, while the other will look for the string delimiter(s) ).
it is also possible to do the task with php if you feel comfortable with it, if you're restricted by domain-origin restriction, take a look at JSONP, which stands for JSON with Padding - which basically means that you'll need to wrap the result in a JavaScript function.
good luck.

User Regular Expressions to find your string and to parse the found line in the CSV data.
http://www.w3schools.com/jsref/jsref_obj_regexp.asp

HTML
<input type="text" id="text" />
<input type="submit" id="btnsubmit" />
Script
$(function(){
$('#btnsubmit').on('click', function(){
var csv = $.ajax('text.csv');
csv.done(function(data){
var str = data.split(',');
var value = $('#text').val();
$.each(str, function(index, item){
if(item.match(value)){
console.log(item) //Output
};
})
})
})
});
CSV
Presidency ,President ,Wikipedia Entry,Took office ,Left office ,Party ,Portrait,Thumbnail,Home State

Why would you use strpos and indexOf when javascript already has built-in functions for matching strings?
http://jsfiddle.net/AWZg8/

Related

Micro data from json

I was wondering how to get through the testing tool of Google when it comes to rich snippets or micro data and using json data.
The thing is that I don't have the option to use PHP and only javascript. So when I want to grab review data from let's say Trusted Shops for a shop I never get passed the testing tool because the data is always empty when Google crawls the page.
So what I mean is this:
There's a direct link to the json file with the review data
http://api.trustedshops.com/rest/public/v2/shops/X17BD396442BCEE0808C79156D0E95F97/quality/reviews.json
What I tried is this
<script type="text/javascript">
window.onload = function(){
var url = 'http://api.trustedshops.com/rest/public/v2/shops/X17BD396442BCEE0808C79156D0E95F97/quality/reviews.json';
$.getJSON(url, function(data){
var stuff = data.response.data;
var review = stuff.shop.qualityIndicators
$('#value').html(review.reviewIndicator.overallMark);
$('#votes').html(review.reviewIndicator.activeReviewCount);
});
}
</script>
HTML output
<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
<span rel="v:rating">
<span property="v:value" id="value">4.83</span> /
<span property="v:best" id="best">5.00</span>
</span> of
<span property="v:votes" id="votes">58</span> reviews.
</span>
Now with the Testing tool from Google I always get 3 errors saying "can't leave blank...".
Is such thing even possible??
So I have no clue how to use this tool, but none of their examples have javascript in them. I don't think this tool will execute any javascript in the left hand box before it tries to validate the data. There are examples with <script type="application/ld+json"> tags, but they are just JSON data, and not executable code (note the type).
To verify this I simply entered this snippet:
<script type="text/javascript">
console.log('it this on?');
</script>
When I click validate, nothing shows up in my browser console.
Whatever you are trying to make this tool do, I think is outside the scope of how it's intended to be used. It appears that this tools can validate the result of your code, but it cannot also run your code.

Convert HTML text area value to jqmath formula

I am new to jqmath; I have contained a textarea field in my HTML:
<textarea cols="30" rows="2" id="mathSrc1"></textarea>
I will set mathematical formula in the text area so that it will be displayed in <div> tag:
<div id="mathTgt1"></div>
This code is available in http://mathscribe.com/author/jqmath.html. But I don't know how to use it. Please help me.
Thank you.
i got solution
<input type="textarea" name="formula" id="test_formula" onkeyup="paste_formula()" />
<span id="formula_print"></span>
script code
function paste_formula() {
var val = document.getElementById("test_formula").value;
val = "$$" + val + "$$";
var di = document.getElementById("formula_print");
di.innerHTML = val;
M.parseMath(di);
}
I like Nathan's question - what exactly are you trying to do? The normal case is to have some math in your static web page, which you just surround with $s and it gets parsed and formatted at load time. If you want to create mathematical expressions dynamically (after load time), see Jqmath - apply after page load. You can also look at the jqmath source to see how http://mathscribe.com/author/jqmath.html does it. All these methods end up calling the same functions to do the actual work (parsing and formatting).

Alfresco- Pass variable values from js controller to freemarker

can anybody tell me what am I doing wrong?
I want to retrieve all my alfresco sites with this code (this should work):
model.sites = siteService.listSites(null, null, 0); // return type= List<Site>
And now i want to retrieve this list model.sites in my HTML freemarker template like this:
<body> ${sites} </body>
How can I view this sites list. I know i am getting it wrong in my ftl, but can't find a solution how to retrieve it.
You'll need to loop over the sites in your freemarker. Assuming you wanted a list of the site names, with commas between them, then your freemarker would instead want to look something like:
<body>
<#list sites as site>
${site.shortName}<#if site_has_next>,</#if>
</#list>
</body>

Take numbers from input and plug into an equation javascript

I need help figuring out how to make this work if anyone can give me some insight as soon as possible even a little help would be greatly appreciated!!!!
<body>
<form name="kdr">
Kills: <input type="number" id="kill" name="kill"></input>
<br>
Deaths: <input type="number" id="death" name="death"> </input>
<br>
<button onclick="kd()"> Calculate</button>
</form>
<script>
function kd()
{
var k = document.getElementById("kill").value;
var d = document.getElementByID("death").value;
var r = k/d
alert("Your kill/death ratio is: " + r)
}
</script>
</body>
I cant seem to get the variables to pull the information from the input field, at least I think that is the issue. Again any insight would be great.
You have ID in your d assignment when it should be Id like in your k assignment.
http://jsfiddle.net/Xaleph/k3Hv9/
Looks like Sam beat me to it. ID should be id and I added semicolons to the end just for good measure.
Also - consider not using inline javascript events. Instead, put your code in a supporting file and handling events similar to the following will make your code a little easier to manage (from w3schools - can't add another link, not enough reputation...).
object.onclick=function(){SomeJavaScriptCode};
Or if you're feeling adventurous, use jquery or another javascript library to handle your events:
$('#buttonId').click(function(){
alert("Your kill/death ratio is: " + ($('#kill').val()/$('#death').val()));
}

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.
jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});
I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...
In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!
I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.

Categories

Resources