Add button

where is the button?
what will happen when you click the button?

site is this if anyone interested...
http://my-friend.co/Test_rec4/Default.aspx?userid=mc23

you see this line

html += "<td>House Name: </td><td colspan=3>" + house.house_name + "</td>";

Select allOpen in new window

change it as

html += "<td>House Name: </td><td colspan=2>" + house.house_name + "</td>";
html += "<td><button class=btnHouse>View<button></td>";

Select allOpen in new window

and a css like

.btnHouse{
  width:100%;
}

Select allOpen in new window

Good day HainKurt,
Once there is a click to the button, it would delete the record and also to refresh the whole list in there!

Hi HainKurt,
Any advice?

you are using this to delete button, actually a link

<a href="#" class="btnDelete" style="height:23px; width:97px" data-house-id="undefined">Delete</a>

Select allOpen in new window

so, first of all, you should have an id that uniquely determines the record...

you are using "house.house_Id" but I guess there is no such thing...
once you find that unique id, you can use

js

html += "<td rowspan=3><a href='delete.php?id=" + house.house_Id + "' class='btnDelete'>Delete</a></td>";

Select allOpen in new window

and pass that id to the delete.php, where you get the id value from request url, and delete the record, and redirect the user to the main page

css

btnDelete{
 height:23px;
 width:97px;
}

Select allOpen in new window

Many thanks HainKurt.
I have put these

            $(".btnDelete").click(function () { //-- add a tag click event handler to perform delete
                if (confirm("Are you sure you want to delete current record?")) {
                    var houseIdToDelete = $(this).attr("data-house-id");
                    DeleteHouseRecord(houseIdToDelete);
                }
                $.confirm({
                    title: 'Confirm!',
                    content: 'Are you sure you want to delete current record?',
                    buttons: {
                        Yes: {
                            text: 'Yes',
                            btnClass: 'btn-red',
                            keys: ['enter'],
                            action: function () {
                                var houseIdToDelete = $(this).attr("data-house-id");
                                DeleteHouseRecord(houseIdToDelete);
                                //-- do ajax call here to delete the record
                            }
                        },
                        No: {
                            text: 'No',
                            btnClass: 'btn-green',
                            keys: ['esc'],
                            action: function () {
                                //$.alert('You clicked No!');
                            }
                        },

                    }
                });
                return false;
            });

Select allOpen in new window

but I do not get Yes/No buttons shown, when deleting the record, after re-deployment. Why?

you are missing confirm library I guess...

https://craftpip.github.io/jquery-confirm/

basically line 2-5 and 6-30 are doing same thing, but $.confirm is not setup properly...

other than that it looks ok...

add these two lines to the top of the page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script>

Select allOpen in new window

Hi HainKurt,
I've put the two lines to the beginning of the page but after re-deployment, I still do not get Yes and No buttons to the message prompt.

re arrange your resources on the page

jquery on top
other libraries next
then your js library

then put all your css, from most generic to most specific one (your css on bottom)

or

just do this for now

move this jquery-confirm.min.js after jQuery library jquery-2.1.3.min.js

Here are the codes

    <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Select allOpen in new window

after re-deployment, I still do not see Yes and No buttons to the message prompt.

your page does not reflect this...

still wrong order

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="JavaScript1.js"></script>

Select allOpen in new window

actually, you included it twice... remove the one on top

Sorry, I've removed the top line but I still do not see Yes and No buttons to the prompt, after re-deployment.

oops, sorry
actually you should not remove but put that one after jQuery :)
I thought it is included twice, but one of them was css...

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script>

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css" />

<script type="text/javascript" src="JavaScript1.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />

Select allOpen in new window

Sorry HainKurt, what to adjust now, to my codes?

put above into your page, and remove yours

Sorry to that I put your codes, but after re-deployment, I still do not see Yes and No buttons.

this is what you have


can you see confirm js file here?
or two css files for confirm utility?

and you just ignore what I said here @ ID: 42219322
or you are not so careful...

if it is not working, you miss something, and you should carefully check your code, or use some tools like fiddler or chrome developer tool (F12) to find missing/invalid parts...

Here are what I have now

    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css" />
    <script type="text/javascript" src="JavaScript1.js">
    </script>
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>

Select allOpen in new window

and it seems problem still persists.

and it seems problem still persists.

I dont think so...

and you should comment out / delete this code

if (confirm("Are you sure you want to delete current record?")) {
                    var houseIdToDelete = $(this).attr("data-house-id");
                    DeleteHouseRecord(houseIdToDelete);
                }

Select allOpen in new window

Appreciate you a lot!
Do you know what is the reason to that, there is now more than one prompt message, when I click "Delete" button?

BTW, how to make Delete button bigger?

Do you know what is the reason to that, there is now more than one prompt message, when I click "Delete" button?

did you see my post @ ID: 42219921

Yes, I did already delete this part and here is what I have now

            $(".btnDelete").click(function () { //-- add a tag click event handler to perform delete
                $.confirm({
                    title: 'Confirm!',
                    content: 'Are you sure you want to delete current record?',
                    buttons: {
                        Yes: {
                            text: 'Yes',
                            btnClass: 'btn-red',
                            keys: ['enter'],
                            action: function () {
                                var houseIdToDelete = $(this).attr("data-house-id");
                                DeleteHouseRecord(houseIdToDelete);
                                //-- do ajax call here to delete the record
                            }
                        },
                        No: {
                            text: 'No',
                            btnClass: 'btn-green',
                            keys: ['esc'],
                            action: function () {
                                //$.alert('You clicked No!');
                            }
                        },

                    }
                });
                return false;
            });

Select allOpen in new window

css

.btnDelete {
  background-color: white;
  width: 100%;
  padding: 5px;
  font-size: 16px;
  color: red;
}

Select allOpen in new window

html += "<colgroup><col width=140 /><col /><col width=140 /><col /><col width=170/></colgroup>";

>>>

html += "<colgroup><col width=140 /><col /><col width=140 /><col /><col width=170/><col width=100/></colgroup>";

Select allOpen in new window

html += "<td rowspan=3><a href='#' class='btnDelete' data-house-id='" + house.house_Id + "'>Delete</a></td>";

>>>

html += "<td rowspan=3><button class='btnDelete' data-house-id='" + house.house_Id + "'>Delete</button></td>";

Select allOpen in new window

>>>

Yes, I did already delete this part and here is what I have now

clear cache
or, press Ctrl+F5

to refresh the js file...

Hainkurt,
Appreciate you a lot!
NOw after the selection of Yes button, there is one other prompt. Any idea to this?

maybe this

        error: function (response) {
            alert(response.d);

Select allOpen in new window

I removed that part, but the message prompt does persist.

Very sorry, one last thing, I select Yes button but record is not deleted. Any idea?

http://my-friend.co/Test_rec4/WebForm179.aspx/DeleteHouseRecord

Server Error in '/Test_rec4' Application.
--------------------------------------------------------------------------------


The resource cannot be found. 
  Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

 Requested URL: /Test_rec4/WebForm179.aspx/DeleteHouseRecord


--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.36392 

Select allOpen in new window

Hi,
Here is the event

        [WebMethod(EnableSession = true)]
        public static void DeleteHouseRecord(Int64 houseIdToDelete)
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Mssqlconn3"].ConnectionString);
            SqlCommand cmd;
            conn.Open();
            try
            {
                cmd = new SqlCommand("update house_tab set deleted='Y' where house_id=@id ", conn);
                //cmd = new OleDbCommand("update user_master set self_intro=@intro where trim(house_name)=@house_name ", conn);

                cmd.Parameters.Add("@id", SqlDbType.Int).Value = houseIdToDelete;

                cmd.ExecuteNonQuery();
            }
            catch (Exception ex)
            {
                return;
            }
            finally
            {
                conn.Close();
            }

        }

Select allOpen in new window

and how to check if this has been executed?

I have no idea what is that thing, and where it runs, but you are calling this page

http://my-friend.co/Test_rec4/WebForm179.aspx/DeleteHouseRecord

and url is wrong... find the correct url and post it there...

Here is the event

function DeleteHouseRecord(houseIdToDelete) {
    $.ajax({
        type: 'POST',
        url: 'WebForm179.aspx/DeleteHouseRecord',
        contentType: 'application/json; charset=utf-8',
        data: "{'houseIdToDelete':'" + houseIdToDelete + "'}",
        dataType: 'json',
        success: function (response) {
            showData(); //-- record is deleted now, rebind the grid again to get the effect in UI
            alert("Record deleted successfully!");
        }
    });
}

Select allOpen in new window

to further call the previous event.

I dont care the code for now...

url is wrong...

whoever created that page, ask for the url, and use it on you page...

I do adjust it like

function DeleteHouseRecord(houseIdToDelete) {
    $.ajax({
        type: 'POST',
        url: 'Default.aspx/DeleteHouseRecord',
        ...

Select allOpen in new window

by putting the correct page name but problem persists after re-deployment

{"Message":"undefined is not a valid value for Int64.","StackTrace":"   at System.ComponentModel.BaseNumberConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)\r\n   at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object\u0026 convertedObject)\r\n   at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object\u0026 convertedObject)\r\n   at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary`2 rawParams)\r\n   at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.Exception"}

you should pass parameter and a valid number...

if you look at your buttons you will see

<a href="#" class="btnDelete" data-house-id="undefined">Delete</a>

and it is coming from this code

html += "<td rowspan=3><a href='#' class='btnDelete' data-house-id='" + house.house_Id + "'>Delete</a></td>";

make sure it is populated correctly...

and you are missing a column definition

html += "<colgroup><col width=140 /><col /><col width=140 /><col /><col width=170/></colgroup>";

Select allOpen in new window

>>>

html += "<colgroup><col width=140 /><col /><col width=140 /><col /><col width=170/><col width=100/></colgroup>";

Select allOpen in new window

Is it OK that I do not want to keep such table column to the list (on Web-page)?
Sorry to that, I have adjusted it, but record cannot be deleted, after re-deployment.

you should ask a question and close it when it it is resolved...

otherwise you should open a GIG!

you cannot ask hundreds of question in one thread...

you should use house_id not house_Id

html += "<td rowspan=3><a href='#' class='btnDelete' data-house-id='" + house.house_Id + "'>Delete</a></td>";

>>>>

html += "<td rowspan=3><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>Delete</a></td>";

Hi,
I've raised this
https://www.experts-exchange.com/questions/29045050/Problem-to-delete-record.html