We Keep Coding

How do I prevent execution of injected JavaScript after its initial execution?

I am trying to add javascript to my page after ajax call as I have newly created elements from the ajax response and I want them to listen to the javascript. Eveything works okay.
However,for some reason, I want to block that JavaScript functionality at some later point in time.
I have tried removing the script tag from the html using Javascript but it's not being effective. I have even tried using libraries such as
YETT but still i am not able to block the script I intend to block.
Javascript code
<script>
$(document).ready(()=>{
//when the page first loads I append the script (NOTE:I have this inside an ajax call as I am
appending html elements from the ajax call response
const scriptsrc = document.createElement('script')
scriptsrc.setAttribute('type','text/javascript')
scriptsrc.setAttribute('src','./assests/scripts/script.js_r='+Math.random()+Math.pow(10,10).toString(2))
scriptsrc.setAttribute('data-name','myscript')
$('head').append(scriptsrc)
//i do some other stuff here
//I want to block the script that i previously added (./assests/scripts/script.js) below here
})
</script>

How to Make Jquery .load() function work once and Ajax request once?

When the page is loaded contents from the PHP file has to load, for that i am using JQuery .load() function, content is successfully loading but it keep loading, i can see it from chrome Developer tools. I have to load content only once.
var userName =$('#dT').data('uname');
$('#dT').load('load_table.php', {userName:userName});
So i tried another Jquery ajax method that also same as loads the contents continuously..
$(document).ready(function(){
function loadTable(){
var userName =$('#dT').data('uname');
$.ajax({
url:'load_table.php',
data:{'userName':userName},
success: function(results){
$('#dT').html(results);
setTimeout(loadTable,5000);
}
});
}
loadTable();
});
Above setTimeout function not working, any way to load content from PHP file only once?

I think in your first load attempt you are loading the html with the exact same code, so it will keep on loading itself infinity.
Doing it with ajax is much better, however if I were you I would move the settimeout outside the function itself. Currently it will only trigger if the initial call was successful, you want it to run every 5 seconds I am guessing. So where you call it the first time at the bottom, instead of just
loadTable();
You have:
setTimeout(loadTable,5000);
Now you do not need to do the settimeout in the success function.

jquery toggleClass not working on img element

I have two buttons ("Approve","Unapprove") and an image of a loading spinner. By default the Approve button is showing and the Unapprove button and loading spinner image are hidden.
When the "Approve" button is clicked I want it to disappear, show the loading spinner, and then perform an ajax request. On completion of the request, I want the loading spinner image to get hidden again. If the ajax request was successful, I want the "Unapprove" button to show. If the ajax request failed, I want the "Approve" button to show again.
The problem I have is that upon completion of the ajax request, my .always() method runs but the spinner image does not get hidden. Here is an example:
https://jsfiddle.net/ebme6fjs/7/
If I change the url of my ajax request to give me a 404 not found error, this process works like it's supposed to:
https://jsfiddle.net/ebme6fjs/8/
Does anyone know why in my first case the spinner.toggleClass("hide"); command isn't running in the always() function? Thanks.
UPDATE:
One interesting thing I found is that if I redefine my spinner variable in the .always() function, it works correctly on a succesful ajax request:
https://jsfiddle.net/ebme6fjs/9/
If you modify the ajax url to receive a 404 though, the same problem of the spinner not disappearing happens again.

In a context where you always want to add the class, use addClass, not toggleClass. In your code, the class is toggled twice: Once in "always" and then again in "fail". So it ends up in the same state as before.
The reason you are targeting the image twice, is because you are defining otherButton like this:
var otherButton = currentButton.siblings();
When what you want to do is this:
var otherButton = currentButton.siblings('button');
toggleClass is most useful when you might want to add or remove the class depending on some condition.

In your code, you were toggling hide class on image twice, in always() callback and done()/fail() ones.
This is because you were targeting image in both variables, spinner & otherbutton.
You should define otherbutton as following:
var otherButton = currentButton.siblings("button");
Not including image in matched set.
As a side note, for code readability, you should use addClass()/removeClass() instead as noted in KWeiss answer and btw, set all your logic for displaying/undisplaying elements only in always() callback.

jquery dialog loader

Let's say i've a div with several html info and structures and when i convert it to a dialog with jquery $("#infodata).dialog(...); it takes several seconds to be showed.
So, it's there a way or method that can be implemented to know when jquery finished rendering the dialog?
P.D : there's no ajax request, the html is still there but with display:none.
Thanks.

You could chain triggering an event on to the end of it, then you get
$("#infodata).dialog(...).closest('body').trigger('dialogueLoaded');
$('body').on('dialogueLoaded', function() { doOtherStuff() });

Resizing A Div/Class With New AJAX Appended Content Height, When Height Of Page Already Set OnLoad

I've spent nearly 24 hours on this issue, so I'm hoping I can rely on someone that has a better handle of javascript and jquery to help.
The situation is this. I have a slideshow-type setup (coda slider 2 by Niall Doherty) that essentially auto-adjusts the height of each panel/page based on the content that is on the page. That works great, except for when I have dynamic data coming in, in this specific case, I am appending a div via jquery POST Ajax so comments can appear without a reload needed. The problem I'm running into is that since the height is already pre-set onload, the new content doesn't appear, or rather appears below the visible content (overflow is hidden), so I need to resize the main div/class to take into account the new info - and all on the press of the "new comment" button.
I think I came up with a solution where I use the jquery height function to measure the height of the container div I am using for the slide and then adjust the height of that div accordingly, but I believe the js is executing as the button is pused, and thus when the new comment is finally appended via the ajax call, it used the old height and not the new height.
Any help would be appreciated in either getting my rough hack to work, or if you have better ideas on how to handle this more gracefully.
THANKS!!!!

I'm shooting blind without some code, but my guess would be that you'll want to execute the solution you came up with after the ajax call completes. So,
$.post("action", {
data
}, function () {
// DO THE CALCULATION HERE
});
That will execute after the AJAX call has completed.

One simple way of doing this would be to call the height adjustment function from a script tag inside loaded html. If the content loaded via ajax is also in your control, that is.

Without seeing the relevant bits of your JavaScript, it's difficult to know what you are aiming to do. However, you can execute a function once the AJAX call has completed successfully by using the "success:" option on the $.ajax() function call. e.g.
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
This callback function is where you should put your resize code.
Sorry, just noticed you were using $.post(). That too has a callback function where you should put your resize code.