CODEWITHSUNDEEP
jqueryhtml
Andreas Panteli
Andreas Panteli

Reputation: 47

Merging two handlers in one

I have two buttons btn-config and btn-json-config and i would like to combine their handlers in one. I have tried multiple ways but to no avail. I searched html data attributes but had no luck to find a solution.

<div class="btn btn-info margin-left-10" id="btn-config" data-*="configuration"><em class="fa fa-cog"></em> Configuration ..</div>

$("#btn-config").click(function () {
        var repository = $("#repositories").val();
        var connectionId = sessionStorage.getItem("connectionId");
        var branch = $("#branches").val();
        var button = "configuration";
        $.ajax({
            type: "GET",
            data: { connectionId: connectionId, repositoryName: repository, branch: branch, button: button},
            url: '@Url.Action("GetCurrentConfiguration", "Home")',
            success: function (data) {

                codeMirrorEditor.setValue(data.content);
                $("#modal-code-editor").modal('show');
                $("#modal-title").html(data.title)
                setTimeout(function () {
                    codeMirrorEditor.refresh();
                }, 200);
            },
            error: function () {
                console.log("Error: could not cancel running test...")
            }
        });
    });

and

<div class="btn btn-info margin-left-10" id="btn-json-config" data-*="json configuration"><em class="fa fa-cog"></em> JSon ..</div>

$("#btn-json-config").click(function () {
        var repository = $("#repositories").val();
        var connectionId = sessionStorage.getItem("connectionId");
        var branch = $("#branches").val();
        var button = "json configuration";
        $.ajax({
            type: "GET",
            data: { connectionId: connectionId, repositoryName: repository, branch: branch, button: button},
            url: '@Url.Action("GetCurrentConfiguration", "Home")',
            success: function (data) {

                codeMirrorEditor.setValue(data.content);
                $("#modal-code-editor").modal('show');
                $("#modal-title").html(data.title)
                setTimeout(function () {
                    codeMirrorEditor.refresh();
                }, 200);
            },
            error: function () {
                console.log("Error: could not cancel running test...")
            }
        });
    });

What i would like to do is have both buttons being handled by a single handler since both of them do exactly the same thing but with two different parameters.

Any help and/or pointers on where should i search is greatly appreciated.

Upvotes: 1

Views: 54

Answers (2)

Ryan
Ryan

Reputation: 20116

Try to use onclick for both buttons and pass the string to js function:

<div onclick="myTest('configuration')" class="btn btn-info margin-left-10" id="btn-config" ><em class="fa fa-cog"></em> Configuration ..</div>

<div onclick=" myTest('json configuration')" class="btn btn-info margin-left-10" id="btn-json-config" ><em class="fa fa-cog"></em> JSon ..</div>

    function myTest(mydata){
        var repository = $("#repositories").val();
        var connectionId = sessionStorage.getItem("connectionId");
        var branch = $("#branches").val();
        var button = mydata;
        $.ajax({
            type: "GET",
            data: { connectionId: connectionId, repositoryName: repository, branch: branch, button: button},
            url: '@Url.Action("GetCurrentConfiguration", "Home")',
            success: function (data) {

                codeMirrorEditor.setValue(data.content);
                $("#modal-code-editor").modal('show');
                $("#modal-title").html(data.title)
                setTimeout(function () {
                    codeMirrorEditor.refresh();
                }, 200);
            },
            error: function () {
                console.log("Error: could not cancel running test...")
            }
        });
    }

Upvotes: 0

iguypouf
iguypouf

Reputation: 770

$("#btn-json-config, #btn-config").click(function () {
[...]
var button = $(this).attr("data-*");
[...[
}

OR

$(".btn-info").click(function () {
[...]
var button = $(this).attr("data-*");
[...[
}

Upvotes: 1

Related Questions