JSFiddle - React, Tailwind, and code Playground

by gnossienne

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="btn-group">
    <button type="button" class="btn btn-success">Button</button>
    <div class="btn-group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
            <li id="link11" class="menu-link"><a href="#">Dropdown link 11</a>

            </li>
            <li id="link12" class="menu-link"><a href="#">Dropdown link 12</a>

            </li>
        </ul>
    </div>
    <div class="btn-group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
            <li id="link21" class="menu-link"><a href="#">Dropdown link 21</a>

            </li>
            <li id="link22" class="menu-link"><a href="#">Dropdown link 22</a>

            </li>
        </ul>
    </div>
</div>
<br></br>
<div class='wrapper'>
    <p>JSONP is loaded from different domain</p>
    <ul id='post'></ul>
</div>

JavaScript

jQuery(document).ready(function ($) { // wait until the document is ready
    $('li.menu-link').click(function () {
        alert($(this).attr('id') + " - " + $(this).attr('class'));

        $.ajax({
            type: 'POST', // POST olabilir
            url: '/echo/json/',
            data: {
                text: 'some text',
                par1: 'another text'
            },
            datatype: 'json',
            cache: 'false',
            success: function (response) {
                alert('success');
            },
            error: function () {
                alert('Error occured!');
            }
        }); // End Ajax  



    }); // End onclick
});