3
<div id="OffLocations" style="width: 100%;"/>
<script>
//JS code...
var officeList = new Array();
<apex:repeat value="{!OfficesOpen}" var="off" >
    officeList.push('<table style="width:100%; border: 1px solid Gray;" cellpadding="10px" cellspacing="0px">'
                  +'<tr>'
                  +'<td style="vertical-align:center;text-align:center;color: white;font-weight: bold;width:25%;">{!off.Slogan__c}</td>'
                  +'<td style="vertical-align:center;float:left;width:75%;"><i>{!off.Location}</i>'
                  +'<a id=\"xClose\" style="vertical-align:top;float:right;cursor: pointer;">X</a>'
                  +'</td>'
        +'</tr>'
        +'</table>');
    </apex:repeat>

$("#xClose").click(function() {
    alert('Test');
    $("#OffLocations").hide();
});
</script>

This code is displaying the values in the page but the inline html < a > element is not working. When I move this tag anywhere out of script block, it is working fine. I've tried using the escape char '\', " etc. How do I escape the double quotes for the id "xClose" to call the function when clicking it or is the fault is somewhere else.

| improve this question | |
  • You are creating multiple <a> elements with the same id xClose which makes jQuery confuse – highfive Jul 10 '14 at 4:49
  • Hi thanks for your response. But I think I've used the "xClose" id only for a single <a> element. – user10345 Jul 10 '14 at 4:53
  • I'm not sure if <apex:repeat /> is acceptable inside <script />. If it does, when you have more than one record for your OfficesOpen, it's creating more than one <a /> – highfive Jul 10 '14 at 4:58
  • Add an event listener on each anchor (since you have multiple in your apex:repeat). – Boris Bachovski Jul 10 '14 at 5:00
  • @highfive yes. The <apex:repeat/> tag is acceptable within a script block. You are right, it is fetching more than one records leading to multiple <a> elements. – user10345 Jul 10 '14 at 5:05
1

Have a variable to generate unique Ids

<apex:variable var="i" value="{!0}"/> 
<apex:repeat value="{!OfficesOpen}" var="off" >
    officeList.push('<table style="width:100%; border: 1px solid Gray;" cellpadding="10px" cellspacing="0px">'
                  +'<tr>'
                  +'<td style="vertical-align:center;text-align:center;color: white;font-weight: bold;width:25%;">{!off.Slogan__c}</td>'
                  +'<td style="vertical-align:center;float:left;width:75%;"><i>{!off.Location}</i>'
                  +'<a id="xClose'+{!i}+'" style="vertical-align:top;float:right;cursor: pointer;">X</a>'
                  +'</td>'
        +'</tr>'
        +'</table>');
    <apex:variable var="i" value="{!i+1}"/>
</apex:repeat>

$("a").click(function(){
   var aId = this.id;
   //You can add your logic here based on the id
   ...
   $("#OffLocations").hide();
});

UPDATE : added $("#OffLocations").hide(); so that answer is complete

| improve this answer | |
  • Thank you @highfive. So the logic to add there would be $("#OffLocations").hide(); I'm right? – user10345 Jul 10 '14 at 5:41
  • Oh Common..If that's the only thing you have to do the answer is "yes", I was thinking you have something to do with respect to which <a /> have been clicked. Anyway this will avoid script break due to duplicate ids – highfive Jul 10 '14 at 5:48
  • Yes. For now, I'm using the <a> element to hide the div from the page when the user clicks it. May be later, I'll be trying to add a logic of creating/erasing cookies to track the user interest in viewing the data. – user10345 Jul 10 '14 at 5:53
  • Ya, in this way you can maintain unique id when you are generating HTML dynamically. Have I answered your question @user10345 ? – highfive Jul 10 '14 at 5:58
  • Hey thanks again for updating the answer. I'm trying it in my sandbox but it is not hiding the div. I've even given an alert in the click function but not getting response. and aren't we using the xclose[i] id anywhere in the function? – user10345 Jul 10 '14 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.