skip to Main Content

I am again having problem with JavaScript, which I think is related to it being loaded before a related element is added to the page. Previously (my original question is here), it was solved by appending the problematic (formatting) JavaScript code to the end of another JavaScript code that caused the element to be added to the page. So when the element was added the JavaScript formatting was applied.

The thing is that it was just a few lines of formatting code, hence easy to add; however, now, the code is a part of bootstrap.js library, so it is not possible to copy the whole code to the page. And, besides, I suspect this is not a good practice.

My goal is to format a tooltip the same way all other tooltips are formatted on the page. If it is a static element, loaded with the whole page the tooltip is displayed like this:

Tooltip displayed with the desired formatting

This is achieved by adding the below attributes to the icon (<i>) tag.

data-toggle='tooltip' 
data-html='true'
title='' 
data-original-title='<b>Magento ID:</b> 0123456'

I might be wrong, but assume this is formatted by bootstrap.js compiled by the supplier of the theme I am using.

The problem occurs when the same icon (with the same attributes) is generated dynamically by C# Model and added to the page as a part of larger element (<table id='tbl_Customers'>) by JavaScript code displayed below:

    // Search function
    function Search_Customer() {
        // Take values from form fields
        p_ref_number = $('#txt_RefNumber').val();
        p_email = $('#txt_Email').val();
        p_fname = $('#txt_FirstName').val();
        p_lname = $('#txt_LastName').val();
        p_add1 = $('#txt_Address').val();
        p_pcode = $('#txt_Postcode').val();
        p_sch = $('#txt_SchoolCode').val();

        // Display alert if all form fields are empty
        if (isEmpty(p_fname) && isEmpty(p_lname) && isEmpty(p_email) && isEmpty(p_sch) && isEmpty(p_pcode) && isEmpty(p_add1) && isEmpty(p_dat) && isEmpty(p_ref_number)) {
            showAlert('Please add search criteria first');
        }
        else {
            p_Data = passSearchValuesToController();

            // Run search function in Controller
            p_URL = '@Url.Action("Get_Contact_Search_Result")';

            // Display the card with search results
            $.post(p_URL, p_Data, function (data_con) {
                $('#displayCustomerResults').html('');
                $('#displayCustomerResults').append(data_con.display);

                // Formats table
                $('#displayCustomerResults').find('#tbl_Customers').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [[6, 12, 24, -1],[6, 12, 24, "All"]],
                    responsive: true,
                    language: { search: "_INPUT_", searchPlaceholder: "Search records",}
                });
            });
        };
    };

If a value of <b>Magento ID:</b> 0123456 is assigned to a data-original-title attribute, like so: data-original-title='<b>Magento ID:</b> 0123456', then the tooltip is not displayed at all.

If it is assigned to a title attribute like so: title='<b>Magento ID:</b> 0123456', then it is displayed with a default formatting, but I actually cannot even take a screenshot of this to show you.

Again, I might be wrong, but assume, that this is caused by the fact that bootstrap.js is loaded before the icon is added to the page.

So my question is how to load the tooltip formatting JavaScript after the <table id='tbl_Customers'> is dynamically generated and added to the page by the above script. Options that are currently visible to me are:

  1. Load the whole bootstrap.js again, after the table is added to the page – I think that things like this should not be done, but if I’m wrong, then please let me know how to do this and when

  2. Load just a part of bootstrap.js that is responsible for formatting the tooltip – this seems impossible for me when thinking of browsing all the bootstrap.js code in attempt to find all the relevant parts

Neither of the options seems right, but I am sure the answer for my question is somewhere there already. Surely, I am not the only person who wants to format elements after they have been dynamically generated.

My problem is that I have started my journey with JavaScript … and with C# … about two weeks ago, when I took this project, so I am totally new to this and I’m not even sure how to ask the question correctly.

Any help is hugely appreciated, and if I am wrong in any of my assumptions, please let me know and point me in the right direction.

Thanks a lot in advance.

2

Answers


  1. Chosen as BEST ANSWER

    Firstly, kudos to @Christian for being of a great help.

    Although, @Christian 's answer did not work, it made me thinking that he calls the tooltip() function, that is most likely a part of one of the libraries that have already been loaded.

    So, instead of appending .find("[data-toggle='tooltip']").tooltip() to the end of the table formatting code, I have called tooltip() function in a separate statement, so the cone now looks like so:

        $('#displayCustomerResults').find('#tbl_Customers').DataTable({
            "pagingType": "full_numbers",
            "lengthMenu": [[6, 12, 24, -1],[6, 12, 24, "All"]],
            responsive: true,
            language: { search: "_INPUT_", searchPlaceholder: "Search records",}
        });
    
        // following @Mohamed's advice I changed the original code to this
        $('#tbl_Customers').find('[data-toggle="tooltip"]').tooltip();
    

    It now works like a charm.


  2. It might work by adding the tooltip() function to the end like so

    
    /* ... */
    
                    $('#displayCustomerResults').find('#tbl_Customers').DataTable({
                        "pagingType": "full_numbers",
                        "lengthMenu": [[6, 12, 24, -1],[6, 12, 24, "All"]],
                        responsive: true,
                        language: { search: "_INPUT_", searchPlaceholder: "Search records",}
                    }).find("[data-toggle='tooltip']").tooltip();
    
    /* ... */
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search