0

I am using a Modal Bootstrap Class to have a user fill out some forms and then have a "complete" button at the end to submit the answers to the forms:

<button type="submit" id="submitCallScriptBtn" onclick="submitInitialCallScript(this);" 
      data-ptKey="@Model.Patient.PtKey" data-assignedTaskKey="@Model.Tasks[0].TassKey" 
      class="btn btn-primary">Complete Initial Call</button>

So, when a user clicks the submit button, I want to call a JavaScript function from a separate JavaScript File called 'PatientSearch.js':

function submitInitialCallScript(elem) {
    console.log("This Method is running");
    var e = document.getElementById("communication");
    var eResponse = e.options[e.selectedIndex].text;

    var ptKey = $(elem).data('ptKey');
    var assignedTasakKey = $(elem).data('assignedTaskKey');


    $.ajax({
        type: 'GET',
        dataType: 'text',
        url: '~/PatientController/SubmitInitialCallScript',
        data: {
            ptKey: ptKey,
            tass_Key: assignedTaskKey,
            question1: $("input[name=goodtime]:checked").val(),
            question2: $("input[name=startedDevice]:checked").val(),
            question3: $("input[name=driver]:checked").val(),
            question3a: $("input[name=comfort]:checked").val(),
            question4: $("#concerns").val(),
            question5: $("input[name=occupation]:checked").val(),
            question6: $("input[name=appointmentscheduled]:checked").val(),
            question6a: $("#doctor").val(),
            question6b: $("#appointDate").val(),
            question7: $("input[name=selfTracking]:checked").val(),
            question8: $("input[name=understand]:checked").val(),
            question9: eResponse,
            question10: $("#otherQuestions").val()

        }, success(data) {
            if (data == "true")
                window.location.assign("~/Controllers/Patient/Index");
            else
                alert("Error Submitting");

        }, failure(data) {
            alert("Error Submitting")
        }
    })

However, I can not get my JavaScript Method to run. When I click my button, nothing happens..even though the files are linked up correctly:

JavaScript being called from the correct Folder

Is there something wrong I am doing? Is there a different way to call JavaScript Method and I am doing it incorrectly?

EDIT:

Here are some screenshots of the Web ToolKit Errors:

There is no link to the file when the project is running

Here you see PatientSearch.js not even in the file structure even though it is the same you see in Visual Studio.

Here you see the Javascript File not even in the file structure of the project

Rinktacular
  • 1,041
  • 2
  • 19
  • 42
  • 1
    is it showing in developer tools sources tab? – Ja9ad335h Feb 13 '17 at 15:36
  • @JAG If you mean, does the script tag show up in Dev Tools, yes it does. – Rinktacular Feb 13 '17 at 15:40
  • Do you see any error in Dev tools Console when you click on the button? – Chetan Ranpariya Feb 13 '17 at 15:43
  • 1
    not just the script tag, check the actual file is loaded or not from Sources tab or Network tab – Ja9ad335h Feb 13 '17 at 15:45
  • Is your button inside a `
    `?
     – Matt Spinks Feb 13 '17 at 15:46
  • @JAG Actually no.. Which is surprising. Any idea why it would not be there? – Rinktacular Feb 13 '17 at 15:47
  • @MattSpinks Nope, button is just within a bunch of
    tags.
     – Rinktacular Feb 13 '17 at 15:50
  • 1
    looks like `Sitewide.js` loading fine, so use the same method to load `PatientSearch.js`. it may be issue with relative path `src="~/..` – Ja9ad335h Feb 13 '17 at 15:53
  • @JAG Yeah, I am using MVC, and including the Javascript in the of my "_Layout.cshtml" solved the issue... – Rinktacular Feb 13 '17 at 15:56
  • 1
    There's nothing obviously wrong, but a few bad practices. 1). The `@model` declaration should be the first line. 2) You should avoid hardcoded app-relative URLs, i.e. `~/`. Instead, use something like `Url.Content("~/JavaScript/PatientSearch.js")`, which will ensure that the URL is truly evaluated. App-relative URLs are actually not supported by browsers. Razor *should* catch the hardcoded app-relative URL and change it for you, but that's not guaranteed. – Chris Pratt Feb 13 '17 at 16:05
  • @ChrisPratt You know, I think this is exactly the issue I am having right now. Let me verify. – Rinktacular Feb 13 '17 at 16:13

1 Answers1

0

I am using ASP .NET MVC 5. It seems that including the PatientSearch.js <script> within the <head> tag of my "_Layout.cshtml" allowed the function to get recognized where the particular View is not for some reason. Not really a "solution" but it did solve the reason why I had opened this question.

Rinktacular
  • 1,041
  • 2
  • 19
  • 42
  • 1
    Go over the comment about restructuring _how_ you add your scripts in the page. You're code seems to show that you are mixing scripts with content. You can leverage [`@sections`](http://stackoverflow.com/q/13089489/304683) for that. Hth. – EdSF Feb 13 '17 at 16:47