Click here to Skip to main content
15,881,173 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionHow do I make an Element slide-in, after user selects choice from drop-down, then it slides out. Pin
Garry 202316-Feb-23 12:07
Garry 202316-Feb-23 12:07 
Questionapi connection culendar Pin
jagadeesh omkaram14-Feb-23 19:00
jagadeesh omkaram14-Feb-23 19:00 
AnswerRe: api connection culendar Pin
Richard MacCutchan14-Feb-23 22:05
mveRichard MacCutchan14-Feb-23 22:05 
AnswerRe: api connection culendar Pin
Dave Kreskowiak15-Feb-23 1:32
mveDave Kreskowiak15-Feb-23 1:32 
QuestionCopying from billing address to mailing address if they are the same not working correctly Pin
samflex11-Feb-23 12:15
samflex11-Feb-23 12:15 
AnswerRe: Copying from billing address to mailing address if they are the same not working correctly Pin
Richard Deeming12-Feb-23 22:02
mveRichard Deeming12-Feb-23 22:02 
GeneralRe: Copying from billing address to mailing address if they are the same not working correctly Pin
samflex13-Feb-23 5:14
samflex13-Feb-23 5:14 
QuestionAjax didn't work for cloning rows, But works for first row only Pin
amr aly3-Feb-23 8:35
amr aly3-Feb-23 8:35 
Hi all,
I’ve two issues

The first one:
as you can see in the second image (when cloning select input with select2 plugin, the cloned input appears with (the first disabled item appended next to the main input in every row)).
[Original row image]
[My issue image]

the second issue:
I’ve ajax code to append “unit menu” based on “product menu” selection
when I create a new row, and select an item from “product menu” I expected that the “unit menu” of the same row must affect and append the “unit list” belongs to the selection of the "product menu" in the same row.
But the behavior according to the next code is very different (after cloning the main row, when I select a product the appended unit list (appears in all unit menu in every row) and after I used ("this" or "the new created class") I get an empty "unit menu" in the new rows (i.e when select a product no changes takes place in the "unit menu")
Only the first row works (select a product append a menu to "unit input menu")

JavaScript
### js.html file
 
<script>
    $(document).ready(function() {
 
        var purchase = $('.purchase-row').last().clone();
        let purchaseCount = 0;
        
        $(document).on('click', '.add_item', function() {
            // $(".select2").select2();
            var clone = purchase.clone(); //.prop('id', 'product_' + purchaseCount);
            // var clone = purchase.clone().prop('class', 'product_' + purchaseCount);
            console.log('clone: ', clone);
            $(this).prevAll('.purchase-row').first().after(clone.hide());
            clone.slideDown('fast');
            
            // $('#product_'+ purchaseCount).find('#id_pro-product').removeClass('product').addClass('newProduct');
            // $('#product_'+  purchaseCount).find('#id_pro-unit').removeClass('unit').addClass('newUnit');
            $('.purchase-row').find('#id_pro-product').removeClass('product').addClass('newProduct');
            $('.purchase-row').find('#id_pro-unit').removeClass('unit').addClass('newUnit');
 
            $('.purchase-row').find('#id_pro-product').addClass('product_'+ purchaseCount);
            $('.purchase-row').find('#id_pro-unit').addClass('unit_'+ purchaseCount);
            // Bind an event
            // $('.newProduct').on('select2:select', function (e) { 
            //     console.log('select event');
            // });
            // The next code for reinitialize select2 
            // var $example = $(".js-programmatic-init").select2();
            var $example = $(".newProduct").select2();
            $example.select2();
 
            // ($(".newProduct").select2().select2());
            // $(".js-programmatic-init").select2();
            // $('.purchase-row').find('.product').addClass('newProduct');
            // $('.purchase-row').find('.unit').addClass('newUnit');
            purchaseCount++;
            console.log('PURCHASE-COUNT: ', purchaseCount);// $(this).parent().slideUp('fast');
            
        });
 
        $(document).on('click', '.purchase-minus', function() {
            if (purchaseCount == 0) {
                // Do nothing.
                alert('You can not delete this row' );
            } else {
                $(this).closest('.purchase-row').remove();
                purchaseCount--;
                console.log('PURCHASE-COUNT2: ', purchaseCount);// $(this).parent().slideUp('fast');2
 
            }
        });
 
        $(document).on('click', '.purchase-broom', function() {
            // $(this).closest('.purchase-row').find('select').val(0);
            $(this).closest('.newProduct').select2('destroy');
            $(this).closest('.purchase-row').find('select')[0].selectedIndex=0;
            // $(this).closest('.purchase-row').find('input').val('');
 
        });
 
 
        $(document).on('change', '.product', function(e){
            var product_id = $(this).val();
            console.log('SUCCESS-CHANGE-PRODUCT: ', product_id);
            $.ajax({
                type: 'POST',
                url: '{% url "purchases:get_product_unit" %}',
                // dataType: 'json',
                // async: true,
                // cache: false,
                data: {
                    'pro-product': $('.purchase-row select').closest('.product').val(), // this is right
                    // find('#id_pro-product')
                },
                success: function (data) { 
                    console.log(
                        'FROM SUCCESS: ', data['unit'],
                    );
                    var values_3 = data['unit'];
                    // $('#id_pro-unit').text('');
                    // $('select').closest('.unit').find('select').text('');
                    $('select').closest('.unit').text('');
                    if (values_3.length > 0) {
                        
                        for (var i = 0; i < values_3.length; i++) {
                            // $('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
                            $('select').closest('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
                        }
                    }
        
                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase !!!');
                },
            });
            e.preventDefault();
        });
 
        $(document).on('change', '.newProduct', function(e){
            var product_id = $(this).val();
            var $this = $(this);
            // $('select').find('#id_pro-product').addClass('product_'+ product_id + '_' + purchaseCount);
            // $('select').find('#id_pro-unit').addClass('unit_'+ product_id + '_' + purchaseCount);
            console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', product_id);
            $.ajax({
                type: 'POST',
                url: '{% url "purchases:get_new_row_unit" %}',
                // dataType: 'json',
                // async: true,
                // cache: false,
                data: {
                    'pro-product': product_id,
                    // $('#product_'+purchaseCount).closest('.newProduct select').val(),
                    // find('#id_pro-product')
                },
                success: function (data) { 
                    console.log(
                        'FROM SUCCESS-NEW-CLASS: ', data['unit'],
                        'PRODUCT-FROM-NEW-CLASS: ', data['product'],
                    );
                    var values_3 = data['unit'];
                    // $('#id_pro-unit').text('');
                    $('select').closest('.unit_'+purchaseCount).text('');
                    if (values_3.length > 0) {
                        
                        for (var i = 0; i < values_3.length; i++) {
                            $('.purchase-row select').closest('.unit_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
                            // $('.newUnit select').closest('#product_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
                            // $('select').closest('#product_'+ purchaseCount).find('.newUnit').append('<option>' + values_3[i] + '</option>');
                            // $('.newUnit select').closest('.unit_'+purchaseCount).append('<option>' + values_3[i] + '</option>');
                        }
                    }
        
                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
                },
            });
            e.preventDefault();
        });
 
 
    });
 
</script>


[Pastebin link]

[Codepen link]

By the way I'm using Django so the inputs will not appear correctly in codepen link
Sorry for prolongation.... Thanks
Amr Aly

AnswerRe: Ajax didn't work for cloning rows, But works for first row only Pin
amr aly9-Feb-23 5:35
amr aly9-Feb-23 5:35 
QuestionI am using javascript to convert a large table to a pdf Pin
Zahira CHOUIBA26-Jan-23 3:22
Zahira CHOUIBA26-Jan-23 3:22 
QuestionRe: I am using javascript to convert a large table to a pdf Pin
Jeremy Falcon26-Jan-23 8:02
professionalJeremy Falcon26-Jan-23 8:02 
AnswerRe: I am using javascript to convert a large table to a pdf Pin
RickyJudith8-Feb-23 0:24
RickyJudith8-Feb-23 0:24 
QuestionI have problem importing images of Json File on HTML Table Pin
Member 1590151922-Jan-23 2:14
Member 1590151922-Jan-23 2:14 
AnswerRe: I have problem importing images of Json File on HTML Table Pin
Jeremy Falcon24-Jan-23 4:30
professionalJeremy Falcon24-Jan-23 4:30 
Questionsoftware access control Pin
Member 1589900419-Jan-23 0:51
Member 1589900419-Jan-23 0:51 
AnswerRe: software access control Pin
Richard Deeming19-Jan-23 1:25
mveRichard Deeming19-Jan-23 1:25 
QuestionUse async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206711-Jan-23 23:35
Member 1589206711-Jan-23 23:35 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 0:02
mveRichard Deeming12-Jan-23 0:02 
QuestionRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 1:38
Member 1589206712-Jan-23 1:38 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 2:31
mveRichard Deeming12-Jan-23 2:31 
PraiseRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 3:17
Member 1589206712-Jan-23 3:17 
GeneralRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 3:39
mveRichard Deeming12-Jan-23 3:39 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Jeremy Falcon12-Jan-23 8:44
professionalJeremy Falcon12-Jan-23 8:44 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Leon Scott Kennedy13-Jan-23 5:25
Leon Scott Kennedy13-Jan-23 5:25 
QuestionJava Script Pin
Prerna Kharbanda3-Jan-23 20:56
professionalPrerna Kharbanda3-Jan-23 20:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.