The CSS effect fails to take effect following an AJAX response

Question

The CSS effect fails to take effect following an AJAX response

After a successful ajax response, I am attempting to apply a jQuery .css effect. However, it seems that this process is not working as expected because I am trying to retrieve the height of a newly created element and then applying it to another newly created element. My goal is to move the .opts div to the bottom based on the dynamic height of the .col-4 div.

You can view the code pen here: https://codepen.io/Pancuatico/pen/abpOeZy

Upon opening the code pen, you can execute this code in the console:

$(".opts").css("margin-top",$(".col-4").height());

and observe that it works perfectly. But how can I make this work following a successful ajax response?

Edit

Below is my JavaScript code where I might have made a mistake:

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("anurl.php", function(data){

        //Some data processing occurs here
        //...

        var out = "<div class='col-4'><img src='imgpathalt' alt='imgpath'></div>";
        out += "<div class='col-2'>";
            out += "<img src='imgpath2' alt='imgpath2alt'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);
        var col4Height = $(".col-4").height();
        $(".opts").css("margin-top",col4Height); //this does not work
    });
}

jquery css

Answer 1

Answer №1

The issue here is that when you add the margin-top to those elements, the images are still loading. This means that at that moment, the height of .col-4 is only as big as the buttons. You need to wait for the images to finish loading before updating the margin to match the height of .col-4.

A more effective approach would be to generate the elements dynamically instead of including them in a string of HTML. By doing this, you can attach a load event to the image like so-

myImage.load(imgLoaded);

Then, update the margin once the image has loaded using this function-

function imgLoaded() {
$(".opts").css("margin-top", $(".col-4").height();); 
}

Of course, another way to achieve the desired result in your code is by using the html onload attribute.

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",function(data){

        //...
        //Do something with the data here
        //This URL is just for testing purposes
        //...

        var out = "<div class='col-4'><img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa' onload='imgLoaded()'></div>";
        out += "<div class='col-2'>";
            out += "<img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);

    });
}

function imgLoaded() {
    $(".opts").css("margin-top", $(".col-4").height();); 
}

Answer 2

The issue here is that when you add the margin-top to those elements, the images are still loading. This means that at that moment, the height of .col-4 is only as big as the buttons. You need to wait for the images to finish loading before updating the margin to match the height of .col-4.

A more effective approach would be to generate the elements dynamically instead of including them in a string of HTML. By doing this, you can attach a load event to the image like so-

myImage.load(imgLoaded);

Then, update the margin once the image has loaded using this function-

function imgLoaded() {
$(".opts").css("margin-top", $(".col-4").height();); 
}

Of course, another way to achieve the desired result in your code is by using the html onload attribute.

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",function(data){

        //...
        //Do something with the data here
        //This URL is just for testing purposes
        //...

        var out = "<div class='col-4'><img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa' onload='imgLoaded()'></div>";
        out += "<div class='col-2'>";
            out += "<img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);

    });
}

function imgLoaded() {
    $(".opts").css("margin-top", $(".col-4").height();); 
}

Answer 3

Answer №2

Everything is functioning properly.

Check out the code snippet here

I have made some adjustments to the CSS parameters and they are now visible.


        var col4Height = $(".col-4").height();
        $(".opts").css("padding",'10px');  

        $(".opts").css("background",'green');  
        $(".opts"").css("top",col4Height);

Also remember to use

$(".opts").css("top",col4Height);

as it needs to be positioned absolutely

I would approach it differently though.

$(document).ready(function(){
    doWork();
});

async function loadImages(){}

async function doWork(){
    await loadImages();

    //perform additional tasks after images are loaded such as
    var col4Height = $(".col-4").height();
    $(".opts").css("padding",'10px');  

}

CHECK THIS

$(document).ready(async function() {
  await loadImgs();
 // Assume no images are loaded at the beginning.
  var imagesLoaded = 0
  // Count total number of images on the page once it has loaded.
  var totalImages = $("img").length

  // Increment count every time an image is loaded, when count equals total number of images,
  // call the allImagesLoaded() function.
  $("img").on("load", function (event) {
    imagesLoaded++
    if (imagesLoaded == totalImages) {
      allImagesLoaded()
    }
  })

  function allImagesLoaded() {
    console.log("ALL IMAGES LOADED");
     change();
  }
  });

async function change(){
 
    if($(".col-4").height() != 0) {
   var col4Height = $(".col-4").height();
      console.log(col4Height);
        $(".opts").css("padding",'10px'); //this does not work
   
        $(".opts").css("background",'green'); //this does not work
        $(".opts").css("margin-top",col4Height); //this does not work
    }
};
async function loadImgs(){
   await $.post("https://jsonplaceholder.typicode.com/posts",function(data){
        console.log(data);
        //...
        //Some process with the data here
        //Using that url for testing purposes
        //...
...

     
 
    });      
  var col4Height = $(".col-4").height();
  console.log(col4Height);

}

Answer 4

Everything is functioning properly.

Check out the code snippet here

I have made some adjustments to the CSS parameters and they are now visible.


        var col4Height = $(".col-4").height();
        $(".opts").css("padding",'10px');  

        $(".opts").css("background",'green');  
        $(".opts"").css("top",col4Height);

Also remember to use

$(".opts").css("top",col4Height);

as it needs to be positioned absolutely

I would approach it differently though.

$(document).ready(function(){
    doWork();
});

async function loadImages(){}

async function doWork(){
    await loadImages();

    //perform additional tasks after images are loaded such as
    var col4Height = $(".col-4").height();
    $(".opts").css("padding",'10px');  

}

CHECK THIS

$(document).ready(async function() {
  await loadImgs();
 // Assume no images are loaded at the beginning.
  var imagesLoaded = 0
  // Count total number of images on the page once it has loaded.
  var totalImages = $("img").length

  // Increment count every time an image is loaded, when count equals total number of images,
  // call the allImagesLoaded() function.
  $("img").on("load", function (event) {
    imagesLoaded++
    if (imagesLoaded == totalImages) {
      allImagesLoaded()
    }
  })

  function allImagesLoaded() {
    console.log("ALL IMAGES LOADED");
     change();
  }
  });

async function change(){
 
    if($(".col-4").height() != 0) {
   var col4Height = $(".col-4").height();
      console.log(col4Height);
        $(".opts").css("padding",'10px'); //this does not work
   
        $(".opts").css("background",'green'); //this does not work
        $(".opts").css("margin-top",col4Height); //this does not work
    }
};
async function loadImgs(){
   await $.post("https://jsonplaceholder.typicode.com/posts",function(data){
        console.log(data);
        //...
        //Some process with the data here
        //Using that url for testing purposes
        //...
...

     
 
    });      
  var col4Height = $(".col-4").height();
  console.log(col4Height);

}

The CSS effect fails to take effect following an AJAX response

Answer №1

Answer №2

Similar questions

Combining Bootstrap navbar with React Router for seamless navigation

Connecting to a database using Vugen's Ajax TruClient feature

Click event in jQuery to change the background color of <td> element

jQuery functions are malfunctioning on Firefox, yet they are functioning properly on Chrome

Is there a way to choose only the rows that are both even and not currently hidden?

Arranging two tables, one slightly misplaced from the other

The jQuery button function is not compatible with Google Graph

Ways to increase the number of rows on datatables while utilizing ajax integration

Replace the content within the iFrame completely

jQuery UI Drag and Drop problem with mouse positioning

Achieving Bottom or Center Alignment for a Div within Another Div Using Bootstrap 5

jQuery cycle2 experiencing transition issues with anchor slides

The counter is only incremented once even with multiple clicks

What strategies can I use to ensure that the navigation bar is responsive when viewed on a

What is causing the Bootstrap accordion to not display content when clicked on?

Incorporating fresh CSS styles through Selenium

Ways to center the percentage on the progress bar

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

Is it possible to keep the vertical scrollbar always visible in jqGrid?

The ajax success response transforms when using @html.raw