Form Element Appended from Ajax not working-CodePudding

I have this code for form method in ajax

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
        $.each(data, function (key, value) {
            
            $("#loadNotes").append(
                '<form method="GET">'  
                '<div  style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">'  

                '<a  asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="'   value.id   '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">'   value.title   '</a>'  
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >'   value.description   '</p>'  

                '</div>'  
                '</form>'
               ) ;
        });
    },
    error: function (response) {
        alert(response);
    }
});

I already tried to put the form method and other elements under cshtml file and from there it works, it is calling the controller and view but not from ajax.

what am I missing? Please help thank you

CodePudding user response：

the type property you passed as GET should be method I suppose.

The remaining code seems ok. Have you checked your browser console for errors ?

CodePudding user response：

use Backtick ``

$("#loadNotes").append(`
    <form method="GET">
        <div  style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; ">
           <a  asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="`   value.id   `"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit"> `   value.title   `</a>
           <p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >`   value.description   `</p>
        </div>
    </form>
`);

CodePudding user response：

Maybe store the html "form tag" in a variable first then use .html() to append the forms to #loadNotes

And make sure add (document) after your '#loadNotes' to absolutely find the element in the document. $("#loadNotes", document)

Also success: function and error: function is kinda old. try .done and .fail

Old Method of Ajax.

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
        var html_forms = '';
        $.each(data, function (key, value) {
                html_forms  = '<form method="GET">'  
                '<div  style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">'  
                '<a  asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="'   value.id   '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">'   value.title   '</a>'  
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >'   value.description   '</p>'  
                '</div>'  
                '</form>';
        });

        $("#loadNotes", document).html(html_forms);
    },
    error: function (response) {
        alert(response);
    }
});

New Method of Ajax

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
}).done(function(data) {
        console.log(data);
        var html_forms = '';
        $.each(data, function (key, value) {
                html_forms  = '<form method="GET">'  
                '<div  style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">'  
                '<a  asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="'   value.id   '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">'   value.title   '</a>'  
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >'   value.description   '</p>'  
                '</div>'  
                '</form>';
        });

        $("#loadNotes", document).html(html_forms);
}).fail(function(response) {
       alert(response);
});

EDIT: Change this part to < button

From this

'<a  asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="'   value.id   '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">'   value.title   '</a>'

To this

'<button  asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="'   value.id   '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">'   value.title   '</button>'

and add action on this

html_forms  = '<form action="php_controller.php" method="GET">'