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" />

    </cms:repeatable>


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>
</div>


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


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:pages>

<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>
    </cms:pages>

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


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

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!

Regards,
GenXCoders
Image
where innovation meets technology
SOLVED:
In the AJAX i have used the following:
Code: Select all
$(document).on('change','select',function()

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.

Regards,
GenXCoders
Image
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.
@adimpressions
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">
                $(document).ready(function(){
                    // 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
                    $("#f_item_detail-0-product").select2();
                    $('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() {
                    $(".addRow").click(function(){
                        counter++;
                        $("#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);
                    $.ajax({
                        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)
                    quotation_gst();
                    // Grand Total Amount
                    grand_total();
                }

                // 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
                    })
                    $("#quotation_grand_total").text(parseFloat(grand).toFixed(2));
                    $("#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;
                    })
                    $("#quotation_gst_total").text(parseFloat(grand_gst).toFixed(2));
                    $("input#f_quotation_gst_total").val(parseFloat(grand_gst).toFixed(2));
                }

            </script>
Image
where innovation meets technology
4 posts Page 1 of 1