Add HTML element - textarea dynamically using Javascript - javascript

I know it is possible to add/remove HTML elements dynamically to a web page using Javascript. I was wondering is the following possible-
My coldfusion web page has a two column table and the last row of the table has a link in the first column and the second column is blank. When user hits that link, a textarea shows up in the second column which was blank so far.
Is it possible to do this using Javascript? I went through a few links on the web and a few pointers like http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/ did help but it seems they don't help me on my scenario.
Thanks for the help in advance.

For your scenario, it may not be necessary to add the element. You could instead have the element already loaded in the dom (but hidden), then fire some code to show it when the link is clicked. The javascript for that is quite simple.
function ShowTextArea()
{
var ta = document.getElementById("textareaId");
ta.style = "display:inline";
}

Certainly you could do this. I think the best way to accomplish it, however, is to create the item normally as part of the page and just hide it using a css style until you want to show it via javascript, rather than creating it from scratch dynamically. This should make it easier to integrate with your server-side code.

Related

How to get elements across different webpages on the click of a button?

I wanted to know if it's possible to get elements of the same class across different HTML files, to be displayed on the click of a button or link, in the current web page.
I'm actually looking at something similar to a filter. Just that the images are across different web pages and each of them belong to a particular category(which i used as their class names). So, i want to be able to view the elements of the same category(class names) in the current webpage, on clicking the link. I need some ideas and solutions. Already have a logic as to what to do, but not sure if it'll implement correctly. Would like some help. Thanks
You can use ajax to get the html of another page, and then .find('.classname') to find the class you're looking for.
$.get( "yoururl.html", function( data ) {
$(data).find('.className').html();
});
The data that gets returned is the html of the url entered. From there just traverse the html to find the node you're looking for and do what you need to with it.
https://api.jquery.com/jquery.get/

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Simple code to bring up multiple iFrames on one page?

It's been a while since I last did coding, I was just wondering how simple I could make this little idea of mine.
Simply put, I'd like to have 4 input text fields on one page, an example of the label and text field is: http://www.url.com/[ASpecificLink] where the [] denotes Text Fields. Upon filling all the text fields and clicking 'Okay', the next page will list iFrames of the link specified, making it a total of 4 iFrames on one page.
My first question is : How simple could I make this idea? off the bat I thought of using PHP, ideally i'd like to access this on an iPad.
My second question is : Would it be possible, for example, to list specific content in the iFrames. For example, in the link I enter, the only content I would like to show is what is contained within the Table elements of the whole page (this would mean the top banner, navbar and other elements would be excluded)
Thank you very much, and looking forward to some other perspectives on this idea. My approach might not be the most efficient way to go about this, and therefore I'd appreciate some out-of-the-box opinions.
Thank you very much
As for the first question : it is very simple to do, but you should'nt use PHP. This can be done very easily with Javascript :
Create a new IFrame element
Set the "src" property to the content of the text inputs
Append it to the page
The browser will load the pages in the iframes by itself.
As for the second question :
Load the page using AJAX (Javascript)
Get the elements you want from the page with Javascript
Append them to an IFrame's ContentWindow property
No code here, since you seem to be only expecting ideas of implementation options :-)

Preview/Summary Page

New to HTML javascript programming and have an issue with implementation of my page.
I have created multipage HTML form layout(using div) which runs 4 pages with approximately 140 input values(most are optional values) all together. I need to implement a preview page before actually submit where in only filled input values along with their labels are displayed within a section of the page.I am able to collect the filled input values and the label values to an array using javascript. However the issue is, I am not able to figure out how I can pass these values to the actual in html summary page? I cannot implement .innerHTML as my labels need to be dynamically generated based on input values. Can this even be done just by javascript or HTML or do I need a server side script to implement the preview page? Does learning DHTML or AJAX help to implement a solution to this problem? I appreciate all the help. Let me know if I need to explain better.
The BEST way would be a session variable in a server-side language. If security is not an issue though, you can save the variables into a cookie though javascript.
See here.

Categories

Resources