Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
Greetings @KK Sir and to @All!

I am trying to access a repeatable region for performing an AJAX call. I am able to access a repeatable dropdown but for changing its CSS but not for the AJAX call.

This is what I have:
1. Repeatable Region:
Code: Select all
<cms:repeatable name="item_detail" label="Item Detail" order="10" >
        <cms:editable name="product" label="Product" type="dropdown" opt_values="Select =- | <cms:pages masterpage='product/product.php' order='asc' orderby='product_name'><cms:show product_name /><cms:if '<cms:not k_paginated_bottom />'>|</cms:if></cms:pages>" order="1" />
        <cms:editable name="product_hsn" label="HSN" type="text" order="2" />


2. A DBF with the bound field:
Code: Select all
<div class="col-md-12">
    <cms:input name="item_detail" type="bound" onchange="myfunction()" />
    <div class="gxcpl-ptop-20"></div>

3. AJAX:
Code: Select all
<script type="text/javascript">
                $('td div select').change(function() {
                    var data = "";
                        url : "<cms:show k_site_link />generate/quotation-ajax.php",
                        data: {
                        async: false,
                        success : function(data) {           
                        error: function (xhr, status, err) {

4. quotation-ajax.php:
Code: Select all
<?php require_once('../couch/cms.php'); ?>

<cms:set selected_product="<cms:gpc 'select_id' method='get' />" scope="global" />
<cms:pages masterpage='product/product.php' id=selected_product>
    <cms:set selected_product_id="<cms:show k_page_id />" scope="global" />

<cms:content_type 'application/json'/>

<cms:template title="Quotation AJAX" hidden='1' parent="_generate_" />

    <cms:pages masterpage='product/product.php' id=selected_product_id>
            "product_hsn": "<cms:addslashes><cms:show product_hsn/></cms:addslashes>"
        <cms:if "<cms:not k_paginated_bottom/>">,</cms:if>

<?php COUCH::invoke(); ?>

Now if i try to access the dropdown using the following jQuery it works:
Code: Select all
$('td div select').css( "backgroundColor", "yellow" );

and the dropdown background changes to YELLOW.

But if i use the above ajax jquery (as in #3) it does not work at all. What can be the issue!

where innovation meets technology
In the AJAX i have used the following:
Code: Select all

in place of:
Code: Select all
$('td div select').change(function()

So the AJAX is called and the value are returned on Success.

Now coming to another challenge:
How can I populate the "product_hsn" textbox

What I am trying to do is when I select a Product (from dropdown) I make an AJAX call. I am getting the values returned from the AJAX but i want to populate the same in the repeatable region. I am not able to do that since I am unable to access the textboxes.

where innovation meets technology
The correct way to out repeatable regions is like this:
Code: Select all
            "product_hsn": "<cms:addslashes><cms:show_repeatable 'item_detail' ><cms:show product_hsn/></cms:show_repeatable></cms:addslashes>"

So change the code in your JSON file to the one above and let me know if that works.
Actually i was wanting to access the data in the create view using custom routes with the repeatable region exposed in a DBF on the front end.

I have done that using the following code:
Code: Select all
<script type="text/javascript">
                    // Quotation Date
                    $('#f_quotation_date_day').addClass('form-control input-sm').css({"width":"40px", "border-right-width":"0", "border-radius":"3px 0px 3px 0px", "display":"inline-block"});
                    $('select#f_quotation_date_month').addClass('form-control input-sm').css({"width":"60px", "border-right-width":"0", "display":"inline-block", "border-radius":"0"});
                    $('#f_quotation_date_year').addClass('form-control input-sm').css({"width":"50px", "display":"inline-block", "border-radius":"0px 3px 3px 0px"});

                    // Quotation First Row
                    $('input#f_item_detail-0-product_hsn').attr('readonly', true).addClass("form-control");
                    $('input#f_item_detail-0-product_price').attr('onchange', 'line_total()');
                    $('input#f_item_detail-0-product_tax').attr('readonly', true).addClass("form-control");
                    $('input#f_item_detail-0-line_tax_amount').attr('readonly', true).addClass("form-control");
                    $('input#f_item_detail-0-product_line_total_amount').attr('readonly', true).addClass("form-control");
                    $('input#f_quotation_grand_total').attr('readonly', true).addClass("form-control");
                    $('input#f_quotation_gst_total').attr('readonly', true).addClass("form-control");

                // Apply select search on Select Tag
                var counter = 0;
                $(document).ready(function() {
                        $("#f_item_detail-" + counter + "-product").select2();

                // Adding new Quotation Rows
                $(document).on('change', '.k_element_product > div select', function() {
                    var i = 0;
                    var indexs = $(this).closest("tr").index();
                    var selector = $(this);
                        type: "GET",
                        url: "<cms:show k_site_link />generate/quotation/quotation-ajax.php",
                        data: "select_id=" + $(this).val(),
                        async: false
                    }).done(function(data) {
                        $('input#f_item_detail-' + indexs + '-product_hsn').val(data.product_details[i].product_hsn).attr('readonly', true).addClass("form-control");

                        $('#f_item_detail-' + indexs + '-product_qty').attr('onchange', 'line_total(this)').val('1'); //pass this here ...

                        $('#f_item_detail-' + indexs + '-product_price').val(data.product_details[i].product_price).attr('onchange', 'line_total(this)'); //pass this here

                        $('input#f_item_detail-' + indexs + '-product_tax').val(data.product_details[i].product_tax).attr('readonly', true).addClass("form-control");

                        $('#f_item_detail-' + indexs + '-line_tax_amount').attr('readonly', true).addClass("form-control");

                        $('#f_item_detail-' + indexs + '-product_line_total_amount').val(data.product_details[i].product_line_total_amount).attr('readonly', true).addClass("form-control");
                        line_total(selector) //call this


                // Line Item Calculation
                function line_total(selector) {
                    var indexs = $(selector).closest("tr").index();
                    // Quantity
                    var line_qty = $('input#f_item_detail-' + indexs + '-product_qty').val() != "" ? $('input#f_item_detail-' + indexs + '-product_qty').val() : 1;
                    // GST %
                    var line_tax = $('input#f_item_detail-' + indexs + '-product_tax').val();
                    // Price
                    var line_cost = $('input#f_item_detail-' + indexs + '-product_price').val();
                    // GST Amount
                    var line_tax_amount = parseFloat(((line_cost * line_tax) / 100) * line_qty).toFixed(2);
                    // Total Amount
                    var result = parseFloat(+line_qty * +line_cost).toFixed(2);
                    // Display GST Amount in Textbox
                    $('#f_item_detail-' + indexs + '-line_tax_amount').val(line_tax_amount).attr('hidden', true);
                    // Display Total Amount in Textbox
                    $('#f_item_detail-' + indexs + '-product_line_total_amount').val(result);
                    // GST Total Amount (all line items)
                    // Grand Total Amount

                // Grand Total Amount
                function grand_total() {
                    var grand = 0;
                    $(".k_element_product_line_total_amount input").each(function() {
                        grand += $(this).val() != "" ? parseFloat($(this).val()) : 0
                    $("#f_quotation_grand_total").val() != "" ? (parseFloat(grand).toFixed(2)) : 0.00;

                // GST Total Amount (all line items)
                function quotation_gst() {
                    var grand_gst = 0;
                    $(".k_element_line_tax_amount input").each(function() {
                        grand_gst += $(this).val() != 0 ? parseFloat($(this).val()) : 0;

where innovation meets technology
4 posts Page 1 of 1