JavaScript Discussion Boards

want to help in javascript code

Member 1592799418-Feb-23 4:33

Member 15927994

18-Feb-23 4:33

Before:

This is not a test.
This is line 2.

After:

This is totally a test.
This is line 2.

Compare

Differences:

// events

function buttonCompareClicked()
{
var textBefore = document.getElementById("textareaBefore").value;
var textAfter = document.getElementById("textareaAfter").value;

var differences = new TextDifferencer().findDifferencesBetweenStrings
(
textBefore,
textAfter
);

var differencesAsString = differences.toString();

var textareaDifferences = document.getElementById
(
"textareaDifferences"
);
textareaDifferences.innerHTML = differencesAsString;

}

// extensions

function ArrayExtensions()
{
// extension class
}
{
Array.prototype.insertElementAt = function(element, index)
{
this.splice(index, 0, element);
}

Array.prototype.insertElementsAt = function(elements, index)
{
for (var i = 0; i < elements.length; i++)
{
this.splice(index + i, 0, elements[i]);
}
}

Array.prototype.removeAt = function(index)
{
this.splice(index, 1);
}
}

// classes

function TextDifferencer()
{
// do nothing
}
{
TextDifferencer.prototype.findDifferencesBetweenStrings = function(string0, string1)
{
var lengthOfShorterString =
(string0.length <= string1.length ? string0.length : string1.length);

var numberOfExtremes = 2;
var passagePairsMatchingAtExtremes = [];

for (var e = 0; e < numberOfExtremes; e++)
{
var lengthOfMatchingSubstring = 0;

for (var i = 0; i < lengthOfShorterString; i++)
{
var offsetForString0 = (e == 0 ? i : string0.length - i - 1);
var offsetForString1 = (e == 0 ? i : string1.length - i - 1);

var charFromString0 = string0[offsetForString0];
var charFromString1 = string1[offsetForString1];

if (charFromString0 != charFromString1)
{
lengthOfMatchingSubstring = i;
break;
}
}

var matchingSubstringAtExtreme;

if (e == 0)
{
matchingSubstringAtExtreme = string0.substr(0, lengthOfMatchingSubstring);
string0 = string0.substr(lengthOfMatchingSubstring);
string1 = string1.substr(lengthOfMatchingSubstring);
} else // if (e == 1)
{
matchingSubstringAtExtreme = string0.substr(string0.length - lengthOfMatchingSubstring);
string0 = string0.substr(0, string0.length - lengthOfMatchingSubstring);
string1 = string1.substr(0, string1.length - lengthOfMatchingSubstring);
}

var passagePairMatchingAtExtreme = new TextPassagePair
(
true, // doPassagesMatch
[
new TextPassage(matchingSubstringAtExtreme),
new TextPassage(matchingSubstringAtExtreme),
]
);

passagePairsMatchingAtExtremes.push
(
passagePairMatchingAtExtreme
);
}

var passagePairsAll = [];

var passagePairsMatching = this.findPassagePairsMatchingBetweenStrings
(
string0, string1, [ 0, 0 ]
);

this.insertPassagePairsDifferentBetweenMatching
(
string0,
string1,
passagePairsMatching,
passagePairsAll
);

for (var e = 0; e < passagePairsMatchingAtExtremes.length; e++)
{
var passagePairMatchingAtExtreme = passagePairsMatchingAtExtremes[e];
passagePairsAll.insertElementAt
(
passagePairMatchingAtExtreme,
(e == 0 ? 0 : passagePairsAll.length)
);
}

var returnValue = new TextDifferences(passagePairsAll);

return returnValue;
}

TextDifferencer.prototype.findPassagePairsMatchingBetweenStrings = function
(
string0, string1, positionOffsets
)
{
var passagePairsMatching = [];

var longestCommonPassagePair = this.findLongestCommonPassagePair
(
string0,
string1
);

var longestCommonPassageText = longestCommonPassagePair.passages[0].text;
var lengthOfCommonPassage = longestCommonPassageText.length;

if (lengthOfCommonPassage == 0)
{
return passagePairsMatching;
}

passagePairsMatching.push(longestCommonPassagePair);

var passages = longestCommonPassagePair.passages;
var passage0 = passages[0];
var passage1 = passages[1];

var passagePairsMatchingBeforeCommon = this.findPassagePairsMatchingBetweenStrings
(
string0.substr(0, passage0.position),
string1.substr(0, passage1.position),
[
positionOffsets[0],
positionOffsets[1]
]
);

var passagePairsMatchingAfterCommon = this.findPassagePairsMatchingBetweenStrings
(
string0.substr
(
passage0.position + lengthOfCommonPassage
),
string1.substr
(
passage1.position + lengthOfCommonPassage
),
[
positionOffsets[0]
+ passage0.position
+ lengthOfCommonPassage,

positionOffsets[1]
+ passage1.position
+ lengthOfCommonPassage
]
);

var passagePairSetsMatchingBeforeAndAfter =
[
passagePairsMatchingBeforeCommon,
passagePairsMatchingAfterCommon
];

for (var i = 0; i < passagePairSetsMatchingBeforeAndAfter.length; i++)
{
var passagePairsToInsert = passagePairSetsMatchingBeforeAndAfter[i];
passagePairsMatching.insertElementsAt
(
passagePairsToInsert,
(i == 0 ? 0 : passagePairsMatching.length)
);
}

for (var i = 0; i < longestCommonPassagePair.passages.length; i++)
{
var passage = longestCommonPassagePair.passages[i];
passage.position += positionOffsets[i];
}

return passagePairsMatching;
}

TextDifferencer.prototype.findLongestCommonPassagePair = function(string0, string1)
{
var passage0 = new TextPassage("", 0);
var passage1 = new TextPassage("", 0);

var returnValue = new TextPassagePair
(
true, // doPassagesMatch
[
passage0, passage1
]
);

var lengthOfString0 = string0.length;
var lengthOfString1 = string1.length;

var substringLengthsForRow = null;
var substringLengthsForRowPrev;

var lengthOfLongestCommonSubstringSoFar = 0;
var longestCommonSubstringsSoFar = "";
var cellIndex = 0;

// Build a table whose y-axis is chars from string0,
// and whose x-axis is chars from string1.
// Put length of the longest substring in each cell.

for (var i = 0; i < lengthOfString0; i++)
{
substringLengthsForRowPrev = substringLengthsForRow;
substringLengthsForRow = [];

for (var j = 0; j < lengthOfString1; j++)
{
if (string0[i] != string1[j])
{
substringLengthsForRow[j] = 0;
}
else
{
var cellValue;

if (i == 0 || j == 0)
{
// first row or column
cellValue = 1;
}
else
{
// Copy cell to upper left, add 1.
cellValue = substringLengthsForRowPrev[j - 1] + 1;
}

substringLengthsForRow[j] = cellValue;

if (cellValue > lengthOfLongestCommonSubstringSoFar)
{
lengthOfLongestCommonSubstringSoFar = cellValue;
var startIndex = i - lengthOfLongestCommonSubstringSoFar + 1;
var longestCommonSubstringSoFar = string0.substring // not "substr"!
(
startIndex,
i + 1
);

passage0.text = longestCommonSubstringSoFar;
passage0.position = startIndex;

passage1.text = longestCommonSubstringSoFar;
passage1.position = j - lengthOfLongestCommonSubstringSoFar + 1;
}
}
}
}

return returnValue;
}

TextDifferencer.prototype.insertPassagePairsDifferentBetweenMatching = function
(
string0,
string1,
passagePairsToInsertBetween,
passagePairsAll
)
{
passagePairsToInsertBetween.insertElementAt
(
new TextPassagePair
(
true, // doPassagesMatch
[
new TextPassage("", 0),
new TextPassage("", 0)
]
),
0
);

passagePairsToInsertBetween.push
(
new TextPassagePair
(
true, // doPassagesMatch
[
new TextPassage("", string0.length),
new TextPassage("", string1.length)
]
)
);

var pMax = passagePairsToInsertBetween.length - 1;

for (var p = 0; p < pMax; p++)
{
passagePairToInsertAfter = passagePairsToInsertBetween[p];
passagePairToInsertBefore = passagePairsToInsertBetween[p + 1];

this.buildAndInsertPassagePairBetweenExisting
(
string0,
string1,
passagePairToInsertBefore,
passagePairToInsertAfter,
passagePairsAll
);

passagePairsAll.push(passagePairToInsertBefore);
}

var indexOfPassagePairFinal = passagePairsAll.length - 1;

var passagePairFinal = passagePairsAll[indexOfPassagePairFinal];

if
(
passagePairFinal.doPassagesMatch == true
&& passagePairFinal.passages[0].text.length == 0
)
{
passagePairsAll.removeAt(indexOfPassagePairFinal, 1);
}
}

TextDifferencer.prototype.buildAndInsertPassagePairBetweenExisting = function
(
string0,
string1,
passagePairToInsertBefore,
passagePairToInsertAfter,
passagePairsAll
)
{
var lengthOfPassageToInsertAfter = passagePairToInsertAfter.passages[0].text.length;

var positionsForPassagePairDifferent =
[
[
passagePairToInsertAfter.passages[0].position
+ lengthOfPassageToInsertAfter,

passagePairToInsertAfter.passages[1].position
+ lengthOfPassageToInsertAfter
],
[
passagePairToInsertBefore.passages[0].position,
passagePairToInsertBefore.passages[1].position
]
];

var passageToInsert0 = new TextPassage
(
string0.substring // not "substr"!
(
positionsForPassagePairDifferent[0][0],
positionsForPassagePairDifferent[1][0]
),
positionsForPassagePairDifferent[0][0]
);

var passageToInsert1 = new TextPassage
(
string1.substring // not "substr"!
(
positionsForPassagePairDifferent[0][1],
positionsForPassagePairDifferent[1][1]
),
positionsForPassagePairDifferent[0][1]
);

var passagePairToInsert = new TextPassagePair
(
false, // doPassagesMatch
[
passageToInsert0,
passageToInsert1
]
);

if
(
passagePairToInsert.passages[0].text.length > 0
|| passagePairToInsert.passages[1].text.length > 0
)
{
passagePairsAll.push(passagePairToInsert);
}

}
}

function TextDifferences(passagePairs)
{
this.passagePairs = passagePairs;
}
{
// instance methods

TextDifferences.prototype.toString = function()
{
var returnValue = "";

for (var p = 0; p < this.passagePairs.length; p++)
{
var passagePair = this.passagePairs[p];
var passagePairAsString = passagePair.toString();

returnValue += passagePairAsString;
}

return returnValue;
}

}

function TextPassage(text, position)
{
this.text = text;
this.position = position;
}

function TextPassagePair(doPassagesMatch, passages)
{
this.doPassagesMatch = doPassagesMatch;
this.passages = passages;
}
{
TextPassagePair.prototype.toString = function()
{
var returnValue = "";

if (this.doPassagesMatch == true)
{
returnValue = this.passages[0].text;
returnValue = this.escapeStringForHTML(returnValue);
}
else
{
returnValue += "";
returnValue += this.escapeStringForHTML(this.passages[0].text);
returnValue += "";
returnValue += this.escapeStringForHTML(this.passages[1].text);
returnValue += "";

}

return returnValue;
}

TextPassagePair.prototype.escapeStringForHTML = function(stringToEscape)
{
var returnValue = stringToEscape.replace
(
"&", "&"
).replace
(
"<", "<"
).replace
(
">", ">"
).replace
(
"\n", " "
);

return returnValue;
}
}

In this i want to show the similarity percentage of words. can anyone help me

Re: want to help in javascript code

Richard Deeming19-Feb-23 21:56

Richard Deeming

19-Feb-23 21:56

Member 15927994 wrote:
can anyone help me

Not until you learn how to ask a proper question.

Dumping 500+ lines of unformatted, unexplained code and appending a vague description of your requirement is not a good question.

Start by explaining precisely what you are trying to do, what you have tried, and where you are stuck. When including code, include only the relevant parts of the code, and ensure it is formatted properly by selecting it and pressing the code button on the toolbar, or surrounding it with <pre>...</pre> tags.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Javascript

niveditha2216-Feb-23 22:20

niveditha22

16-Feb-23 22:20

how to unzip and download all images of a zip file using javascript

Re: Javascript

CHill6016-Feb-23 22:21

CHill60

16-Feb-23 22:21

Er ... how to unzip and download all images of a zip file using javascript - Google Search[^]

How do I make an Element slide-in, after user selects choice from drop-down, then it slides out.

Garry 202316-Feb-23 12:07

Garry 2023

16-Feb-23 12:07

I need an element on my page to slide-in automatically 3 seconds after page is opened, and then slide-out after user chooses their preferred choice from the dropdown menu (which is the Element). I want the slide-in/slide-out effect to be from the right-hand side of the page. 

The dropdown menu particularly is the 'Google Translate Element', which I have styled to my desired appearance, and I want this to slide in 4 seconds upon page lunch and after user chooses desired language, it slides out.

Below is the code for the styled Element

 /*google translate Dropdown */
 
#google_translate_element select{
 background: rgba(246,237,253,0.92) !important;
 border: none !important;
 color: rgba(54,58,173) !important;
 width: 115px !important;
 border-radius: 5px !important;
 padding: 5px 5px !important;
 font-size: 11.8px !important;
 position: absolute !important; 
 margin-top: 84px !important; 
 margin-left: 232px !important;
 
}


.vl {
    position: absolute !important;
    border-left: 3.7px solid green !important;
    border-radius: 2px !important;
    height: 30px !important;
    margin-top: 67px !important;
    margin-left:351px !important;
}





 /*google translate link | logo */
.goog-logo-link,.goog-te-gadget span,div#goog-gt-{
   display:none!important;
}

.goog-te-gadget{
   color:transparent!important;
   font-size:0;
 }
 
 /* google translate banner-frame */
 
.goog-te-banner-frame{
 display:none !important;
 }
 
 
#goog-gt-tt, .goog-te-balloon-frame{
   display: none !important;
    
}

.goog-text-highlight { 
    background: none !important; 
    box-shadow: none !important;
}

<div id="google_translate_element"></div>
<div class="vl"></div>

api connection culendar

jagadeesh omkaram14-Feb-23 19:00

jagadeesh omkaram

14-Feb-23 19:00

I need api connection code from google calendar in javascript

Re: api connection culendar

Richard MacCutchan14-Feb-23 22:05

Richard MacCutchan

14-Feb-23 22:05

I need lots of money and a fast car.

Re: api connection culendar

Dave Kreskowiak15-Feb-23 1:32

Dave Kreskowiak

15-Feb-23 1:32

Nobody is going to do your work for you, and this is not a "core for hire" site.

If you want someone to do your work for you, I suggest Freelancer.com and get out your credit card.

Asking questions is a skill
CodeProject Forum Guidelines
Google: C# How to debug code
Seriously, go read these articles.

Dave Kreskowiak

Copying from billing address to mailing address if they are the same not working correctly

samflex11-Feb-23 12:15

samflex

11-Feb-23 12:15

I have a form that asks users to provide their billing and shipping addresses.

If the billing address is same as the mailing address, click a checkbox to copy the billing address information to mailing address boxes.

So far, address, city and zip are getting copied from billing to mailing addresses but the State address is not getting copy.

The billing State has a hardcoded value of WI for Wisconsin. That NEVER changes, hence it is hardcoded.

The mailing address for State has a DropDownList of states, I am pretty sure that has to do with why the billing address for State is not getting cover over to mailing address for State.

Can you guys please see what I am doing wrong?

Here is what I am working with.

    <script type="text/javascript">
        $('#SameAsMailing').click(function () {
         if ($('input[name="SameAsMailing"]').is(':checked')) {
         $('#mailStreetAddress').val($('#instAddress').val());
         $('#mailCity').val($('#instAddressCity').val());
         var thestate = $('#instAddressState option:selected').val();
         if (thestate != "") {
                     $('#mailState option[value="' + thestate + '"]').prop('selected', true);
              }
         $('#mailZip').val($('#instAddressZip').val());
         }
       else
        {
        //Clear on uncheck
        $('#mailStreetAddress').val("");
        $('#mailCity').val("");
        $('#mailState option:eq(0)').prop('selected', true);
        $('#mailZip').val("");
       }
     });
   </script>


<asp:TableRow>
  <asp:TableHeaderCell CssClass="align-right">Install Address:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="instAddress" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
<asp:TableCell><asp:DropDownList ID="instAddressCity" OnSelectedIndexChanged="instAddressCity_Changed" AutoPostBack="true" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">State:</asp:TableHeaderCell>
<asp:TableCell  CssClass="align-left"><asp:Label ID="instAddressState" runat="server" Text="WI" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-left">Zip:</asp:TableHeaderCell>
<asp:TableCell><asp:DropDownList ID="instAddressZip" runat="server" /></asp:TableCell>
</asp:TableRow>

<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">Address:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="mailStreetAddress" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="mailCity" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">State:</asp:TableHeaderCell>
<asp:TableCell><asp:DropDownList ID="mailState" runat="server"></asp:DropDownList></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">Zip:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="mailZip" runat="server" /></asp:TableCell>
</asp:TableRow>

Many thanks in advance

Re: Copying from billing address to mailing address if they are the same not working correctly

Richard Deeming12-Feb-23 22:02

Richard Deeming

12-Feb-23 22:02

samflex wrote:

JavaScript

var thestate = $('#instAddressState option:selected').val();
if (thestate != "") {
    $('#mailState option[value="' + thestate + '"]').prop('selected', true);
}

Try:

JavaScript

var thestate = $('#instAddressState').val();
if (thestate !== "") {
    $('#mailState').val(thestate);
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Copying from billing address to mailing address if they are the same not working correctly

samflex13-Feb-23 5:14

samflex

13-Feb-23 5:14

Thank you for your response sir but it did not work.

In other words, the value of WI did not get copied to the mailState DropDownList.

I tried hardcoding the State value since that will always be the same like this:

var thestate = 'WI';
if (thestate !== "") {
    $('#mailState').val(thestate);
}

It appears to change something on the mailState dropdownlist but did not display that WI value in the dropdown.

Instead, it showed blank value as the selected value on the mailState dropdownlist box.

modified 13-Feb-23 11:38am.

Ajax didn't work for cloning rows, But works for first row only

amr aly3-Feb-23 8:35

amr aly

3-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

Re: Ajax didn't work for cloning rows, But works for first row only

amr aly9-Feb-23 5:35

amr aly

9-Feb-23 5:35

Finally I fix my issue as usual. I want to share my solution of this issue.

JavaScript

$(document).on('change', '.product', function(e){
            var product_id = $(this).val();
            let $el = $(this).closest('.purchase-row');
            console.log('SUCCESS-CHANGE-PRODUCT: ', product_id,);
            $.ajax({
                type: 'POST',
                url: '{% url "purchases:get_product_unit" %}',
                data: {
                    'pro-product': product_id,
                },
                success: function (data) { 
                    if (purchaseCount == 0) {
                        console.log('purchase count equal to ZERO: ');
                        console.log(
                            'FROM SUCCESS: ', data['unit'],
                        );
                        var values_3 = data['unit'];               
                        if (values_3.length > 0) {
                        
                            for (var i = 0; i < values_3.length; i++) {
                                $el.find('.unit').append('<option>' + values_3[i] + '</option>');
                            }
                        }
                    } else {
                        let unit = $el.find('.newUnit'); // here I can access the "unit input" of the same row of the "product input"
                        var values_3 = data['unit'];
                        unit.text('');
                        console.log('COUNT IS NOT EQUAL TO ZERO:', values_3);
                        if (values_3.length > 0) {
                            for (var i = 0; i < values_3.length; i++) {
                                unit.append('<option>' + values_3[i] + '</option>');
                            }
                        }
                    }
        
                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase !!!');
                },
            });
            e.preventDefault();
        });

Or in an enhanced code snippet as follow

JavaScript

$(document).on("change", ".product", function (e) {
    var product_id = $(this).val();
    let $el = $(this).closest(".purchase-row");
    console.log("SUCCESS-CHANGE-PRODUCT: ", product_id);
    $.ajax({
      type: "POST",
      url: '{% url "purchases:get_product_unit" %}',
      data: {
        "pro-product": product_id
      },
      success: function (data) {
        const values_3 = data.unit;
        const unitClass = purchaseCount == 0 ? ".unit" : ".newUnit";
        const unit = $el.find(unitClass);
        unit.text(''); 
        if (values_3.length) {
          for (const value of values_3) {
            unit.append(`<option>${value}</option>`);
          }
        }
      },
      error: function () {
        console.log("ERROR with ajax request in Adding Purchase !!!");
      }
    });
    e.preventDefault();
  });

I am using javascript to convert a large table to a pdf

Zahira CHOUIBA26-Jan-23 3:22

Zahira CHOUIBA

26-Jan-23 3:22

Hi everyone,

I wrote this great script to help my team set up the weekly task distribution board, I wrote it using java script, html, and css, they've been doing it for a very long time in pencil on paper. but now i am in the final stage, i would like to convert my table to pdf, and this is where i found it difficult, i did several tests : like convert csv to pdf, it doesn't always give a good table, as it is under html. I would like to add a column at the end of the table for remarks but I think I will try with it later. now i'm just focus on pdf export. to be able to print our table every week and hang it, instead of pencil and a paper.

JavaScript

<pre>

<table id="timetable">

 <body>
 <tr>
      <td>

        <link href="table.css" rel="stylesheet">
        <script src="table.js"></script>
            
    </td>

<tr>

<button onclick="exportCSV()">Export CSV</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<button onclick="exportPDF()">Export PDF</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/vfs_fonts.js"></script>

    
 </body>
 
 const timetable = document.getElementById("timetable");

const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const hours = ["7H", "13H", "20H"];

// Create table headers for days
const daysHeaderRow = document.createElement("tr");
const daysHeaderCell = document.createElement("th");
daysHeaderCell.innerHTML = "Days";
daysHeaderRow.appendChild(daysHeaderCell);
days.forEach(day => {
  const dayHeaderCell = document.createElement("th");
  dayHeaderCell.innerHTML = day;
  dayHeaderCell.colSpan = 3;
  daysHeaderRow.appendChild(dayHeaderCell);
});
timetable.appendChild(daysHeaderRow);

// Create table headers for hours
const hoursHeaderRow = document.createElement("tr");
const hoursHeaderCell = document.createElement("th");
hoursHeaderCell.innerHTML = "Hours";
hoursHeaderRow.appendChild(hoursHeaderCell);
for (let i = 0; i < days.length; i++) {
  for (let j = 0; j < 3; j++) {
    const hourHeaderCell = document.createElement("th");
    hourHeaderCell.innerHTML = hours[j];
    hoursHeaderRow.appendChild(hourHeaderCell);
  }
}
timetable.appendChild(hoursHeaderRow);

// Create row for Mina
const names = ["Khalfi","Redouani", "Daki", "Hamma", "Saadane", "Boughanem", "El Ansari","Badilou","Raoui", "Chouiba", "Dahmane", "Achdad", "Bouryal", "Ettouri", "Saadouni"];
for (let name of names) {
  const row = document.createElement("tr");
  const nameCell = document.createElement("td");
  nameCell.innerHTML = name;
  row.appendChild(nameCell);
  for (let i = 0; i < days.length; i++) {
    for (let j = 0; j < 3; j++) {
      const cell = document.createElement("td");
      const select = document.createElement("select");
      select.classList.add("cell");
      const options = [" ", "CP", "ME", "CL", "CE", "R"];
      options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option;
        optionElement.innerHTML = option;
        select.appendChild(optionElement);
      });
      cell.appendChild(select);
      row.appendChild(cell);
    }
  }
  timetable.appendChild(row);
}




function exportCSV() {
    var rows = document.querySelectorAll("#timetable tr");
    var csvData = [];
    for (var i = 0; i < rows.length; i++) {
        var rowData = [];
        var cells = rows[i].querySelectorAll("td, th");
        for (var j = 0; j < cells.length; j++) {
            const select = cells[j].querySelector("select");
            if(select){
                rowData.push(select.value);
            }else{
                rowData.push(cells[j].innerText);
            }
        }
        csvData.push(rowData);
    }
    var csv = Papa.unparse(csvData);
    var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var csvURL =  null;
    if (navigator.msSaveBlob) {
        csvURL = navigator.msSaveBlob(csvData, 'timetable.csv');
    } else {
        csvURL = window.URL.createObjectURL(csvData);
    }
    var tempLink = document.createElement('a');
    tempLink.href = csvURL;
    tempLink.setAttribute('download', 'timetable.csv');
    tempLink.click();

    // Convert the CSV data to a PDF and download it
    
var pdf = new jsPDF('l','mm','a4');
pdf.addPage();
pdf.text(csv, 10, 10);
pdf.save('timetable.pdf');


#timetable th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
background-color: #006699; /* bleu foncé /
}
#timetable tr:nth-child(even) {
background-color: #E6E6FA; / lavande */
}

/* Mise en page globale */
body {
  background-color: #f1f1f1;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Style de la barre de navigation */
nav {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

/* Style de la section principale */
main {
  padding: 20px;
}

/* Style des titres */
h1, h2, h3 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Style des paragraphes */
p {
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Style des images */
img {
  max-width: 100%;
}

Re: I am using javascript to convert a large table to a pdf

Jeremy Falcon26-Jan-23 8:02

Jeremy Falcon

26-Jan-23 8:02

Congrats?

Jeremy Falcon

Re: I am using javascript to convert a large table to a pdf

RickyJudith8-Feb-23 0:24

RickyJudith

8-Feb-23 0:24

interesting

I have problem importing images of Json File on HTML Table

Member 1590151922-Jan-23 2:14

Member 15901519

22-Jan-23 2:14

Hello,

I successfully loaded the json responses into an HTML table. However, I am having a problem displaying the images of the json variables. I could only display the links. Here is the output:

Home Team 	                                              Match Date 	           Away Team
https://media-3.api-sports.io/football/teams/2939.png 	2023-01-22T20:30:00+03:00 	https://media-3.api-sports.io/football/teams/2934.png
https://media-3.api-sports.io/football/teams/2938.png 	2023-01-26T21:00:00+03:00 	https://media-3.api-sports.io/football/teams/2939.png
https://media.api-sports.io/football/teams/2931.png 	2023-02-03T17:00:00+03:00 	https://media.api-sports.io/football/teams/2939.png
https://media.api-sports.io/football/teams/2937.png 	2023-02-09T19:30:00+03:00 	https://media-3.api-sports.io/football/teams/2939.png
https://media-3.api-sports.io/football/teams/2939.png 	2023-02-17T17:00:00+03:00 	https://media-3.api-sports.io/football/teams/2936.png

Here is a sample of the json file:

<pre>array (
  'api' => 
  array (
    'results' => 10,
    'fixtures' => 
    array (
      0 => 
      array (
        'fixture_id' => 932017,
        'league_id' => 4633,
        'league' => 
        array (
          'name' => 'Pro League',
          'country' => 'Saudi-Arabia',
          'logo' => 'https://media-3.api-sports.io/football/leagues/307.png',
          'flag' => 'https://media-3.api-sports.io/flags/sa.svg',
        ),
        'event_date' => '2023-01-22T20:30:00+03:00',
        'event_timestamp' => 1674408600,
        'firstHalfStart' => NULL,
        'secondHalfStart' => NULL,
        'round' => 'Regular Season - 14',
        'status' => 'Not Started',
        'statusShort' => 'NS',
        'elapsed' => 0,
        'venue' => 'Mrsool Park',
        'referee' => NULL,
        'homeTeam' => 
        array (
          'team_id' => 2939,
          'team_name' => 'Al-Nassr',
          'logo' => 'https://media.api-sports.io/football/teams/2939.png',
        ),
        'awayTeam' => 
        array (
          'team_id' => 2934,
          'team_name' => 'Al-Ettifaq',
          'logo' => 'https://media.api-sports.io/football/teams/2934.png',
        ),
        'goalsHomeTeam' => NULL,
        'goalsAwayTeam' => NULL,
        'score' => 
        array (
          'halftime' => NULL,
          'fulltime' => NULL,
          'extratime' => NULL,
          'penalty' => NULL,
        ),
      ),

And here is the code for importing the json output into the HTML table:

JavaScript

<pre><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Home Team</th>
        <th>Match Date</th>
        <th>Away Team</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
	var myArray = []
	

	$.ajax({
		method:'GET',
		url:'https://api-football-v1.p.rapidapi.com/v2/fixtures/team/2939/next/10?rapidapi-key={API-Key}',
		success:function(response){
			myArray = response
			buildTable(myArray)
			console.log(myArray)
		}
	})



	function buildTable(data){
		var table = document.getElementById('myTable')
		for (var i = 0; i < data.api.fixtures.length; i++){
		const rm = data.api.fixtures[i];

			var row = `<tr>
					   <td>${rm.homeTeam.logo}</td>
					   <td>${rm.event_date}</td>
					   <td>${rm.awayTeam.logo}</td>
					  </tr>`
			table.innerHTML += row


		}
	}

</script>

As you can see, I need to show the images of homeTeam.logo and awayTeam.logo instead of their hyperlinks. Thanks in advance

Re: I have problem importing images of Json File on HTML Table

Jeremy Falcon24-Jan-23 4:30

Jeremy Falcon

24-Jan-23 4:30

Looks like an old codebase using PHP and jQuery. Just FYI, rather than dump all your code, perhaps start with just the relevant bits? It shows us you put some effort into this.

Anywho, that JSON object will only have a string in it. If that string is a path to an image, you'll have to output that path in its src attribute, similar to the way you're building out that table.

JavaScript

const output = `<img src="${object.path}" />`;
element.innerHTML += output;

Note: There are better ways to go about this, but I'll save that for a different day.

Jeremy Falcon

modified 24-Jan-23 13:34pm.

software access control

Member 1589900419-Jan-23 0:51

Member 15899004

19-Jan-23 0:51

hi.
we need to make software access control using device ZKTECO.
with language java.
us possible to help.
best regards

Re: software access control

Richard Deeming19-Jan-23 1:25

Richard Deeming

19-Jan-23 1:25

1) Despite the similar names, Java and JavaScript are completely different languages. You have posted this question in the JavaScript forum, despite saying you want to use Java.

2) If you want help, then you need to describe precisely what you are trying to do, show the code you have tried, and explain what the problem is and where you are stuck. Nobody here is going to do your work for you!

3) The best place to start with questions on a specific device is to ask the device manufacturer.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Use async function to retrieve data while looping through from another function to insert objects

Member 1589206711-Jan-23 23:35

Member 15892067

11-Jan-23 23:35

Hello! I want to say that I just started working with nodejs. I used before php/laravel.

I have 2 tables, one is for posts one is for posts_actions. Every user can create a post and other users can like/comment on that post. Every action on that post (eg: like) will be stored in table posts_actions.

I'm trying to load the posts from database, loop through them to add an extra object with all the data from table posts_actions.

But at the end, when I send back the data to frontend, the data is empty, why is that and how can I solve this?

app.post("/api/loadposts", function(req, res) {
    let posts = [];
    let posts_actions = [];
    const userid = req.body.userID;

    db.query("SELECT * FROM posts ORDER BY id DESC",
    (error, result) => {
        if(error) {
            return res.status(200).send({ error: true });
        }
       
        posts = result;
    });

    for(let p; p < posts.length; p++)
    {
        db.query("SELECT * FROM posts_actions WHERE post_id = ? AND user_id = ? LIMIT 1", [posts[p].id, userid],
            (e, r) => {
                if(e) {
                    posts[p].action = [];
                }
                else if(r.length > 0) {
                    posts[p].action = r[0];
                }
                else {
                    posts[p].action = [];
                }
        });
    }

    res.status(200).send({ data: posts });
});

I know that I must use async/await/promise, I followed some topics and tried the code below, but the data I send to frontend is empty.
A little help here, what can I do to have the result I want?

async function doQuery(query, params = []) {
    function queryData(query, params) {
        return new Promise(function(resolve, reject) {
            db.query(query, params, function (err, rows, fields) {
                if (err) {
                    return reject(err);
                }
                resolve(rows);
            });
        });
    }

    queryData(query, params).then(function(v) {
        return v;
    }).catch(function(v) {
        return [];
    })

    return null;
}

async function getAllPosts(userid)
{
    try {
        let posts = await doQuery("SELECT * FROM posts ORDER BY id DESC");

        for(let p = 0; p < posts.length; p++)
        {
            let actions = await doQuery("SELECT * FROM posts_actions WHERE post_id = ? AND user_id = ? LIMIT 1", [posts[p].id, userid]);

            if(actions.length)
            {
                posts[p].actions = actions[0];
            }
            else
            {
                posts[p].actions = [];
            }
        }

        return posts;
    } catch (error) {
        return error;
    }
}

app.post("/api/loadposts", async function(req, res)
{
    let posts = await getAllPosts(req.body.userID);
    res.send({ data: posts });
});

modified 12-Jan-23 6:11am.

Re: Use async function to retrieve data while looping through from another function to insert objects

Richard Deeming12-Jan-23 0:02

Richard Deeming

12-Jan-23 0:02

Your doQuery function always returns null. You need to start by fixing that:

JavaScript

function doQuery(query, params = []) {
    return new Promise(function(resolve, reject) {
        db.query(query, params, function (err, rows, fields) {
            if (err) {
                reject(err);
            } else {
                resolve(rows);
            }
        });
    });
}

With that change in place, your other code should work - although you'll probably want to catch any errors thrown when you load the actions for an individual post, rather than throwing all of the posts away.

If your database supports it, you may also want to load the post actions in parallel, rather than serially:

JavaScript

async function loadPostActions(post, userid) {
    try {
        post.actions = await doQuery("SELECT * FROM posts_actions WHERE post_id = ? AND user_id = ? LIMIT 1", [post.id, userid]);
    } catch (error) {
        post.actionsError = error;
    }
}

async function getAllPosts(userid)
{
    try {
        const posts = await doQuery("SELECT * FROM posts ORDER BY id DESC");
        
        const actionPromises = [];
        for (let p = 0; p < posts.length; p++) {
            actionPromises.push(loadPostActions(posts[p], userid));
        }
        
        await Promise.all(actionPromises);
        return posts;
    } catch (error) {
        return error;
    }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Use async function to retrieve data while looping through from another function to insert objects

Member 1589206712-Jan-23 1:38

Member 15892067

12-Jan-23 1:38

Thank you very very much! That works perfectly!
But apparently, on postman the data I receive is good, but on frontend the action object inside data is empty and it shouldn't be.

This is what I get with postman:

{
    "data": [
        {
            "id": 2,
            "user_id": 1,
            "text": "d2222222",
            "posted_at": "1/12/2023 1:52:27 PM",
            "likes": 1,
            "comments": 0,
            "picture": "",
            "userid": 1,
            "name": "Gilbert",
            "actions": [
                {
                    "id": 1,
                    "tweet_id": 2,
                    "user_id": 1,
                    "liked": 1,
                    "retweeted": 0,
                    "replied_count": 0
                }
            ]
        }
    ]
}

And on frontend (Reactjs):

{
    "data": [
        {
            "id": 2,
            "user_id": 1,
            "text": "d2222222",
            "posted_at": "1/12/2023 1:52:27 PM",
            "likes": 1,
            "comments": 0,
            "picture": "",
            "userid": 1,
            "name": "Gilbert",
            "actions": []
        }
    ]
}

useEffect(() => {
        loadAllPosts();
    }, [])

    function loadAllPosts() {
        Axios.post('/api/loadposts', {
            userID: loginData.id
        }).then((response) => {
            console.log(response.data.data)
            setPosts(response.data.data);
        }).catch((error) => {
            console.log("Something went wrong.. We are investigating.");
        })
    }

modified 12-Jan-23 8:36am.

Re: Use async function to retrieve data while looping through from another function to insert objects

Richard Deeming12-Jan-23 2:31

Richard Deeming

12-Jan-23 2:31

That's odd; if it works for one, it should work for the other.

You could try loading the actions serially, in case Node has a problem with Promise.all:

JavaScript

async function getAllPosts(userid)
{
    try {
        const posts = await doQuery("SELECT * FROM posts ORDER BY id DESC");
        
        /*
        const actionPromises = [];
        for (let p = 0; p < posts.length; p++) {
            actionPromises.push(loadPostActions(posts[p], userid));
        }
        
        await Promise.all(actionPromises);
        */
        
        for (let p = 0; p < posts.length; p++) {
            await loadPostActions(posts[p], userid);
        }
        
        return posts;
    } catch (error) {
        return error;
    }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Use async function to retrieve data while looping through from another function to insert objects

Member 1589206712-Jan-23 3:17

Member 15892067

12-Jan-23 3:17

I solved this. I needed to put an if statment on useEffect if the user is logged (because I couldn't get his userID in the beginning to send a post request).

useEffect(() => {
        if(loginStatus === true) {
            loadAllPosts();
        }
    }, [loginStatus])

Thank you very very much @RichardDeeming for helping me out!

Btw, loading parallel in my "context" lets says, is more efficient (memory, loading time, etc) instead of serially? Or is just because using serially will throw all posts if a promise is rejected (fail)?

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