soner soner - 1 month ago 16
jQuery Question

$(document).ready(function () Uncaught ReferenceError: is not defined

Html:

<button type="button" onclick="deleteAdress('@_address.AddressID','@Model.CustomerID','@ViewData["appid"]','@ViewData["_retVal"]')">Delete</button>


JS:

$(document).ready(function () {

var customerID = $("#hidcustomerid").val();

if (customerID != "0") {

function deleteAdress(adressId, customerId, appid, retVal) {

window.location.href = '/Customer/DeleteAdress/?adressId=' + adressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;

}
}

});


If i use "deleteAdress" function out of "$(document).ready(function ()" the function works .

If i use "deleteAdress" inside of "$(document).ready(function ()" the function displays error on click button.

Error:

Uncaught ReferenceError: deleteAdress is not defined


Edit:
Rest HTML


<table>
@foreach (ObjectModelLibrary.Address _address in Model.Addresses.List)
{
<tr>

<th>
<button type="button" class="btn btn-sm btn-danger" onclick="deleteAdress('@_address.AddressID','@Model.CustomerID','@ViewData["appid"]','@ViewData["_retVal"]')"><i class="icon-remove"></i>Delete</button>
</th>

</tr>
}
</table>


How can i use deleteAdress function inside of document ready function ?

Thanks.

Answer

As I mentioned initially in comment, your function is not global, so cannot be seen by an onclick handler.

Secondly, having an if around a function has no effect (http://jsfiddle.net/TrueBlueAussie/gdptaxvv/) as the function is hoisted to the top within its parent scope so it always exists. You could use an alternate method of declaring the function to avoid that, but I do not recommend it e.g. var deleteAddress = function(){}, but the scope still blocks an onclick handler from seeing it.

As a general guideline, don't use attribute-based handlers with jQuery (e.g. onclick=""). It separates the handler from the event registration and does not support multiple handlers.

  1. Add a new class to identify your delete button(s). e.g class="deleteAddress" in the example below.

  2. Inject any key values into the items as data- attributes and handle the event the jQuery way. This also means your conditional check will work as you intended:

e.g. HTML with data- attributes:

<table>
@foreach (ObjectModelLibrary.Address _address in Model.Addresses.List) 
{
    <tr>
        <th>
            <button class="deleteAddress btn btn-sm btn-danger" type="button" data-addressId="@_address.AddressID" data-customerId="@Model.CustomerID" data-appId="@(ViewData["appid"])" data-retVal="@(ViewData["_retVal"])">Delete</button>
        </th>
    </tr>
}
</table>

Note: I added some () wrappers on the two attributes I felt might confuse Razor, but probably not needed unless it gives an error.

Code:

$(document).ready(function () {
    var customerID = $("#hidcustomerid").val();
    if (customerID != "0") {
        $('.deleteAddress').click(function(){
              // Get key values from data- attributes "of the clicked button"
              var addressId = $(this).data("addressId"); 
              var customerId = $(this).data("customerId"); 
              var appid = $(this).data("appId"); 
              var retVal = $(this).data("retVal"); 
              window.location.href = '/Customer/DeleteAddress/?addressId=' + addressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;
        });
    }
});

The above example assumes that the buttons are one per row, so that the attributes will relate to the deletion of that row.

Side notes:

I would strongly suggest using Ajax for the delete and not setting the window location. You can then delete the row interactively, without a page refresh.

e.g. Ajax version:

$(function () {
    var customerID = $("#hidcustomerid").val();
    if (customerID != "0") {
        $('.deleteAddress').click(function(){
              // Get displayed row to delete
              var $tr = $(this).closest('tr');
              // Get key values from data- attributes "of the clicked button"
              var addressId = $(this).data("addressId"); 
              var customerId = $(this).data("customerId"); 
              var appid = $(this).data("appId"); 
              var retVal = $(this).data("retVal"); 
              $.get('/Customer/DeleteAdress/?addressId=' + addressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal).done(function(){
                   // Delete succeeded, delete the screen row
                   $tr.remove();
              });
        });
    }
});

There is a shorter version of $(document).ready(function(){}); available that you should use:

$(function(){
   // Your DOM ready code here.
});

it also support this version (with a locally scoped $ to avoid clashes):

jQuery(function($){
   // Your DOM ready code here using a locally scoped $
});