Show sweet Alert in partial view

Question

I have a partial view and i have sweet alert in it , it is not firing and every time it says the function is not defined on button click here is my partial view code

<form method="post" id="nones" name="nones">
<button type="button" class="btn btn-danger" onclick="GETVAL()">Delete</button>
</form>

and here is my main view from where I am calling my partial view
Html.RenderPartial("Aler");
I gave the jqeruy reference in layout I tried togive the jquery and sweet alert reference in partial view as wel

Aman Gupta · Answer

Hi Mark, The issue you're facing is likely due to the fact that the script in your partial view is not getting properly loaded or recognized when the partial view is rendered. Here’s how you can address the problem: 1. Check Script Placement Ensure that your scripts are placed inside the @section Scripts block if you want them to be loaded after the DOM is ready. Since you’re using Html.RenderPartial("Aler");, make sure that the script block is included correctly in the partial view. Also, ensure that @RenderSection("Scripts", required: false) is present in your layout file. 2. Script Loading Order If jQuery or SweetAlert2 is not loaded before your script is executed, the function may not be defined, leading to the error you're seeing. Since you've included the script references in the partial view, ensure that those references are loaded before your custom script. 3. Function Declaration Ensure that the function GETVAL() is declared and accessible. It should be part of the global scope if it is used in an inline onclick attribute. If you are defining it inside a script block, ensure it's not wrapped in another function like $(document).ready() unless you specifically handle its binding. 4. Debugging Check the browser's Developer Tools console to see if there are any errors related to script loading or execution. Ensure that the GETVAL() function is defined before the button is clicked. 5. Main View Script Inclusion If you're using a layout and rendering a partial view within it, ensure that the script references or script section in the partial view are executed properly. You might want to ensure that jQuery and SweetAlert2 are only included once in the layout or parent view. 6. Updating the Partial View Ensure that your partial view is correctly structured to load the necessary scripts: Delete @section Scripts { function GETVAL() { Swal.fire({ title: 'Confirmation', text: 'This is coming from the Partial view', icon: 'success', showCancelButton: true, confirmButtonText: 'Ok', cancelButtonText: 'Cancel' }).then((result) => { if (result.isConfirmed) { // Perform the action if the user confirms $('#nones').submit(); } }); } } 7. Render Partial with Script When you render the partial view, ensure that the scripts are also rendered: @Html.RenderPartial("Aler") 8. Ensure jQuery and SweetAlert2 are Loaded Confirm that jQuery and SweetAlert2 are loaded before the script in your partial view runs. You can check this by placing simple console logs before your script runs. If these steps don’t resolve the issue, please provide more details or share any specific errors you're seeing in the browser console, and I can help troubleshoot further.