Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Add attribute to variable

Avatar of tonelm54
tonelm54 asked on
jQuery
1 Comment1 Solution10 ViewsLast Modified:
Im trying to make my own simplified dialogue box, and its working really well for what I want, issue is I have to create one for each dialogue box which is a pain.

So, I decided to change it so when it created the dialogue it would create it, but assign the ID dyanamically (I will set it in a function variable), however at the moment Im just testing and setting it as a static to 'diaText'. Problem is its never setting the id as it says it cant find the class 'divDialogueBox' in the line:-
 $(tt).find(".divDialogueBox").attr("id","diaTest");

Ive tried different options, and it seems I cannot figure out how to set attributes while they are not on the form, however as there could be several of these on the page I cannot add it until Ive set the ID.

Any ideas what I can do to set it dynamically, apart from break the string and do:-
tt = "<div id='" + varID + "' class='divDialogueBox' sty
which although would work, seems a very messy way of doing it.

My code is:-
$(document).ready(function () {
   $("#btn").on("click", function () {
     var tt;
    
    tt = "<div class='divDialogueBox' style='display:none; background-color: rgba(0,0,0,0.8); position: fixed; top:0px; bottom:0px; left:0px; right:0px; z-index: 9999;'><div class='divDialogueBox' style='position: absolute; border-radius:5px; width:200px; height:200px; top:50%; left:50%; transform: translate(-50%, -50%); background-color: #FFFFFF;'><div class='divDialogueContent' style='height:100%; width:100%; margin-top:30px; color: #000000;'></div><img src='../images/cross.png' style='height:40px; width: 40px; position: absolute; right:-20px; top:-20px; cursor: pointer;'></div></div>";
  
  $(tt).find(".divDialogueBox").attr("id","diaTest");
  
  $('body').append(tt);
  
  $("#diaTest").removeAttr('display');
  
  });
});

Ive put it on jsFiddle encase anyone wants to play and help me :-)
https://jsfiddle.net/su6gfya3/1/

Thank you in advance
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971Flag of Guadeloupe imageMultitechnician
Commented:
This problem has been solved!
Unlock 1 Answer and 1 Comment.
See Answers