CSS :contains selector after adding a script through Ajax append operation

Question

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in

$('td:contains("text")').css('color','red')

after an Ajax load script?

Here is the main code snippet

<div id="datatable"></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script id="body">$(document).ready(function(){$.ajax({url:"script.js",type:"POST",cache:!1,success:function(c){c&&$("#body").append(c)}})});$('td:contains("text")').css('color','red');alert("script")</script>

Code for script.js

var datatable = document.getElementById("datatable");
var table = "<table><tr><td id='tdone'>Text</td></tr>" + 
      "<tr><td id='tdtwo'>Two</td></tr></table>";
datatable.appendChild(table);

alert("code");

I'm facing an issue with the order of alerts, where the Script alert pops up before the code alert.

Are there any methods or techniques to wait until the Ajax call finishes and the table is appended to the document before firing the script?

I have tried using Success, Complete, Find, and AjaxStop methods but none of them seem to work.

javascript jquery css

Answer 1

Answer №1

To properly apply this CSS

$("td:contains("text")").css('color','red')

, it needs to be included within the success callback function of an AJAX call instead of executing it outside. For example:

success:function(response){
    $("#content").append(response);
    $("td:contains("text")").css('color','red')
}

Answer 2

To properly apply this CSS

$("td:contains("text")").css('color','red')

, it needs to be included within the success callback function of an AJAX call instead of executing it outside. For example:

success:function(response){
    $("#content").append(response);
    $("td:contains("text")").css('color','red')
}

Answer 3

Answer №2

To execute code after an Ajax request is completed, simply utilize the success block within the Ajax function.

$(document).ready(function(){
  $.ajax({
    url:"script.js",
    type:"POST",
    cache:false,
    success:function(response){
        response&&$("#content").append(response);
        $("td:contains(\"text\")").css('color','blue');
        alert("script executed successfully");
        //Code placed here will be executed after completion of Ajax
    }
  });
  //This section runs before Ajax completion
});

It's important to escape inner double quotes in your code to avoid conflicts with nested quotes of the same type.

Answer 4

To execute code after an Ajax request is completed, simply utilize the success block within the Ajax function.

$(document).ready(function(){
  $.ajax({
    url:"script.js",
    type:"POST",
    cache:false,
    success:function(response){
        response&&$("#content").append(response);
        $("td:contains(\"text\")").css('color','blue');
        alert("script executed successfully");
        //Code placed here will be executed after completion of Ajax
    }
  });
  //This section runs before Ajax completion
});

It's important to escape inner double quotes in your code to avoid conflicts with nested quotes of the same type.

Answer 5

Answer №3

If you're looking to customize the color of a specific td, here's how you can do it:

$.ajax({
    url:"URL ",
    type:"POST",
    success:function(Response){
        $("tr > nth-child(1)").css("color","red");
        //Any additional code here will execute after the Ajax request is completed
    }
  });

If you prefer to assign colors by row, simply give an ID to the row and pass it to the function:

To change the color of a specific td:

$.ajax({
    url:"URL",
    type:"POST",
    success:function(Response){
        $("#id td : nth-child(1)").css("color","red");
        //Any additional code here will run after the Ajax request finishes
    }
  });

This approach should help resolve your issue.

Answer 6

If you're looking to customize the color of a specific td, here's how you can do it:

$.ajax({
    url:"URL ",
    type:"POST",
    success:function(Response){
        $("tr > nth-child(1)").css("color","red");
        //Any additional code here will execute after the Ajax request is completed
    }
  });

If you prefer to assign colors by row, simply give an ID to the row and pass it to the function:

To change the color of a specific td:

$.ajax({
    url:"URL",
    type:"POST",
    success:function(Response){
        $("#id td : nth-child(1)").css("color","red");
        //Any additional code here will run after the Ajax request finishes
    }
  });

This approach should help resolve your issue.

Answer 7

Answer №4

<div id="datatable"></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="your-custom-path/script.js"></script>
<script id="body">
$(document).ajaxStop({
   $('td:contains("text")').css('color','red');alert("script");
});
</script>

Explore more at : https://api.jquery.com/ajaxStop/

Answer 8

<div id="datatable"></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="your-custom-path/script.js"></script>
<script id="body">
$(document).ajaxStop({
   $('td:contains("text")').css('color','red');alert("script");
});
</script>

Explore more at : https://api.jquery.com/ajaxStop/

CSS :contains selector after adding a script through Ajax append operation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Resizing a floated div causes the image to break out

Dynamic image uploading with Ajax

Using recursive setTimeout in Javascript may not always utilize the entire final JSON object that is returned

Modify the tooltip of the selected item in an ng-repeat loop in AngularJS

Having trouble with the preview feature when resizing images

Is there a way to set a personalized callback function when closing a modal with MicroModal?

What's the best way to add line numbers to source code on an HTML webpage after parsing?

Prestashop 1.7 - Enhanced top menu navigation with drop-down subcategories

There seems to be an issue: [ng:areq] - Please visit the following link for more information: http://errors.angularjs.org/1

Having trouble with the Material-UI v1 Drawer component on the iOS 13 beta version

Dynamic Dropdown Menu with AJAX, PHP, and jQuery

Is there an advantage to pre-compiling jade templates for production in an express environment?

Elements not following percentage in top positioning

What could be causing the poor performance of WebGPU in my benchmark when compared to WebGL?

Having trouble determining the dimensions of a newly added element

What is the best way to send JSON data from Express to a JavaScript/jQuery script within a Pug template?

Getting node.js code to function in a web browser

Upon loading, make sure to click on the link located within the third <li> tag

Tips for effectively handling unique properties of a React component (such as Redux integration and custom CSS) when sharing through NPM distribution

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window