Trying to get a javascript function in a php foreach loop to work

Question

I recently had a question answered regarding creating 2 pop up boxes using some simple javascript. I have attached the demo of the answer below. I am a novice PHP developer who has just started to learn JS. My question is this..

The code below is for a forum. 'ask a question' creates a pop up where a question can be asked - this part of the code is fine. The questions are pulled from my database using a simple PHP foreach loop and for each question, I need an 'edit' button with each question that creates the pop up 'edit question'. The demo below works for editing one question (the first) but it doesn't for subsequent questions. I know this is probably a simple thing, relating to how the function is called etc but despite finding 'solutions' online I can't get anything to work. I am accustomed to being able to call function in PHP anytime I want and as many times as I want. Clearly this isn't the case with my JS as it is written here. Could someone give me some advice?

HTML

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div>

CSS

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
display: none;
}

#popup, #popupEdit {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
width: 400px;
height: 300px;
display: none;
background: #EEE;
}

javascript

     window.onload = function () {
     document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
     };

     document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
     };

     document.getElementById("EditQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
     };

     document.getElementById("CloseEditBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
   };
  };

I hope this is clear....and appreciate any help. These days I seem to be turning to Stackoverflow everyday.....eek

DEMO http://jsfiddle.net/nRfC2/

I have tried this.....

JS

  window.onload = function () {
 document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
   };

 document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
 };

 document.getElementsByClassName("EditQuestion").onclick = function () {
     var overlay = document.getElementsByClassName("overlay");
     var popupEdit = document.getElementsByClassName("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
 };

 document.getElementsByClassName("CloseEditBtn").onclick = function () {
     var overlay = document.getElementsByClassName("overlay");
     var popupEdit = document.getElementsByClassName("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
 };
 };

CSS

 #overlay {
 display:none;    
 position:fixed;  
 left:0px;        
 top:0px;         
 width:100%;      
 height:100%;     
 background:#000; 
 opacity:0.5;     
 z-index:99999;   
  }

 .overlay {
 display:none;    
 position:fixed;  
 left:0px;        
 top:0px;         
 width:100%;      
 height:100%;     
 background:#000; 
 opacity:0.5;     
 z-index:99999;   
  }

  #popup {
  display:none;
  position:fixed;
  left:40%;        
  top:30%;         
  width:600px;     
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:1px solid #000;
  z-index:100000;      
  }

  .popupEdit {
  display:none;
  position:fixed;
  left:40%;        
  top:30%;         
  width:600px;     
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:1px solid #000;
  z-index:100000;      
  }

 button#AskQuestion{
padding: 0;
border: none;
background: none;
color:#A8A8A8;
font-weight: bold;
  }

 button#CloseBtn {
padding: 0;
border: none;
background: none;
position:absolute;
right:10px;
top:5px;
  }



button.EditQuestion{
padding: 0;
border: none;
background: none;
color:#A8A8A8;
font-weight: bold;
 }

 button.CloseEditBtn {
padding: 0;
border: none;
background: none;
position:absolute;
right:10px;
top:5px;
  }

HTML Ask question Edit question

   <div id="overlay"></div>

   <div id="popup">
   <h2>Question?</h2>
   <button id="CloseBtn">Close</button>
   </div>

   <div class="popupEdit">
   <h2>Edit Question</h2>
   <button class="CloseEditBtn">Close</button>
   </div>

Still no luck.......any takers...?

jan · Accepted Answer · 2014-03-06 09:02:25Z

1

If you want to be able to edit each question (update it in database), you'll need the question's id from the database.

I would do something like this:

<button id="EditQuestion" onclick="editQuestion(2);">Edit question</button>

In your onclick action, pass the id (2 in this case) as an argument. In your editQuestion() function you show the popup and include this id in the edit form in a hidden field.

<script>
function editQuestion(questionId){
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   //in your edit form, create a hidden field and put var questionId in as value
   overlay.style.display = "block";
   popupEdit.style.display = "block";
}
</script>

answered Mar 6, 2014 at 9:02

jan

3,0182 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gafreax · Accepted Answer · 2014-03-06 09:13:03Z

The problem is that you get element by id, but if you have some different element, javascript doesn't known what element is the correct element. So you can modify in a dirty way your script adding sequential id for every element, like this:

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div> 

<div id="popupEdit2">
<h2>Edit Question</h2>
<button id="CloseEditBtn2">Close</button>
</div>

and for your javascript do this:

 window.onload = function () {
   document.getElementById("AskQuestion").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popup = document.getElementById("popup");
   overlay.style.display = "block";
   popup.style.display = "block";
 };

 document.getElementById("CloseBtn").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popup = document.getElementById("popup");
   overlay.style.display = "none";
   popup.style.display = "none";
 };

 document.getElementById("EditQuestion").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   overlay.style.display = "block";
   popupEdit.style.display = "block";
 };

 document.getElementById("CloseEditBtn").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "none";
   popupEdit.style.display = "none";
 };



 document.getElementById("EditQuestion2").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "block";
   popupEdit.style.display = "block";
 };

 document.getElementById("CloseEditBtn2").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "none";
   popupEdit.style.display = "none";
 };

A better way is to use a class name to group and retrive your element. so add some class identifier to every element of your intrest, and use document.getElementsByClassName('someClass');

Collectives™ on Stack Overflow

Trying to get a javascript function in a php foreach loop to work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related