By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,961 Members | 1,803 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,961 IT Pros & Developers. It's quick & easy.

How to create dynamic icons giving them classes?

P: 28
I am getting id of the passengers from a php file,using Ajax code.The number of icons defined by the data coming from php, and the icons(same with appearance) must be shown in the html page.The icons must be callable because I am using bootstrap popover ,when the user come to some icon the information about passsenger must be shown in popup.How can I do that?
Here is script
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2.  
  3.          $(document).ready(function() {
  4.           $.getJSON("Stations.php", function(jsonData){  
  5.           $.each(jsonData, function(key,value) {
  6.           $('#selectStation')
  7.          .append($("<option></option>")
  8.          .attr("value",key)
  9.          .text(value.name)); 
  10.  
  11.       });
  12.   });
  13. });
  14. function sta_callStation(sel){
  15.  $('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
  16.        $('#sta_numberOfIcons').empty();
  17.         $.getJSON('Stations.php', function(station){
  18.  
  19.             $.each(station, function(sta_key, sta_value) {
  20.  
  21.             if(sel.value==sta_key)
  22.             {
  23.               $.each(sta_value.passengers, function(j,passengers) 
  24.             {
  25.  
  26.               $('#sta_numberOfIcons').append('<i class="icon-user"></i>');
  27.  
  28.              });
  29.             }
  30.       });
  31.  
  32.       });
  33.       }
  34.  
here is the html code:
Expand|Select|Wrap|Line Numbers
  1. İstasyonlar
  2.      <select name="selectStation" id="selectStation" onchange="sta_callStation(this);"></select>
  3.  
  4.           <div id="noOfPassengers"><strong>İstasyondaki Yolcu Sayısı:</strong></div>
  5.  
  6.           <a href="#" id="sta_numberOfIcons" rel="popover" class="pas_icon"> </a>
  7.  
  8.           ></div>
Apr 10 '13 #1
Share this Question
Share on Google+
10 Replies


Rabbit
Expert Mod 10K+
P: 12,430
I am having trouble understanding what you want to do. Some code would be nice.
Apr 11 '13 #2

P: 28
@Rabbit I will edit my question.
Apr 11 '13 #3

Rabbit
Expert Mod 10K+
P: 12,430
Did you edit your description? Because I still have trouble understanding what you're trying to say.
Apr 11 '13 #4

P: 28
@Rabbit yes and actually firstly I wanted to create icons dynamically and to give to ids acording to coming data from php.But I couldn't do that, my instructor say that instead of giving them ids, define them with classes.After assign operation, I will call the icons with their class info in another js function called showPassenger(this), and in it I will write getJSON to get the information about passenger(from, where, waiting time they are in another php file called Passengers.php),I will show that info in popover function.
Apr 11 '13 #5

Rabbit
Expert Mod 10K+
P: 12,430
You're going to have to define what you mean by icon. Because you seem to be referring to the i element. But that is just for italics, not an icon. So you seem to be using a definition of icon that is unknown to me.

It would help if you posted what the HTML looks like before any action is taken. Then list the steps that trigger the dynamic change. And what the HTML should look like after the change.
Apr 11 '13 #6

Rabbit
Expert Mod 10K+
P: 12,430
Please attach the screenshots to the post itself. Firewalls tend to block online storage. I would also rather you post the code than screenshots.
Apr 12 '13 #9

P: 28
@Rabbit my code is a bit long.
https://drive.google.com/#folders/0B...Ex5UWFWenFaWE0
Here is the all project
Apr 13 '13 #10

Rabbit
Expert Mod 10K+
P: 12,430
I don't think you understand when I said our firewalls block external storage sites.

Please attach all relevant information to the threads themselves and not rely on external storage. I don't need all your code. Just the part that relates to what you're trying to do.
Apr 14 '13 #11

Post your reply

Sign in to post your reply or Sign up for a free account.