Question

I’m working on adding page title notifications for an install of AJAXchat. I’m using a jQuery plugin called jquery-titlealerts to achieve this. If I assign the method on the onclick event it works as correctly and changes the page title. But that doesn’t work as I need. I need it to change the page title each time a new div is created. Here is the js that dynamically creates a new div every time someone submits a message:

return '<div id="'
+ this.getMessageDocumentID(messageID)
+ '" class="'
+ rowClass
+ '">'
+ this.getDeletionLink(messageID, userID, userRole, channelID)
+ dateTime
+ '<span class="'
+ userClass
+ '"'
+ this.getChatListUserNameTitle(userID, userName, userRole, ip)
+ ' dir="'
+ this.baseDirection
+ '" onclick="$.titleAlert(\'Error!\');">'
+ userName
+ '</span>'
+ colon
+ this.replaceText(messageText)
+ '</div><script>$.titleAlert(\'Error!\');</script>';
return

As you can see I’ve tried creating a <script> block to load just below the div – and it does but for some reason isn’t changing the document title. If you click on a message generated in the chat it will work though because it is being fired from the onclick event..
I’m not sure what else to try to get it to work when each div is loaded.

Answer 1

In the place where you’re calling the function that has this return statement, after you call that function you should update the page title. If you don’t want to do it that way, you can have the function that returns your new Div content update the page title right before it returns.

Alternatively, consider using jQuery’s $.ajax() method with a complete (or success) callback to do the title modification. Honestly, this would be my preferred approach if I were to be given this problem to solve.

You can read all about $.ajax() here.