|
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.
|
|
|
|
|
Your variable outer hasn’t been identified.
|
|
|
|
|
Hi i am trying, but facing huge difficulties in converting a jQuery MVC app into React Web Api app, can somebody please help me, I though I can easily take all that's there in the convert easily into React but, i have come across lots of difficulties, one such is, importing css styles, and referring multiple css classes (in jQuery they can put multiple css classes in one element, but I am not able to do it in jsx files).
Now I am just thinking, can i just put all those js files into a folder just reference them into my jsx files or components, can somebody please help me in this regards? How can I do it and what difficulties am I going to face, how can I call those methods within js files of jQuery into my jsx components, any help please - I would be very very thankful friends.
I am also trying in my way by googling, reading online, asking friends and colleagues - but if anybody has faced these issues before could be helpful for me - thank you
|
|
|
|
|
I don't have much experience with React, for I chose Angular instead. Angular and React are similar in design and sort of the same. Last year, I tried to convert my website which I wrote in .Net Core MVC, Razor, JQuery and Mobirize over to Angular.
I did what you are doing ...
Many of the cool Mobirise effects were written in JQuery, so I thought it would be an easy conversion for me to rewrite these effects from JQuery to Modern JavaScript and include the JS files and call the functions. This conversion would also remove JQuery from my project and I would be JQuery free at last. So I started rewriting JQuery into modern JavaScript and got a few effects working. Then the hammer came down on me; and I realized that the conversions only worked on the first page load. When switching pages, my new effects did not fire or run; because there is no page load when switching pages in Angular. In other words, Dom Ready only exist on the first page load. The Angular router doesn't fire a DOM ready when routing is called. So all this work went out the window and I moved on to CSS.
Next I worked on the cool Mobirise CSS styles, effects and animations. I wanted my project to be free of CSS, and chose SCSS instead, so I translated all of the Mobirise CSS into SCSS one style at a time and tested them and got good results.
So I was finally ready to do a dump of all the old technology and go with the new technology to produce a clean project. I dumped JQuery completely, Went SCSS, and worked on my Webpack, node-sass and build or package.json file. My project was a mess and all the old technology that was removed left me with a basket full of holes or missing things. I fixed or replaced one thing at a time and got 95% of it working.
So what did I learn?
I learned that the old way of how a website works does not apply to technologies such as Angular, React and Vue. It's a totally different way of thinking, which includes how your Models are designed, getting more CRUD like in how you design forms and your API calls, and even down to database document designs. With efficient models, db documents, and even SCSS classes, you can really simplify a project down to the bare bones with very few lines of code and HTML.
Now I have about 16 months experience with Angular V7+, SCSS, Webpack, npm packages, .Net Core V2.3+, modern JavaScript, TypeScript, MongoDB, NodeJS and I get it now. I'm in the process of adding a new store to my website as an experiment to test my skills before I write dedicated store on an enterprise level using React. I'm getting out of software contracting for others and will write my own apps for profit starting next year.
Final Thoughts
I don't think you have enough experience with not just React, but how this new technology works in general. You need to realize that you need to start from the ground up and explore the new possibilities that exist out there with React and dump the old way of doing things. If this CARB project your working on was sold as a React upgrade using the existing database servers and models, your going to be fighting this for years. That's why I was concerned as a California resident and my gas tax money being spent on this.
Check out my website link below, it's the project I'm talking about; my conversion from .Net Core MVC to Angular. And also a database conversion from SQL to Document based. You can GTMetrix the project as well to see the small footprint I created as well with super compression using webpack.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I too understood that, i need to build the whole front end design from scratch with React. Another thing is, its not that whole project converting from jQuery to React, its a prototype I am trying to make. This project that I am working isn't a live project, its just a small prototype project I am doing now.
Since the React and jQuery operates differently, conversion of jQuery or even using jQuery isn't an option in React, better to build it from the scratch.
This is an with couple of pages for prototype to show how single page App works.
|
|
|
|
|
jkirkerx wrote: I'm getting out of software contracting
I am not into Contracting anymore buddy - I am an employee, but this is prototype app. It is not an enterprise app yet, this app isn't launched yet, it seems we need to write it from the scratch.
The reason why I was going in that direction was, it has jQuery libraries which have click etc events written and reading all those and implementing them again I thought may take longer time, but actually if it takes let it, that's what it is.
You know right reading jQuery is like more challenge, that's why mostly these readable front end scripts like React Angular came in. I too did around 6 months of work on Angular, but React is little different than Angular in terms of syntax etc but yes I feel routing was much similar except we need to import rounting explicitly.
|
|
|
|
|
Did you use React Web Api app before?
|
|
|
|
|
I want to create html seit and call a URL ('.....') and write die result in Browser console ?
how could i do it because i can't get it well
i will be glad for an explanation
|
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
