0

I am new in Dojo and there is a code and i want to update the image when a user select the accordion. Code is written in this format.

    <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="minSize:20, region:'leading', splitter:true" style="width: 300px;" selected="true" >
       <div data-dojo-type="dijit/layout/AccordionPane" title="<img src='./icons/system-run.png' border='0'/>&nbsp;Application" id="_application_AccordionPane">
                <div id="menuTree"></div>
       </div>
       <div data-dojo-type="dijit/layout/AccordionPane" title="<img src='./icons/help-about.png' border='0'/>&nbsp;Message" id="_message_AccordionPane" >
                <p id="_my_message"></p>
       </div>
    </div>

I am using dojo-release-1.16.3.jar and simply want to update the image when user clicked the accordion. Thanks in advance

Improve this question
2
  • which image ? what wnat you update in this code ?
    – Bourbia Brahim
    Commented Dec 29, 2020 at 8:00
  • Hi, i want a javascript function which will be called when user click the accordionpane. On this basis, image will be changed on clicked and on leave.
    – JunaidAmjad
    Commented Dec 30, 2020 at 12:59

1 Answer 1

Reset to default
0

I have solved this out and put this code for those who face same problem as shown below.

    <div class="custon" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="minSize:20, region:'leading', splitter:true" style="width: 300px;" selected="true" >
        
        <div  data-dojo-type="dijit/layout/AccordionPane" title="<img src='./icons/system-run.svg' border='0' width='14px' height='14px'  />&nbsp;$&nbsp;&nbsp;{action.getText('IndexAction_applicationName')}" id="_application_AccordionPane">
        <script type="dojo/method" data-dojo-event="onHide" data-dojo-args="value">
            onHideApplication()     
        </script>
        <script type="dojo/method" data-dojo-event="onShow" >
            onActiveApplication()       
        </script>
            <div id="menuTree"></div>
        </div>
    </div>

In javascript

<script type="text/javascript">

function onHideApplication()
{
    if(dijit.byId('_application_AccordionPane').selected)
    {
        dijit.byId("_application_AccordionPane").set("title", "<img src='./icons/system-run.svg' border='0' width='14px' height='14px' style='margin-right:10px;' />&nbsp;${action.getText('IndexAction_applicationName')}");
    }
    else
    {
        dijit.byId("_application_AccordionPane").set("title", "<img src='./icons-InActive/system-run.svg' border='0' width='14px' height='14px' style='margin-right:10px;' />&nbsp;${action.getText('IndexAction_applicationName')}");  
    }
    
}
function onActiveApplication()
{
    if(dijit.byId('_application_AccordionPane').selected)
    {
        dijit.byId("_application_AccordionPane").set("title", "<img src='./icons/system-run.svg' border='0' width='14px' height='14px' style='margin-right:10px;'  />&nbsp;${action.getText('IndexAction_applicationName')}");
    }
    else
    {
        dijit.byId("_application_AccordionPane").set("title", "<img src='./icons-InActive/system-run.svg' border='0' width='14px' height='14px' style='margin-right:10px;' />&nbsp;${action.getText('IndexAction_applicationName')}");  
    }
    
}
</script>
Improve this answer

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