Uncaught ReferenceError: "function" is not defined

Question

So I'm trying to get a really simple ajax call to work, but always get the above stated error.

View: (@model... is above layout)

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

        <script>
                function DownloadPDF() {
                    $.ajax({
                        type: "POST",
                        url: "/Editor/MailMergeVorlage",
                        data: { tmpGutschein = @Model }
                    })
            };
        </script>
    </head>
    ...
    <body>
    ...
        <section>
                <a href="#!" onclick="DownloadPDF()">
                   <img src="~/Content/images/Icon_Word.png" style="max-width:64px;max-height:64px;" />
                </a>
        </section>
    </body>

Controller:

public void MailMergeVorlage(DefType tmpGutschein)
        {
            Editor editor = new Editor();
            editor.CreatePDF(tmpGutschein);
        }

Things Ive tried:

putting the javascript in a .ready function
adding @Scripts.Render("~/bundles/jquery") under the modernizr-script

UPDATE: Working code below.

View: code inside the body tag NOT head

<script>
        function DownloadPDF() {
            $.ajax({
                type: "POST",
                url: "/FE/MailMergeVorlage",
                data: { tmpGutschein: @Html.Raw(Json.Encode(Model)) }
                })
        };
    </script>

Controller:

[HttpPost]
        public void MailMergeVorlage(DefType tmpGutschein)
        {
            Editor editor = new Editor();
            editor.MailMergeVorlage(tmpGutschein);
        }

Have you looked at what the actual HTML generated is? The line `data: { tmpGutschein = @Model }` looks a bit suspect. — Steve, Nov 18 '19 at 12:13
Also your posting to an action thats not decorated with `[HttpPost]` so you may get a 404 and doesn't look like it actually does anything. The line `` should that really have a `!` in the URL? — Steve, Nov 18 '19 at 12:19
Yeah, I should have used : instead of = in the data-line. Now Im getting the same error with $ instead of the function-name. Changing Post to Get did not help. The #! is there to stay on the same page without refreshing and scrolling somewhere, since I don't have an elemtent with id="!". The method is not an ActionResult or anything, just a void. — , Nov 18 '19 at 12:26
I think this may help. stackoverflow.com/questions/8502146/… . That's what I was getting at in my previous comment about the line not looking right. — Steve, Nov 18 '19 at 13:17
https://stackoverflow.com/questions/8502146/convert-net-object-to-json-object-in-the-view — Steve, Nov 18 '19 at 13:32
Thanks! Probably a really stupid question, but how do I get the JSON in the controller? If I'm understanding everything correct, json.encode(model) turns the properties of the object into a string. So if I use `data: {tmpGutschein: @Html.Raw(Json.Encode(Model))}` and the controller method is `public void MailMergeVorlage(string tmpGutschein) { ... }` I should get the string. However it is empty / didnt get any data. What am I missing? — , Nov 18 '19 at 13:57
It's more than likely that the properties have to be made public not private. e.g. `public string Name {get;set;}` etc — Steve, Nov 18 '19 at 14:27
I would try this answer https://stackoverflow.com/a/8502797/758848 as it seems to be generally more accepted as more robust though it does take a bit more effort to implement. — Steve, Nov 18 '19 at 14:35
Okay, so the ajax call doesn't send it as a string, or maybe it does, but it worked by simply using the datatype of the model I was trying to send (instead of string). Anyway, thanks for helping me out massivly and steering me in the right direction. I really appreciate it! — , Nov 18 '19 at 14:41

Yuvaraj D · Answer 1 · 2019-11-18T13:02:35.413

0

First, you need to add the jquery script in header tag. After the write, the function in body tag not in header tag as below code

  @{ Layout = null; }
    <!DOCTYPE html>
    <html>

    <head>
      @Styles.Render("~/Content/css") 
      @Scripts.Render("~/bundles/modernizr") 
      @Scripts.Render("~/bundles/jquery")

    </head>
    ...

    <body>
      ...
      <section>
        <a href="#" onclick="DownloadPDF()">
          <img src="~/Content/images/Icon_Word.png" style="max-width:64px;max-height:64px;" />
        </a>
      </section>
      <script>
        function DownloadPDF() {
          $.ajax({
            type: "POST",
            url: "/Editor/MailMergeVorlage",
            data: @Html.Raw(Json.Encode(Model));
            sucess:function(result){
               alert(result);
             }
          })
        };
      </script>
    </body>

edited Nov 18 '19 at 13:02

answered Nov 18 '19 at 12:28

Yuvaraj D

1
2

Do you know by chance if it is possible to send a Model in the data-tag? I basically need every attribute and sending it through via [at]Model.attribute1, [at]Model.attribute2, ... seems like an awful solution. Currently I'm getting the error with "Modelname" is not defined. Also as I wrote in another comment the = should be replaced by a : (if you want to change this in your answer) – Nov 18 '19 at 12:44
I think this may help. https://stackoverflow.com/questions/8502146/convert-net-object-to-json-object-in-the-view . That's what I was getting at in my previous comment about the line not looking right. – Steve Nov 18 '19 at 12:48

Uncaught ReferenceError: "function" is not defined

1 Answers1