Bashar Bashar - 15 days ago 9
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

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');
    });

});