I am trying to replace text in a custom function but cannot get it to change. I have tried a multitude of selectors, but I think the problem is I am trying to change the text before the function is called. How do i call the function then replace the text?
The id# I am trying to change is ‘actionTxt’ in a span. I would be grateful if someone could point out my error. Many thanks.
function showModelActionCancel() {
var now = new Date();
var date = now.getDate() + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
setTimeout(function() {
alerts.show({
css: 'skin3div',
icon: 'http://icons.iconarchive.com/icons/rockettheme/ecommerce/48/delivery-box-icon.png',
title: 'ACTION SUCCESSFULLY CANCELLED',
message: '<div style="color: #000; font-weight: bold; font-family: jura, serif; font-size: 18px; margin-bottom: 18px;">' + username + '</div>' + '<div style="margin-top: -18px; font-size: 16px; font-family: jura, serif; color: red; font-weight: bold;">' + activity + ' Action Request' + '</div>' + '<br />' + '<div style="color: red; font-weight: bold; font-family: jura, serif; font-size: 14px; margin-top: -20px;">' + '</div>' + '<div class="hr.style-three">' + '<hr />' + '</div>' + '<div style="margin-top: 15px;">' + 'Action of ' + '<span style="color: red; font-weight: bold;">' + activity + '</span>' + '<span id="actionTxt">' + ' has successfully been cancelled and no database actions were performed as per your request of the: ' + '</span>' + '<span style="color: red; font-weight: bold; font-family: jura, serif; font-size: 14px;">' + date + '<span style="color: #000; font-weight: normal">' + '</span>' + '</span>' + '</div>' + '<p>Thank you for using Logistor</p>'
});
}, 500);
setTimeout(function () {
$(window).scrollTop(220);
}, 500);
}
Makes no difference. Am I actually calling the function correctly in order to change the text in the span? do I have to pass any parameters to function? Thanks
EDIT: Wait, you mean the span in the message of the other function? What is alerts? Why would you not just pass the message into your showModelActionCancel function and use it?
You should probably be using a callback to call the text change function to ensure the previous function has completed. However as @m_hutley said above you could simply change it directly in the alert code
Indeed – the reason why it doesn’t work is that the alert has a delay of 500ms, so the #actionTxt element doesn’t exist yet when you try to set its text content. Passing the text as an argument as @m_hutley suggests, would be a good solution to this; FWIW, using a callback would be too though:
Which one to use depends on the amount of flexibility you need; with a callback you can execute arbitrary code after the alert got shown, but I guess for most use cases passing the text directly would be sufficient… and more economical as it doesn’t require any additional DOM queries.
I don’t know that the phrase “arbitrary code” conveys the idea particularly well - after all the code wouldn’t be ‘arbitrary’ in the common sense, it’s just called that because ‘it could be anything’. Callbacks are especially good when you want to react to what happened inside the function - for example, if the function was getting data from a remote source, and you don’t actually know ahead of time what’s going to come back.
