|
After huge research, i am thinking to build with JavaScript - Search engine with Angular/Vue.js/Meteor/React as front-end
Choice of javascript client side storage is below
1) IndexedDB
2) JScene
3) LargeLocalStorage
4) ydn db
5) PouchDB
Couple of Links
https:
https:
http:
https:
Please kindly suggest which one would be best suited...
Basically planning to built a cross platform system which accepts huge files from the user and finally does a full text search...
In this way, the user just needs the browser no installation is required......
In this way, the application will be purely portable irrespective of OS....
This would be absolutely cross platform
Featurs trying to build once the files got indexed by the front-end code/logic
1) Search Box with type-ahead search
2) Combo box to choose the language
3) Number of hits should be while typing. Please type some text in and
you will understand what is number of hits
4) Search keyword should be highlighted in the left with portion of text.
On clicking the text, the entire subject with highlighted search
should shown in the right
nearly 2,000 files are in text format of 600 kB each size.
the files can be anything - log file or any text file....If support other formats also it is well and good
Please kindly advice with suggestions or comments... As this will benefit for many...
I never come across several open source apps which does full text search or have the functionality which does everything in front-end or client-side
Thanks.
|
|
|
|
|
hmm...
I would choose JScene.
Seems to be designed for your concept.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
But JScene is a proof of concept..It's not a completed product or reliable to be used in production.
We need a validated and proven open source which is active in development, so that we get proper support.
Can you suggest a working and proven library similar like JScene?
|
|
|
|
|
No.
I use Local Storage for storing JWT Auth Tokens and other small stuff such as program options, But have never considered using it for storing a database. The thought simply never occurred to me.
I see it different, because I as a user use my Desktop at work to shop, and my phone at home to purchase or vice versus.
I would not want to write a program in which the data was not available on both my devices.
But:
I am considering on my next shopping application written in a JavaScript framework like Angular to store cart content on the users device in cookies or perhaps Local Storage. To just use a JSON format and store the JSON text as a string. Perhaps a combination of both, in which the cookie says there is cart data and the data is in Local Storage. But this would break my rule unless I read the cookie, and if the user is logged in, I pickup the cart content and write it to their account document in MongoDB. I think EBay is doing this now.
But for you, what your doing is experimental as well and you seem to share the same idea with the JScene developer.
You would have to do a proof of concept in code and try them and see which works better. Just fill your concept with fake data but make sure you can store and retrieve.
[edit]
Not everything you can imagine has already been written and available as open source with support. Most web developers have never even heard of Local Storage, so the pool of choices for this will be very small. Your idea is an extreme concept.
Just my Opinion
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
jquery validation in Drop down..
if i am select the value another same div can't select this value..
and print the alerdy message "this value already selected"
|
|
|
|
|
There is no magic way to do it. You need to write code to do it.
Write code for the change event of the dropdown. Check if it's value is already selected. If so, display a message and reset the dropdown selected value.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
<pre lang="Javascript"><pre lang="Javascript"> $("#everything").validate({
onsubmit: true,
rules: {
dd1: {
required: {
depends: function(element) {
return $("#dd1").val() == "none";
}
}
},
messages: {
dd1: {
required: "Please select an option from the list, if none are appropriate please select 'Other'",
},
}
});
|
|
|
|
|
Just remove the value from the next select using JQuery
Then if they change the first value, add the value back, or reload the values in the next select
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I have created a dynamic drop-down list using JavaScript and I want the alert that is triggered on the screen after making the selections to say the wrestling level picked the wrestler name picked and the year in the alert and after that I want the JavaScript code to display an I-frame that contains a table of that wrestler's videos for that year. I somewhat understand the logic of the drop-down list but I don't know how to put the selections that I make on the list display in the alert such as the wrestling level picked the wrestler name picked and the year. Right now all the alert does is displays the final selection which is the year but I want all the selection information to be put into the alert. Secondly after this alert displays I want the JavaScript code to trigger the creation of an I-frame that displays a table with all the wrestler's videos for that year. I know how to create the table and information related with that but I can't seem to figure out the code to create an I-frame. As far as JavaScript goes I'm not very experienced and would be considered a beginner any help would be appreciated. The code I have is below.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Test</title>
<script type="text/javascript">
function urlRedirectTo(obj)
{
alert('Here are all the wrestling videos for '+obj);
if('2013-2014' == obj)
var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
}
function dynamicdropdown(listindex)
{
document.getElementById("sub_subcategory").length = 0;
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("subcategory").length = 0;
switch (listindex)
{
case "Elementary" :
document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
document.getElementById("subcategory").options[1]=new Option("Wordpress","Wordpress");
document.getElementById("subcategory").options[2]=new Option("Magento","Magento");
break;
case "Junior High" :
document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
document.getElementById("subcategory").options[1]=new Option("Strauts","Strauts");
document.getElementById("subcategory").options[2]=new Option("Hibernate","Hibernate");
break;
case "Junior Varsity" :
document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
document.getElementById("subcategory").options[1]=new Option("Prototype","Prototype");
document.getElementById("subcategory").options[2]=new Option("jQuery","jQuery");
break;
case "Varsity" :
document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
document.getElementById("subcategory").options[1]=new Option("Marc Hendricks","Marc Hendricks");
break;
default:
document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
break;
}
return true;
}
function dynamicdropdownone(listindex)
{
document.getElementById("sub_subcategory").length = 0;
switch (listindex)
{
case "Wordpress" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("Wordpress Version1","wordpress_version1");
document.getElementById("sub_subcategory").options[2]=new Option("Wordpress Version2","wordpress_version2");
break;
case "Magento" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("Magento Version1","magento_version1");
document.getElementById("sub_subcategory").options[2]=new Option("Magento Version2","magento_version2");
break;
case "Strauts" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("Strauts Version1","strauts_version1");
document.getElementById("sub_subcategory").options[2]=new Option("Strauts Version2","strauts_version2");
break;
case "Hibernate" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("Hibernate Version1","hibernate_version1");
document.getElementById("sub_subcategory").options[2]=new Option("Hibernate Version2","hibernate_version2");
break;
case "Prototype" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("Prototype Version1","prototype_version1");
document.getElementById("sub_subcategory").options[2]=new Option("Prototype Version2","prototype_version2");
break;
case "jQuery" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("jQuery Version1","jquery_version1");
document.getElementById("sub_subcategory").options[2]=new Option("jQuery Version2","jquery_version2");
break;
case "Marc Hendricks" :
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
document.getElementById("sub_subcategory").options[1]=new Option("2013-2014","2013-2014");
document.getElementById("sub_subcategory").options[2]=new Option("2014-2015","2014-2015");
document.getElementById("sub_subcategory").options[3]=new Option("2015-2016","2015-2016");
document.getElementById("sub_subcategory").options[4]=new Option("2016-2017","2016-2017");
document.getElementById("sub_subcategory").options[5]=new Option("2017-2018","2017-2018");
break;
default:
document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
break;
}
return true;
}
</script>
</head>
<body>
<div class="sub_category_div" id="sub_category_div">
<script type="text/javascript" Wrestling Level="JavaScript">
document.write('<select name="subcategory" id="subcategory" onchange="javascript: dynamicdropdownone(this.options[this.selectedIndex].value);"><option value="">Please select Wrestler</option></select>')
</script>
<noscript>
<select name="subcategory" id="subcategory" >
<option value="">Please select Year</option>
</select>
</noscript>
</div>
<div class="sub_subcategory_div" id="sub_subcategory_div">
<script type="text/javascript" Wrestling Level="JavaScript">
document.write('<select name="sub_subcategory" onchange="javascript: urlRedirectTo(this.options[this.selectedIndex].value);" id="sub_subcategory"><option value="">Please select Year</option></select>')
</script>
<noscript>
<select name="sub_subcategory" id="sub_subcategory" >
<option value="">Please select Year</option>
</select>
</noscript>
</div>
</body>
</html>
|
|
|
|
|
codeguy1 wrote: Right now all the alert does is displays the final selection which is the year but I want all the selection information to be put into the alert.
Then you need to pass that information into the function that is creating the alert.
codeguy1 wrote: I can't seem to figure out the code to create an I-frame.
If you google javascript create iframe I'm sure you'll find a ton of examples. However, I would suggest instead using a div and using jqueryui to pop it up as a dialog.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
I tried passing information into the function but when I try to make selections on the webpage it won't even let me select the wrestler or year. Here's my code.
function urlRedirectTo(wrestlinglevel, wrestlername, year)
{
alert('Here are all the wrestling videos for '+wrestlername ' ' +year ' ' +wrestlinglevel);
if('Varsity' == wrestlinglevel, 'Marc Hendricks' == wrestlername, '2013-2014' == year)
|
|
|
|
|
Does this code work?
codeguy1 wrote: when I try to make selections on the webpage it won't even let me select the wrestler or year.
It's your code so you need to change it so you can select what you need.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
No my code isn't working and that's why I'm asking for assistance in making my code work I'm a newbie to javaScript and I've been stuck on this problem for over a week and I'm totally lost. I tried what you suggested and searched google but nothing I've seen looks like the issue I'm dealing with. I'm really desperate for guidance!!!
|
|
|
|
|
codeguy1 wrote: No my code isn't working and that's why I'm asking for assistance
But the code you just showed was the code displaying the alert. You need to show the code that is calling that function. Why aren't you able to pass in the values? You said you could pass one value in so why not the rest of the values?
We're happy to help but I don't know where you are stuck or why.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
I apologize I'm so lost. Here is my code attempting to pass values to the alert I know it's wrong just please let me know what's wrong with it.
function urlRedirectTo(wrestlinglevel, wrestlername, year)
{
alert('Here are all the wrestling videos for '+wrestlername ' ' +year ' ' +wrestlinglevel);
if('Varsity' == wrestlinglevel, 'Marc Hendricks' == wrestlername, '2013-2014' == year)
I'm not sure I'm even begging to pass values to the alert or if I'm doing nothing with the values.
|
|
|
|
|
codeguy1 wrote: if('Varsity' == wrestlinglevel, 'Marc Hendricks' == wrestlername, '2013-2014' == year)
This does not work like that. You cannot separate several conditions with a comma like you did. You have to use logical operators[^] to specify several conditions for a single if statement.
Maybe your intent was:
if ('Varsity' == wrestlinglevel && 'Marc Hendricks' == wrestlername && '2013-2014' == year)
"Five fruits and vegetables a day? What a joke!
Personally, after the third watermelon, I'm full."
|
|
|
|
|
codeguy1 wrote: Here is my code attempting to pass values to the alert
Use your browser's console to debug this. For example, in Chrome hit F12 to open the developer console. Go to Sources and find your javascript. Right click the alert line and add a breakpoint. Then run your code and the debugger will stop on your breakpoint. At that point you can examine what values are in wrestlinglevel, wrestlername, and year. If they are all empty, that means you haven't passed them into the urlRedirectTo function so you need to back up further and see why you aren't getting what you thought you should when you call the function.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
So I have this onSubmit function that gathers the data from the form.
Sometimes there is no sub category, or the subcategory has been removed and I haven't written code to update the product subcategory yet. Well I did write code for that but that's another story.
So below, this.model.SubCategoryId =
Then the next line will fail because there is no result with a Key
this.model.SubCategoryId = this.productForm.controls["subCategoryId"].value;
this.model.SubCategory = this.subCategories.find(sc => sc.Value === this.model.SubCategoryId).Key;
I wrote this, well found it on the internet
this.model.SubCategory = this.ensure(this.subCategories.find(sc => sc.Value === this.model.SubCategoryId)).Key;
ensure<T>(argument: T | undefined | null, message: string = "This value was promised to be there."): T {
if (argument === undefined || argument === null) {
throw new TypeError(message);
}
return argument;
}
I'd like to not throw an error, and return a blank string. Perhaps I'm going about this the wrong way.
One suggested using filter instead of find. I get what the function does, but T is fuzzy to me. Guess it's a generic type in TypeScript. The Type is KeyValue that I made. Perhaps I should change T to KeyValue and return a new KeyValue. hmm...
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
That worked. Guess I can get rid of the message or console.log it.
If you have a better idea let me know.
this.model.SubCategoryId = this.productForm.controls["subCategoryId"].value;
this.model.SubCategory = this.ensureKv(this.subCategories.find(sc => sc.Value === this.model.SubCategoryId)).Key;
ensureKv<T>(argument: KeyValue | undefined | null, message: string = "This value was promised to be there."): KeyValue {
if (argument === undefined || argument === null) {
argument = new KeyValue("", "");
}
return argument;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
<style>
.blueback {
background-color="lightblue";
}
.yellowback {
background-color="yellow";
}
</style>
<h1>
Change CSS Classes
</h1>
<div id="d1">Hello</div>
</br>
<div id="d2">GoodBye</div>
</br>
<p>
<input type="button" value="Change Color!" onclick="colorchange()">
</p>
<script>
function colorchange() {
var dd1=document.getElementById(d1);
var dd2=document.getElementById(d2);
dd1.className ="blueback";
dd2.className ="yellowback";
</script>
|
|
|
|
|
Closing brace on your function is missing. That would definitely cause a problem.
Also, .getElementById() wants a string parameter, sooo...
function colorchange() {
var dd1=document.getElementById('d1');
var dd2=document.getElementById('d2');
dd1.className ="blueback";
dd2.className ="yellowback";
}
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
Also, your CSS syntax is off:
.blueback {
background-color: lightblue;
}
.yellowback {
background-color: yellow;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi all,
I have a
<div class="header-top-outer container-fluid"> , i have imported the css files where these classes exist into my project with a statement
import style from '../css/styles.css'
In my react component when I am trying to reference this div as below in my React component:
<div className={style.footer-outer + ' ' + style.container-fluid}>
it is throwing a compiled error for me:
./src/components/FooterMenu.jsx
Line 25: 'outer' is not defined no-undef
Line 25: 'fluid' is not defined no-undef
Line 26: 'outer' is not defined no-undef
Search for the keywords to learn more about each error.
What is the option to avoid these errors? Like what is the way I can reference css classes which have - in them using import reference?
i have tried the following way also, but it didn't work:
<div className={'${style.footer-outer} ${style.container-fluid}'} >
modified 26-Sep-19 17:11pm.
|
|
|
|
|
footer-outer is not a valid Javascript identifier. It will be interpreted as (styles.footer) - outer, where the variable outer has not been defined.
I've not used React, but it looks like the CSS loader has an option to convert "kebab-case" class names to "camelCase" identifiers:
GitHub - webpack-contrib/css-loader: CSS Loader[^]
That should let you use:
{style.footerOuter + ' ' + style.containerFluid}
If that doesn't work, try using the indexer on the style object:
{style['footer-outer'] + ' ' + style['container-fluid']}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Wonderful, it did work, thanks a lot Richard.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
