Replace text in a function from click event


#1

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);
}
$(function () {
  $(document).on('click', '.destdeptsched', function () {
    setTimeout(function () {
      $(window).scrollTop(0);
      $('#actionTxt').text('baa baa black sheep');
      showModelActionCancel();
    }, 250);
  });
});

#2

What happens if you swap these around.


$('#actionTxt').text('baa baa black sheep');
showModelActionCancel();

e.g.

showModelActionCancel();
$('#actionTxt').text('baa baa black sheep');

#3

Hi Paul

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


#4

Show us the HTML that accompanies this.

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?


#5

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

I’ll let @m_hutley continue as he’s the expert :slight_smile:


#6

Pfft. Expert. Suuuure…

function showModelActionCancel() {

=>

function showModelActionCancel(actionTxt = ' has successfully been cancelled and no database actions were performed as per your request of the: ') {
       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>'

=>

       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">' + actionTxt + '</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>'

(Also this line is disasterifically long. Consider splitting it up by hitting enter before some of those +'s for readability.)

and then invoke the function as

showModelActionCancel('baa baa black sheep');

#7

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:

function showModelActionCancel (callback) {
  // ...
  setTimeout(function () {
    alerts.show({
      css: 'skin3div',
      icon: 'http://icons.iconarchive.com/icons/rockettheme/ecommerce/48/delivery-box-icon.png',
      title: 'ACTION SUCCESSFULLY CANCELLED',
      message: '<span id="actionTxt">...</span>'
    })

    callback()
  }, 500)
}

$(document).on('click', '.destdeptsched', function () {
  setTimeout(function () {
    $(window).scrollTop(0)
    
    showModelActionCancel(function () {
      $('#actionTxt').text('baa baa black sheep')
    })
  }, 250)
})

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.


#8

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.


#9

Yeah, true! :-)


#10

Thanks m_hutley. Works a treat. Thanks to all who contributed to this thread.