[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I pass a variable to a div section?

Posted on 2011-10-28
19
Medium Priority
?
198 Views
Last Modified: 2012-05-12
I have an html program that lists some <li> data. When I click the <li> I want to go to a <DIV> page. That part of the code is working. How do I pass a variable in the href so that I can access the variable in the target <DIV>?

Here is a portion of the html that creates the <li>

html += "<li><a href=#vc2 item='1234'"
   + ">"
   + localStorage["item" + i] + "</br><p>"
   + localStorage["desc" + i] +"</p></a></li>";

In this example I'm hardcoding the item value. I want to pass the item value to a <DIV> html program like the following:

<div id="vc2">
  <div class="toolbar">
    <h1>VC2</h1>
    <a href="#" class="cancel">Cancel</a>
 </div>

I WANT TO BE ABLE TO USE THE VARIABLE HERE!      
      
</div>

Thanks in advance for any and all suggestions.      
0
Comment
Question by:kbios
  • 10
  • 7
  • 2
19 Comments
 

Author Comment

by:kbios
ID: 37047237
Any suggestions at all?

I'm used to passing variable data in an href on to PHP. In this case I need to pass the variable data to a DIV on another .html. Can I send the data similarly as I do with PHP or do I send a long string and somehow parse inside of .html?

Any help or suggestions would be greatly appreciated. Thanks.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37047348
Are you talking about a div on the same page as the li or on a completely different page?
0
 

Author Comment

by:kbios
ID: 37047398
it's all one big page. separate .html's are called but have DIV statements.


Here is a portion of the html that creates the <li>

html += "<li><a href=#vc2 item='1234'"
   + ">"
   + localStorage["item" + i] + "</br><p>"
   + localStorage["desc" + i] +"</p></a></li>";

In this example I'm hardcoding the item value. I want to pass the item value to a <DIV> html program like the following:

This program is vc2.html.

<div id="vc2">
  <div class="toolbar">
    <h1>VC2</h1>
    <a href="#" class="cancel">Cancel</a>
 </div>

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37047741
You can't pass it that way you have assign the data to the innerHTML.  Do the href as just href="#" and use an onclick to move what you want: onclick="document.getElementById('vc2').innerHTML=your string"

0
 

Author Comment

by:kbios
ID: 37047940
The code as it is lists the <li>'s properly. I simply want to pass a variable when I click on the specific <li>. Here is the entire contents of vc1.html. I am already using an innerHTML. Where would your suggestion fit in?



<div id="viewcart">
  <div class="toolbar">
   <h1>View Cart</h1>
   <a href="#" class="cancel">Cancel</a>
  </div>
      
   <div id="searchresults">
   <ul id="item" class="edgetoedge">
      <script>
         window.onload = function(){
         var val = parseInt(localStorage.trxCtr);
         var html = "";
         for( var i = 1; i <= val; i++)
         {
             if ( localStorage["item" + i] != "X" )
             {
                html += "<li><a href=#vc2 item='3772'"
                + ">"
                + localStorage["item" + i] + "</br><p>"
                + localStorage["desc" + i] +"</p></a></li>";
             }      
         }
        document.getElementById("item").innerHTML = html;
         };
     </script>
   </ul>
  </div>            
</div>      
0
 

Author Comment

by:kbios
ID: 37047965
I'm using the innerHTML to create the html variable which has the <li> link. The code inside of the href is where I'm thinking that I needI to pass the variable.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37048231
What is an onload doing in the middle of the HTML. That can't possibly work, and if it did, it would overwrite itself.  Onload belongs in the head to be executed after the page is loaded.

That code does not make any sense.  If you want information from localStorage on the page then script it in the head for execution at load time and put it in the appropriate container.
0
 
LVL 9

Expert Comment

by:djon2003
ID: 37048711
I agree with COBOLdinosaur about the onload in the middle of the page is not a great idea. Even though I am not sure to understand passing a variable to a HTML div. Two distinct concepts which should not be used together. Though, I think you can probably do something if I correctly understand what you want to do.

Using a tag attribute as "item" as you did into you A tag allows you to have a storage place located by position of the tag. So, on the A tag, you can add << onclick="test();" >>.

Add the test function into a script tag (preferably in the head).
 
function test() {
alert(this.getAttribute('item'));
}

Open in new window


If this doesn't fit your needs, please give me details of what you mean by "passing a variable to a div".
0
 

Author Comment

by:kbios
ID: 37049900
The index.html is the only .html that has a head and body. The rest of the .html are included code, and as such they do not have a head and body. Only one head and body. Basically it is one .html with DIV includes.

So the purpose of passing a variable to a DIV is so that when that portion of the code is executed (when the above <li> is selected), the <li> will pass a variable to a DIV section. THAT DIV section will do a completely separate piece of logic that needs the variable, in this case an item number.

Same concept as when you pass variables to a .php?var=x

As far as the location of the onload; the <li>'s do not get created without it. I have tried setting up that entire function as a regular JS function without the onload but when I do the <li>'s do not appear. I recycled that logic from another .hmtl I had. Any suggestions wil be considered.
0
 

Author Comment

by:kbios
ID: 37049956
Update. I went back and cleaned up the function by removing the onload. I was just recycling some code to test. Thanks for pointing that out.

Still looking for some help on passing a variable when a DIV is the target of the href.
0
 
LVL 9

Expert Comment

by:djon2003
ID: 37050525
The variable coming from an URL can be inserted as an HTML attribute as you inserted the HTML.

Doing so, would allow you to do what I wrote above. Isn't it ?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37050541
Same concept as when you pass variables to a .php?var=x

No it is nor same cocept PHP is a full featured programming language.  HTML is just markup. You cannot program with it There is no such thing as a variable in HTML.  Thare no methods for assigning variables in HTML. HTML is not dynamic on its own.  You cannot assign a variable period.

What you can do is use javascript to populate the innerHTML of the target div.  So go ahead and continue trying to make HTML a programming language, and when you get tired of banging your head on the wall, let us know.  Then you can post code that shows us what the div looks like before the operation, and what you want it to look like after the operation.  Then perhaps we can help you with the scripting you need.

There is no point continuing this as long as you insist that you are going to assign a variable to an HTML element.
0
 

Author Comment

by:kbios
ID: 37050687
I understand that the markup is not the same as a program language. I have posted the code above. The html that creates the <li> and the html that control is sent to when the <li> is clicked.

The <li>'s that are displayed have the underlying <a href=#vc2>. When the <li> is selected the #vc2 DIV is accessed. I want to know upon entering the DIV what the item number was that was associated with the <li>. My thinking was that there would be some way to 'pass a parameter' in the <a href> code something like <a href=#vc2?item=1234>.

Is that done inside of:    What you can do is use javascript to populate the innerHTML of the target div. ?
If so, please give me an example.

Please look beyond HOW I am trying to do this and TRY to see what I am wanting to do. I am new to this and am just trying to figure this out. Your help is appreciated.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 37050765
<li><a href="#" onclick="doSomething('divid',item)">Whatever you want the link to display</a></li>

Open in new window


That is what the li needs to look like whether you generate on the line server, on the client or hard coded, that is what you need to trigger the operation.

then for the function:
function doSomething(elem,Itm)
{
   document.getElementById(elem).innerHTML=Itm;
}

Open in new window


as for the way you are generating the li, you will be more success if you avoid quoting issues by doing it this way:
clckstr='"doSomething('vc2','3772')"';
html += '<li><a href=clckstr>';
html += localStorage["item" + i] + "</br><p>" + localStorage["desc" + i] +"</p></a></li>";

Open in new window


0
 

Author Comment

by:kbios
ID: 37050903
OK. This is becoming clearer. I will be testing the code shortly.

A couple followup questions. When I am in the target DIV statement how would I reference the item that was sent? Something like a JS where I would say sentitem=????????;       How exactly do I retreive the variable data?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37050934
How exactly do I retreive the variable data?

In the HTML it is not variable data.  if you want to reference it you need to use javascript to set a variable to the innerHTML, and then parse the variable to get the value you want.

somevar = document.getElementById('divid').innerHTML;

if the value you want is supposed to be a number you will to convert it with

numvar =parseInt(somevar);
or
numvar=parseFloat(somevar);

depending on whether you need an integer or a float.
0
 

Author Comment

by:kbios
ID: 37050941
Thanks for the education along with the info requested. I think that you've put me on the right track. I will award points and accept your solution. If I have further issues I will post another question.
0
 

Author Closing Comment

by:kbios
ID: 37050942
Thanks for your help.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37050959
I'm always glad to help.

You will find that you can get solutions quicker, if you can provide detail.  If we have difficulty understanding what you want to do we need you to help us so we can do a better job of helping you.  Sometimes it might look like we are giving you a hard time, but we are just trying to get you to where you want to go.

Thanks for the A.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question