Why is loading inline JavaScript inside views with AJAX bad?

Question

We have a tabbed interface, inside one of these tabs is a privacy form. This privacy form, as well as using an external JavaScript file for the bulk of its work, also uses inline JavaScript as it currently relies on dynamic code (in the server side language).

formTabs wrapper (ajax tabs without callback functions)

...
<script type ="text/javascript">
    var messagingTabset = ProjectName.Tabset.init({
        'tabID': 'preferences-tabset',
        'ajaxUrl0': '<%=Url.Action("PreferencesMainForm", "Profile")%>',
        'ajaxUrl1': '<%=Url.Action("ProfileImageForm", "Profile")%>',
        'ajaxUrl2': '<%=Url.Action("InterestsForm", "Profile")%>',
        'ajaxUrl3': '<%=Url.Action("PrivacyForm", "Profile")%>',
        'ajaxUrl4': '<%=Url.Action("PasswordForm", "Profile")%>',
        'ajaxUrl5': '<%=Url.Action("CustomUrlForm", "Profile", new {userId = Model.UserId})%>',
        'defaultAjaxUrl': '<%=Url.Action(Model.PartialName, "Profile")%>'
    });
</script>
...

privacyForm view (more inline javascript with server-side code)

...
<script type = "text/javascript">
    var preferencesPrivacyForm = new ProjectName.AJAX.Form({
        "ajaxFormID": "preferences-privacy-form",
        "actionUrl": '<%= Url.Action("SavePrivacy","Profile") %>',
        "dataReturnType":"json"
    });
</script>
...

Back end developer: "The configuration JavaScript Code for this form should stay in privacyForm view"

Front end developer: "Hmm, I'm sure I"ve read that this is not the way to do this - unreliable, all the JavaScript should be inside the HTML page that contains the tabs wrapper, inside a callback function of that tabs load. You should really a) provide the logic for me get that dynamic data inside the tabs-wrapper or b) let me grab those dynamic variables via DOM traversal"

Back end developer: "Both of these methods are lots of work for no real pay off! The first example is bad because it means I'm going to have to change the way its built (and works fine). This is probably going to mean duplication. The second example is dodgy as the markup could change, so somebody working on the code might forget to edit the DOM traversal methods in the tabs-wrapper. It's another level of abstraction that we don't need. If you provide me with some evidence about why this is really really bad, than I'll check it out, but otherwise I can't justify putting the time in"

Front end developer: 'Well, I've already wasted a few days, fixing problems with AJAX loaded JavaScript by putting them in callbacks of their wrappers, but yeah now you think about it, a good reference on this kind of thing would be really nice, because you are right, at the moment, the application is running without any problems.'

This is one of many examples throughout a large application where we are loading inline JavaScript with Ajax.

Should I be convincing the back-end developer that we should be using callbacks, or am I missing something?

Answer 1

I would recommend reading Dale Carnegie's How to Win Friends and Influence People.

It seems developers constantly get into this situation, where they know what is the best thing to do, but they get no buy in from other developers or management.

This book is definitely worth reading; an absolute MUST read for this profession.

Answer 2

It isn't really "bad" as long as it serves a purpose (for example, it loads content from other websites like the WordPress dashboard), but making all the extra calls to the server is a waste of resources unless you absolutely have to do it.

Usually, the simplest answer is the most correct one. In this case, it means not adding all the extra overhead to avoid slightly recoding a back-end.