Create new function button in DV

[A Bindi]

Hello,

I'm trying to add a custom button in a table's DV so i created a file "hooks\mytable-dv.js" (where "mytable" is the table's name that I need to manage with the custom button):

Code: Select all

jQuery(function() {
    jQuery(".detail_view").ready(function() {
        // Create the new button
        var myButton = jQuery('<button class="btn btn-primary" id="customButton">Click here</button>');

        // Add the button in the detailed view
        jQuery(".detail_view h3").after(myButton);

        // Define the button function
        jQuery("#customButton").click(function() {
            alert("Button clicked!");
        });
    });
});

but the button does not appears.

What's wrong ?



ALex.

[saymaad]

Your code has no issues!

The reason why you are not able to see the button is because the class "panel-heading" has a fixed height which essentially is hiding the button. If you really want the button to be part of h3, then either change the position of the button or increase the height of the panel.

Alternatively, use this code to have the button placed in the detail view under the h3 tag but outside of the panel:

Code: Select all

$j(() => {
    $j(".detail_view").ready(function() {
        // Create the new button
        var myButton = $j('<button type="button" class="btn btn-primary pull-left" id="customButton">Click here</button>');

        // Add the button in the detailed view on the left side, under the panel heading
        myButton.insertBefore('.children-links .clearfix');

        // Define the button function
        $j("#customButton").click(function() {
            alert("Button clicked!");
        });
    });
})

[A Bindi]

Thank you for hints, I used your code:

Code: Select all

$j(() => {
    $j(".detail_view").ready(function() {
        // Create the new button
        var myButton = $j('<button type="button" class="btn btn-primary pull-left" id="customButton">Click here</button>');

        // Add the button in the detailed view on the left side, under the panel heading
        myButton.insertBefore('.children-links .clearfix');

        // Define the button function
        $j("#customButton").click(function() {
            alert("Button clicked!");
        });
    });
})

but unfortunately the button does not appears

I have installed the "Inline Detail-View" plugin (that I does not use anymore) ...

inline.jpg (3.86 KiB) Viewed 9698 times

Could that be the problem?

How do I uninstall it?

ALex.

[pbottcher]

Hi,
I don't think it is related to the plugin, but try this code :

Code: Select all

$j(() => {
       var myButton = $j('<button type="button" class="btn btn-primary pull-left" id="customButton">Click here</button>');

        // Add the button in the detailed view on the left side, under the panel heading
        $j(".detail_view h3").after(myButton);

        // Define the button function
        $j("#customButton").click(function() {
            alert("Button clicked!");
        });
})