Click here to Skip to main content
14,541,809 members
Rate this:
Please Sign up or sign in to vote.
See more:
hi ,

there is puzzle ,
i have list view in cshtml table and its have two button 1 is edit and 2 is details
on this row attribute edit click i need to open a new popupForm

i tried but non of response after btn click

need example tutorial

What I have tried:

html table

<table class="tbl1 table table-responsive table-hover table-bordered" id="tbl1" style="width:100%">

			<tr style="background-color:palegoldenrod;height:135%">
				<td class="hidme"></td>
				<td style="width:30%">
					@Html.ActionLink("SypplyerName", "ListGetINV2", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
				</td>
				<td>
					Invoice No
				</td>
				<td>
					@Html.ActionLink("Invice Date", "ListGetINV2", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter })
				</td>
				<td>
					TaxAmount
				</td>
				<td>
					Invoice Amount
				</td>
				<td></td>
			</tr>
			@foreach (var item in Model)
			{
				<tr style="background-color:#eff6de">
					<td class="hidme">
						@Html.HiddenFor(modelItem => item.PerTranId, new { @class = "PerTranId text-danger" })
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.SypplyerName)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.InvoiceNo)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.InvoiceDate)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.TaxAmount)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.TotalAmount)
					</td>
					<td>
						@Html.ActionLink("Edit", "EditInv", new { id = item.PerTranId }) |
						
						<input type="submit" class="dtl btn btn-warning" id="EditInv" onclick="PopupForm('@Url.Action("EditInv","Perchus")')" />
					</td>

				</tr>
			}
		</table>



jquery code

    var popup;
$('#EditInv').on('Click', 'input.dtl', function () {
    function PopupForm(url) {
        var formDiv = $('<div/>');
        $.get(url)
            .done(function (response) {
                formDiv.html(response);

                popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'EDIT INVOICE REORD',
                    height: 500,
                    width: 600,
                    close: function () {
                        popup.dialog('distroy').remove();
                    }

                });
            });

    }
})
Posted
Updated 10-Mar-19 8:27am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Couple of suggestion

1. replace
$('#EditInv').on('Click', 'input.dtl', function () {
with
$('#EditInv').on('click', function () {
. I think the Click is case sensitive and I don't think the code need to include 'input.dtl' because it referencing the same element not parent child relationship

2. I don't think the
onclick="PopupForm('@Url.Action("EditInv","Perchus")')"
is necessary, if the jQuery is wiring the onclick event, the JavaScript should look like below

$('#EditInv').on('click', function () {
//button EditInv clicked, do something here or call a function
        var formDiv = $('<div/>');
        let url = '@Url.Action("EditInv","Perchus")';
        $.get(url)
            .done(function (response) {
                formDiv.html(response);

                popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'EDIT INVOICE REORD',
                    height: 500,
                    width: 600,
                    close: function () {
                        popup.dialog('distroy').remove();
                    }

                });
            });
});


3. On the other hand if you prefer the code to use button click event, then the JavaScript should look like
function PopupForm(url) {
    var formDiv = $('<div/>');
    $.get(url)
        .done(function (response) {
            formDiv.html(response);

            popup = formDiv.dialog({
                autoOpen: true,
                resizable: false,
                title: 'EDIT INVOICE REORD',
                height: 500,
                width: 600,
                close: function () {
                    popup.dialog('distroy').remove();
                }

            });
        });

}



Reference:
.on() | jQuery API Documentation[^]
   
Comments
sayli1995 11-Mar-19 5:02am
   
hi , Bryian Tan sir ,
thanking you about your valuable support ,

function PopupForm(Url) {
var formDiv = $('');
alert(Url)


$.get(Url)
.done(function (response) {
formDiv.html(response);

popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: 'EDIT INVOICE REORD',
height: 500,
width: 600,
close: function () {
popup.dialog('distroy').remove();
}
});
});
}

after the button click he comes and shoot a massage alert i.e url ,but he did not open popupform

this is in controller
[HttpGet]
public ActionResult EditInv()
{

return View();
}

[HttpPost]
public ActionResult EditInv(int id)
{

return View();
}

and this is a new popup form view

@model WorkingPlace.Models.PerchesDetail

@{
Layout = null;

}
width:50%;height:50%;border:double">*@
@using (Html.BeginForm("EditInv", "Perchus", FormMethod.Post, new { @class = "form-horizontal" }))
{

@Html.LabelFor(Model => Model.Srno, new { @class = "Control-label" })
@Html.EditorFor(Model => Model.Srno, new { htmlAttributes = new { @class = "Form-control" } })


}


i cant understand what i mistaken here after trying a 3 hours works on this one ,

sneha
Bryian Tan 11-Mar-19 9:06am
   
I just noticed, there ActionLink in your code, why not just use ActionLink + jQuery wiring event? The button might not work because the url is missing id parameter

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100