user2839497 user2839497 - 4 years ago 72
Javascript Question

Why I'm not able to close the modal dialog upon click on a hyperlink which is present on the same modal dialog?

I've a following HTML code of bootstrap modal :

<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<!-- <div role="document" class="modal-dialog"> -->
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">

<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<a href="javascript:void(0)" onclick="viewLocationOnMap();"> <img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt=""></a>
<a href="javascript:void(0)" onclick="viewLocationOnMap();">Home Nightclub, Sydney, New South Wales, Australia</a>
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
<li><button aria-describedby="popover295861" title="" data-original-title="" type="button" class="btn btn-info" data-toggle="popover">Edit Event</button><div style="top: 140.717px; left: 104px; display: block;" id="popover295861" class="popover fade right in" role="tooltip"><div style="top: 63.9954%;" class="arrow"></div><h3 style="display: none;" class="popover-title"></h3><div class="popover-content">
<a href="#" class="list-group-item">Edit Event</a>
<a href="#" class="list-group-item">Invite Members</a>
<a href="#" class="list-group-item">Delete Event</a>
</div></div></li>
</ul>
<ul id="popover-content" class="list-group" style="display: none">
<a href="javascript:alert('You clicked me')" class="list-group-item">Edit Event</a>
<a href="#" class="list-group-item">Invite Members</a>
<a href="#" class="list-group-item">Delete Event</a>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
<!--
<div class="form-group" align="right">
<select name="event_actions" id="event_actions" class="form-control" style="width:150px;">
<option value=""></option>
<option value="edit_event">Edit Event</option>
<option value="invite_members">Invite members</option>
<option value="delete_event">Delete event</option>
</select>
</div>
-->
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a aria-expanded="true" href="#description" data-toggle="tab">Description</a></li>
<li><a href="#feeds" data-toggle="tab">Feeds</a></li>
<li><a href="#going" data-toggle="tab">Going</a></li>
<li><a href="#maybe" data-toggle="tab">Maybe</a></li>
<li><a href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>

<div class="tab-content">
<div class="tab-pane active" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>

<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>

<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">

<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span> </div>
</div>

</div>
</div>
</div>

<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">


</div>
</div>
</div>

<div class="tab-pane" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">


</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>


I want to close the above modal on click of a hyperlink Edit Event and open up a new modal which is as follows :

<div id="myModal-event" class="modal fade" role="dialog">
<!-- <div role="document" class="modal-dialog"> -->
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true"> x </span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body"> Loading... </div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>


Hos should I do it. I tried many ways but none of them worked for me.

Please help me.

Answer Source

Set a new id for the second modal so that you'll be able to manage both of them. You could set an id for your Edit Event link so that you could listen an on click event on it.

Thus your link'd looks like:

<a href="#" id='edit-event' class="list-group-item">Edit Event</a>

With jQuery you could do:

$('#myModal-event').on('click', '#edit-event', function (event) {
    event.preventDefault();
    $(this).closest('.modal').modal('hide');
    $('#modal-2').modal('show');
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download