2

this question relates to my previous question. I use Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I would like to use modal windows created in Bootstrap 2.3.2. Thanks to answer in previous question I am able to show Bootstrap modals in Liferay. The problem is when I use dropdown menu with buttons, which open modal windows.

Button group

<div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  Add
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
           <li><a href="" id="addVertexModalA" onclick="$('#addVertexModal').modal();" > Vertex1 </a></li>
           <li><a href="" id="addVertexModalB"> Vertex2 </a></li>
       </ul>
       <button onclick="$('#addVertexModal').modal();">Show</button>
</div>

When I click on Vertex1 or Vertex2 button in dropdown-menu, the modal window disappears immediately after showing. If I click on Show button, it is okay.

Modal window

<div id="addVertexModal" class="modal fade" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="addVertexModalHeader"> Add Vertex </h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label"> names </label>
    <div class="controls">
      <textarea rows="3"></textarea>
    </div>
  </div>
</form>
  </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true"> Cancel </button>
        <a href="" class="btn btn-primary"> Confirm </a>
    </div>
</div>

    <script>

        $(document).on("click","#addVertexModalB",function() {      
           $("#addVertexModal").modal("show");  
        });

    </script>

I use only these resources in portal.

<header-portlet-javascript>/scripts/jquery-1.9.1.js</header-portlet-javascript>
<header-portlet-javascript>/scripts/bootstrap_2.3.2.js</header-portlet-javascript>

I would like to provide jsfiddle or something similar, but it doesn't work in Liferay system (I guess because of AlloyUI css or script files). I tried to remove dropdown-menu class and "dropdown-toggle" class with data-toggle="dropdown", but it didn't help (modal still disappears immediately after showing).

Community
  • 1
  • 1
Matt
  • 8,195
  • 31
  • 115
  • 225
  • 1
    Try removing `href=""` from your `` tags. – stiemannkj1 Dec 30 '14 at 16:55
  • Thank you. You helped me more times. What are your steps to find out cause of a these kind of problems? – Matt Dec 30 '14 at 17:20
  • 1
    No problem. I'm thinking of writing an in-depth blog about my problem solving process, but for now I can give you the highlights: 1. Create a minimal working example. - In most cases that means creating an example outside of Liferay if possible. (In this case, that meant creating a jsfiddle of your example). – stiemannkj1 Jan 05 '15 at 16:01
  • 1
    2. If that does not reproduce the issue, I know the bug is not in my minimal example and it occurs somewhere else. So either add to the minimal example until the bug occurs (in many cases, this means run the code within Liferay) or determine that the bug is some kind of configuration issue or an issue with something that has not been mentioned. - Ask for clarification if necessary. 3. The problem has now been identified, so I look at the code to determine the cause. - In this case I just took a guess because when I created the minimal example, the page went blank when I clicked on the links. – stiemannkj1 Jan 05 '15 at 16:06
  • 1
    When I have reached #3 I also look at the console logs for errors or strange behavior, and I google for similar issues online. One other method I find very helpful is to recreate a similar example with someone else's code (For example, I would take code directly from the bootstrap website examples and try it and see if it works. That way, I know that I didn't introduce any of my own errors.). **Side Note:** I have added an answer with some details about your issue to the question. If you could accept it, that would be great. – stiemannkj1 Jan 05 '15 at 16:10

1 Answers1

2

Remove href="" from your <a> tags. When you click on the list item with <a href="" ... />, it causes a GET on the page which reloads the whole page (thus causing your onclick to never execute and show the modal).

stiemannkj1
  • 4,418
  • 3
  • 25
  • 45