Show a div after filled all html elemtens with JavaScript

JavaScript
1

Hi,
I have a DIV that its contain a lot of HTML elements such as textbox, image ,…
I fetch data from data base by AJAX:

       $.ajax({
            url: 'includes/search.php',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response)
            {
            }

and in success function I write a lot of code for assign values to HTML elements that they fetch from database.
After all I let $(“#myDiv”).css(“display”,“block”) for show my div that contain HTML elements. but when internet speed is low, after show DIV users can see assigning values to HTML elements.
How I can show MyDIV after all values assign to HTML elements ?

Thanks a lot

2

but when internet speed is low

???

All assigns happen on your computer and any way users shouldn’t see anything, because before display your div all its contents must be ready.

3

I know dear. But sometimes specially when internet speed is low (for example user is downloading a huge file and work with web page) user can see when data are assigning to HTML elements and if user click on “save” button before finishing all assigns, then appear wrong and empty data on database.
How I can detect when all assigns are finished ?!

4

Hi @joeafshany, I don’t quite understand the problem… you say you set #myDiv to display: block after you fetched all the data and populated the HTML elements, so as @igor_g noted, the user should only see it when the content is actually ready.

Are you aware though that AJAX requests are asynchronous, i.e. the code execution doesn’t get paused until the response arrives? So this will show the div immediately without waiting for the response:

$.ajax({ 
  // ...
  success: function () { }
})

$('#myDiv').show()

The order of execution is not necessarily the same as the order of your code; you’d have to do this inside the success handler instead then:

$.ajax({
  // ...
  success: function (response) {
    // Populate fields, then
    $('#myDiv').show()
  }
)

Otherwise, could you post a more complete code example at which point exactly you’re assigning the values and displaying the container div?

5

Hi @m3g4p0p,
I do this work that you wrote :

$.ajax({ 
  // ...
  success: function () { }
})

$('#myDiv').show()

But when Internet speed is low, first #myDiv appear and then user see how values assigned to HTML items !

6

So did you try showing the div inside the success callback instead?

7

dear @m3g4p0p,

this is my code for fetch data from database with AJAX and assign them to HTML items :

    function SetCorpInfo(code, CodeState, CodeCenter, name)
    {
        show_window("Waiting"); // Show a DIV contain a loaing animation
        
        var search=true;
        var form_data = new FormData();
        form_data.append('code', code);
        form_data.append('search', search);
        form_data.append('what', "corp-info");
        $.ajax({
            url: 'includes/search.php',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response)
            {
                if ( response!=0 )
                {
                    var obj = JSON.parse(response);
                    document.getElementById("CorpCode").value=obj[0].code;
                    document.getElementById("shomare-sabt").value=obj[0].shomare_sabt;
					.
					.
					.
                }
                setTimeout(function()
                {
                    hide_window("Waiting"); // Hide loading DIV
                    show_window("PopupWindow4"); // Show DIV that contain HTML items filled by data (like obj[0].code , ...)
                }, 1500);
            }
         });
         
         
    }
8

Okay and after the

.
.
.

you show the div, not right when then request got sent.

BTW you don’t need to parse the response if you set dataType: 'json' in the $.ajax() options; this way you won’t get an error if jQuery already parsed the response according to its MIME type.

9

Thank you @m3g4p0p,

I didn’t get what I should to do! If you can please describe it and write it in right way for me.

thank you so much

10

You move the line that shows the div right after the code that your vertical ellipsis hints at.

11

your mean is :

    function SetCorpInfo(code, CodeState, CodeCenter, name)
    {
        show_window("Waiting"); // Show a DIV contain a loaing animation
        
        var search=true;
        var form_data = new FormData();
        form_data.append('code', code);
        form_data.append('search', search);
        form_data.append('what', "corp-info");
        $.ajax({
            url: 'includes/search.php',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response)
            {
                if ( response!=0 )
                {
                    var obj = JSON.parse(response);
                    document.getElementById("CorpCode").value=obj[0].code;
                    document.getElementById("shomare-sabt").value=obj[0].shomare_sabt;
					.
					.
					.
                }
            }
         });
         
                setTimeout(function()
                {
                    hide_window("Waiting"); // Hide loading DIV
                    show_window("PopupWindow4"); // Show DIV that contain HTML items filled by data (like obj[0].code , ...)
                }, 1500);
         
    }
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.