Duplication of Buttons in Detail view

[mdspine]

Prior to using Appgini helper I used buttons based on Udemy tutorial about Print invoice
https://gist.github.com/AppGiniCourse/8 ... 4ca382d5d9
I did make a bunch of buttons and the buttons the code for those buttons are in Table.php and it was working fine



Since I used the Appgini helper in Table-dv.js to create tabs, those tabs work fine, however, I do see duplication of buttons see screen shot
Here is my Table-dv.js

var dv = new AppGiniDetailView();

//Create Rows//

var row_SOAP = dv.addLayout([12])
.add(1, ["ChiefComplaint","Subjective","PatPMHLU","PatPSHLU","PatAllergyLU","Objective","Assesment", "Plan" ])

//Move the rows to tab//

dv.addTab("SOAP", "SOAP", "SOAP")
.add(row_SOAP);

$j("#appginihelper-detailview-tabs").prepend("<hr/>").appendTo($j("fieldset"));

dv.getField("position").insertBelow().hr();
dv.getField("position").insertBelow().p()

[jsetzer]

Good morning,

can you please send the complete code of your TABLENAME-dv.js to me (private message or email).

I need to see more code, for example the creation of buttons.

Also we have to check, if the instantiation of new AppGiniDetailView() only occurs once. Sometimes it happens that you have multiple instantiations of AppGiniDetailView after pasting source code snippets. This could cause that kind of trouble.

Regards,
Jan

[mdspine]

Hi
How do I email you
Sam

[jsetzer]

I've sent a PM to you.

[jsetzer]

When using jQuery selectors with classes - like $j(".btn-toolbar") - your changes will apply to all elements having this class.

So, if you have more than one element having class="btn-toolbar", for example, adding an element to $j(".btn-toolbar") will add the element multiple times.


Example

Imagine having two div's with class="a":

Code: Select all

<div class="a">test 1</div>
<div class="a">test 2</div>

When appending anything using the Jquery selector ".a" like this...

Code: Select all

<script>
$j(".a").append("<p>Hello</p>");
</script>

...jquery will append <p>Hello</p> twice which results in

Code: Select all

<div class="a">test 1<p>Hello</p></div>
<div class="a">test 2<p>Hello</p></div>

[zibrahim]

Hi Jestzer,
I am having the same problem.
Appreciate if you can help me.
Thanks.

Zala.

some of the codes in hooks/Services.php (fyi)

Code: Select all

$j(function(){
				<?php if($selectedID){ ?>
					$j('#Services_dv_action_buttons .btn-toolbar').append(
						'<div class="btn-group-vertical btn-group-lg" style="width: 100%;">' +
							'<button type="button" class="btn btn-warning btn-lg" onclick="print_service_order()">' +
								'<i class="glyphicon glyphicon-ok"></i> Service Order</button>' +	
							'<button type="button" class="btn btn-info btn-lg" onclick="print_invoice()">' +
								'<i class="glyphicon glyphicon-print"></i> Print Invoice</button>' +
						'</div>'
					);
				<?php } ?>
			});

[jsetzer]

Can you also please ensure that there is only one (!) initialization of new AppGiniDetailView() in your code.

[zibrahim]

Hi Jsetzer,
Thanks for the quick reply.
I have checked and there is only one in my Services-dv.js file.
I have attached the actual code below.
Thanks.

Code: Select all

// Script to optimize the position the fields in the form
var dv = new AppGiniDetailView();

var row_1 = dv.addLayout([12])
    .add(1, ["Service_ID"])
    .sizeLabels(2);

var row_2 = dv.addLayout([6, 6])
    .add(1, ["Service_Date", "Registration_Number", "Maker", "Model", "Color", "Mileage", "Staff", "Start_Time", "Completed_Time", "Status", "Duration", "Next_Service_Date"])
    .add(2, ["Booking_Date", "Customer", "Contact_No", "Subtotal", "SST", "Total", "Payment_Total", "Balance"])
    .sizeLabels(4);

var row_3 = dv.addLayout([12])
    .add(1, ["Notes"])
    .sizeLabels(2);

var row_4 = dv.addLayout([6, 6])
    .add(1, ["Photo"])
    .add(2, ["Doc1"])
    .sizeLabels(4);

dv.addTab("Service-tab", "Service Info", "info-sign")
    .add(row_1)
    .add(row_2)
    .add(row_3);

dv.addTab("Document-tab", "Photo/Doc", "folder-open")
    .add(row_4);

/* function to display error and focus the field after exit */
function show_error(field, msg) {
    modal_window({
        message: '<div class="alert alert-danger">' + msg + '</div>',
        title: 'Error in ' + field,
        close: function () {
            $j('#' + field).focus();
            $j('#' + field).parents('.form-group').addClass('has-error');
        }
    });
    return false;
}

function show_error2(field) {
    $j('#' + field).focus();
    $j('#' + field).parents('.form-group').addClass('has-error');
    return false;
}

function get_date(date_field) {
    var y = $j('#' + date_field).val();
    var m = $j('#' + date_field + '-mm').val();
    var d = $j('#' + date_field + '-dd').val();
    var date_object = new Date(y, m - 1, d);
    if (!y) return false;
    return date_object;
}

/* on changing Vehicle, retrieve vehicle color from Vehicles table and populate color field */
$j('#Registration_Number-container').on('change', function () {
    var pid = $j('#Registration_Number-container').select2('val');
    if (pid == '{empty_value}') {
        $j('#Color').val('');
    } else {
        $j.ajax({
            url: 'hooks/ajax-color.php',
            data: {
                pid: pid
            },
            success: function (data) {
                $j('#Color').val(data);
            }
        });
    }
});

/* on changing Customer, retrieve contact no from Customers table and populate Contact field */
$j('#Customer-container').on('change', function () {
    var pid = $j('#Customer-container').select2('val');
    if (pid == '{empty_value}') {
        $j('#Contact_No').val('');
    } else {
        $j.ajax({
            url: 'hooks/ajax-customer_contact.php',
            data: {
                pid: pid
            },
            success: function (data) {
                $j('#Contact_No').val(data);
            }
        });
    }
});


new AppGiniField("Notes")
    .placeholder("Service notes...");

// Visual indication of Payment Status
var balance = parseFloat($j('#Balance').text());
if (balance == 0 || isNaN(balance)) {
    new AppGiniField("Payment_Status").hide();
    new AppGiniField("Balance")
        .insertBelow()
        .alert('PAYMENT FULLY PAID', Variation.info);
} else
if (balance != 0) {
    new AppGiniField("Payment_Status").hide();
    new AppGiniField("Balance")
        .insertBelow()
        .alert('PAYMENT OUTSTANDING', Variation.danger);
}

[jsetzer]

Can you please check how many $j('#Services_dv_action_buttons .btn-toolbar') you have. I guess there are two ".btn-toolbars", not one.

chrome_wqvbe2bH2t.png (2.36 KiB) Viewed 22498 times

If there are two targets, this means you are appending your 2 buttons to 2 btn-toolbars which makes 4 buttons.

You should change the selector and add :eq(0). This will result in one target for your buttons:

chrome_Ad0K1M3mft.png (2.6 KiB) Viewed 22497 times

Modified file hooks/Services.php:

Code: Select all

$j(function(){
  <?php if($selectedID){ ?>
    $j('#Services_dv_action_buttons .btn-toolbar:eq(0)').append(
						'<div class="btn-group-vertical btn-group-lg" style="width: 100%;">' +
							'<button type="button" class="btn btn-warning btn-lg" onclick="print_service_order()">' +
								'<i class="glyphicon glyphicon-ok"></i> Service Order</button>' +	
							'<button type="button" class="btn btn-info btn-lg" onclick="print_invoice()">' +
								'<i class="glyphicon glyphicon-print"></i> Print Invoice</button>' +
						'</div>'
    );
  <?php } ?>
});

See the change :eq(0) in line 3.

[zibrahim]

Hi Jsetzer,
Below is the Service.php file entire content as requested.
I believe that it has only one $j('#Services_dv_action_buttons .btn-toolbar') in it.

Code: Select all

<?php
	// For help on using hooks, please refer to https://bigprof.com/appgini/help/working-with-generated-web-database-application/hooks

	function Services_init(&$options, $memberInfo, &$args) {

		return TRUE;
	}

	function Services_header($contentType, $memberInfo, &$args) {
		$header='';

		switch($contentType) {
			case 'tableview':
				$header='';
				break;

			case 'detailview':
				$header='';
				break;

			case 'tableview+detailview':
				$header='';
				break;

			case 'print-tableview':
				$header='';
				break;

			case 'print-detailview':
				$header='';
				break;

			case 'filters':
				$header='';
				break;
		}

		return $header;
	}

	function Services_footer($contentType, $memberInfo, &$args) {
		$footer='';

		switch($contentType) {
			case 'tableview':
				$footer='';
				break;

			case 'detailview':
				$footer='';
				break;

			case 'tableview+detailview':
				$footer='';
				break;

			case 'print-tableview':
				$footer='';
				break;

			case 'print-detailview':
				$footer='';
				break;

			case 'filters':
				$footer='';
				break;
		}

		return $footer;
	}

	function Services_before_insert(&$data, $memberInfo, &$args) {

		return TRUE;
	}

	function Services_after_insert($data, $memberInfo, &$args) {

		return TRUE;
	}

	function Services_before_update(&$data, $memberInfo, &$args) {

		return TRUE;
	}

	function Services_after_update($data, $memberInfo, &$args) {

		return TRUE;
	}

	function Services_before_delete($selectedID, &$skipChecks, $memberInfo, &$args) {

		return TRUE;
	}

	function Services_after_delete($selectedID, $memberInfo, &$args) {

	}

	function Services_dv($selectedID, $memberInfo, &$html, &$args) {
		if(isset($_REQUEST['dvprint_x'])) return;
		
		ob_start(); ?>
		
		<script>
			$j(function(){
				<?php if($selectedID){ ?>
					$j('#Services_dv_action_buttons .btn-toolbar').append(
						'<div class="btn-group-vertical btn-group-lg" style="width: 100%;">' +
							'<button type="button" class="btn btn-warning btn-lg" onclick="print_service_order()">' +
								'<i class="glyphicon glyphicon-ok"></i> Service Order</button>' +	
							'<button type="button" class="btn btn-info btn-lg" onclick="print_invoice()">' +
								'<i class="glyphicon glyphicon-print"></i> Print Invoice</button>' +
						'</div>'
					);
				<?php } ?>
			});
			
			function print_invoice(){
				var selectedID = '<?php echo urlencode($selectedID); ?>';
				window.location = 'Services_invoice.php?Service_ID=' + selectedID;
			}

			function print_service_order(){
				var selectedID = '<?php echo urlencode($selectedID); ?>';
				window.location = 'Services_service_order.php?Service_ID=' + selectedID;
			}
			
			function do_something_else(){
				alert("This is a Test Button Result.");
			}
		</script>
		
		<?php
		$form_code = ob_get_contents();
		ob_end_clean();
		
		$html .= $form_code;		

	}

	function Services_csv($query, $memberInfo, &$args) {

		return $query;
	}
	function Services_batch_actions(&$args) {

		return array();
	}

Thanking you in advance for your kind and superb support.

Zala

[jsetzer]

Did you try with :eq(0)?

[zibrahim]

Yes !!! You fixed it. You are amazing.
I don't know where the other one exist, but I intend to find out if you can give me some clue in which files I should dig in.
Anyway, thanks again for the help and support.

Zala.

[jsetzer]

Thanks! I'm happy I could help.

Just open the final source code in the browser (CTRL+U in Chrome) and search for btn-toolbar.

There is the default one from AppGini and there is a second one created when initializing AppGiniDetailView object. The 2nd one is required for custom buttons which are documented here:

https://appgini.bizzworxx.de/products/j ... n-buttons/

Regards,
Jan

[zibrahim]

Ahh...mystery solved then.
I will remember to do the same whenever I encountered the similar issue.
Many thanks for sharing your wisdom Jan.

Zala.

[jsetzer]

Thank you for your feedback!