Bashar Bashar - 1 year ago 68
Javascript Question

Clicking sub menu pop up a modal in wordpress plugin

I am working on a Wordpress plugin where I want to open a pop-up modal when I click on one of my plugin sub-menus. I can trigger the modal using a link or a button, but I want to load the modal at the time I click on the submenu.

Code for menu and submenu:

<div class="wp-menu-name">Smart Form Builder</div>
<ul class="wp-submenu wp-submenu-wrap">
<li class="wp-submenu-head">Smart Form Builder</li>
<li class="wp-first-item">
<a class="wp-first-item" href="admin.php?page=smart-form-builder">Create New Form</a>
</li>
<li>
<a href="admin.php?page=smart-form-builder-form-list">Form List</a>
</li>
<li>
<a href="admin.php?page=smart-form-builder-support">Support</a>
</li>
</ul>
</div>


Code for my model:

<div class="modal fade" id="modal_choose_ur_form" tabindex="-1" role="dialog" aria-labelledby="modal_choose_ur_formLabel">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><h3>Choose Your Form</h3></h4>
</div>
<div class="modal-body">
<a href="#tabs" data-toggle="modal" data-dismiss="modal" id="modal_trigger">Click</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


Now i want to pop up the modal when i click on
Create New Form
submenu. So what i have code in my
sfb_create_form_page
function?
I tried using various way of using javascript like

<script type="text/javascript">
$(document).ready(function () {
$('#modal_choose_ur_form').modal('show');
});
</script>


this is working for a simple HTML page quite well but not for my plugin. What can do can anyone help?

Answer Source

Here you go. Link

You need to fire click event on ul li . And open popup when click event is generated.

$(document).ready(function () {

    $(".ulLiOuter ul li").click(function(e){
        e.preventDefault();
        $('#modal_choose_ur_form').modal('show');
    });

});