Function not executing nested with jquery events functions

JavaScript
5

It may just be that this line is the problem:

jina: sw_announcement_nameValue,

You have no variable named `sw_announcement_nameValue, so it may be dying on you. I’d suggest opening the console (on most browsers, the F12 key, or ‘Developer tools’). There may be errors showing up there.

Now, purely from a “I really like to avoid confusion” perspective, I would like to offer a suggestion. Some of your variable names and some of your HTML ids are very confusing. There are three different conventions we often use, and you’re using all three:

  • camel case: When the variable or id name is multi-word, the second and all subsequent words are capitalised: announcementNameValue or announcementPriorityValue for example.
  • underscore: Another option in both variables and ids, we can use underscores between words: #sw_announcement_title or announcement_description_value.
  • hyphen: Only within HTML ids, we can hyphenate: #announcement-reference

You not only mix the three throughout, but within a single variable name! You’ve got names like announcement_descriptionValue or sw_announcement_descirptionyValue with underscores and caps randomly. Not only confusing for others, but easy to lose track of yourself.

Personally, I might suggest you create an announcement Object, containing all the jQuery-wrapped DOM nodes:

  var announcement = {
    reference: $("#announcement-reference"),
    title: $("#announcement_title"),
    category: $("#announcement_category"),
    visibility: $("#announcementVisibility"),
    description: $("#announcement-description"),
    swDescription: $("#sw_announcement_description"),
    priority: $("#announcementPriority"),
    submit: $("#submitAnnouncement"),
    
  }

Doing this, I can access any property I want, simply get announcement.name.val() and there it is. So, to create your JSON-able object, you could create a function like this:

var createAnnouncementObj = function(){
  // there's very little processing, but if we did need to do any 
  //   lookups or math conversions, do so before we create the
  //   returned object.
  return {
    name: announcementObj.name.val(),
    jina: announcementObj.name.val(),
    category: announcementObj.category.val(),
    kipengele: announcementObj.category.val(),
    description: announcementObj.description.val(),
    sw_description: announcementObj.swDescription.val(),
    reference: announcementObj.reference.val()
  }
}

…creating a unified and clean way to create that object:

announce.submit.on("click" function() {
  // First, we want to create that announcement object
  var announcements = createAnnouncementObj();
  // and convert it into a string to be sent as a POST body
  var announcementObjectString  = JSON.stringify(announcements);

  // At this point, we have an announcement object converted to a string.
  //  we can save this to localStorage, or we can send it to the back end.
  console.info("My announcement: ",announcementObjectString);
}

Again, not rules – more guidelines.

1 Like