Peter Chan
asked on
Add button
Hi,
Further to this
https://www.experts-exchange.com/questions/29041918/Adjust-list.html?anchor=a42205959¬ificationFollowed=192050569&anchorAnswerId=42205959#a42205959
I want to add one button to each record like
Further to this
https://www.experts-exchange.com/questions/29041918/Adjust-list.html?anchor=a42205959¬ificationFollowed=192050569&anchorAnswerId=42205959#a42205959
I want to add one button to each record like
you see this line
change it as
and a css like
html += "<td>House Name: </td><td colspan=3>" + house.house_name + "</td>";
change it as
html += "<td>House Name: </td><td colspan=2>" + house.house_name + "</td>";
html += "<td><button class=btnHouse>View<button></td>";
and a css like
.btnHouse{
width:100%;
}
ASKER
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!
Once there is a click to the button, it would delete the record and also to refresh the whole list in there!
ASKER
Hi HainKurt,
Any advice?
Any advice?
you are using this to delete button, actually a link
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
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
<a href="#" class="btnDelete" style="height:23px; width:97px" data-house-id="undefined">Delete</a>
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>";
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;
}
ASKER
Many thanks HainKurt.
I have put these
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;
});
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
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>
ASKER
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.
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
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
ASKER
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>
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
actually, you included it twice... remove the one on top
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>
actually, you included it twice... remove the one on top
ASKER
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...
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" />
ASKER
Sorry HainKurt, what to adjust now, to my codes?
put above into your page, and remove yours
ASKER
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...
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...
ASKER
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"/>
and it seems problem still persists.
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);
}
ASKER
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?
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
ASKER
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;
});
css
>>>
.btnDelete {
background-color: white;
width: 100%;
padding: 5px;
font-size: 16px;
color: red;
}
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>";
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>";
>>>
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...
ASKER
Hainkurt,
Appreciate you a lot!
NOw after the selection of Yes button, there is one other prompt. Any idea to this?
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);
ASKER
I removed that part, but the message prompt does persist.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
ASKER
Hi,
Here is the event
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();
}
}
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...
http://my-friend.co/Test_rec4/WebForm179.aspx/DeleteHouseRecord
and url is wrong... find the correct url and post it there...
ASKER
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!");
}
});
}
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...
url is wrong...
whoever created that page, ask for the url, and use it on you page...
ASKER
I do adjust it like
function DeleteHouseRecord(houseIdToDelete) {
$.ajax({
type: 'POST',
url: 'Default.aspx/DeleteHouseRecord',
...
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.BaseNumberConv erter.Conv ertFrom(IT ypeDescrip torContext context, CultureInfo culture, Object value)\r\n at System.Web.Script.Serializ ation.Obje ctConverte r.ConvertO bjectToTyp eInternal( Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object\u0026 convertedObject)\r\n at System.Web.Script.Serializ ation.Obje ctConverte r.ConvertO bjectToTyp eMain(Obje ct o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object\u0026 convertedObject)\r\n at System.Web.Script.Services .WebServic eMethodDat a.StrongTy peParamete rs(IDictio nary`2 rawParams)\r\n at System.Web.Script.Services .RestHandl er.InvokeM ethod(Http Context context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n at System.Web.Script.Services .RestHandl er.Execute WebService Call(HttpC ontext context, WebServiceMethodData methodData)","ExceptionTyp e":"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...
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>";
>>>
html += "<colgroup><col width=140 /><col /><col width=140 /><col /><col width=170/><col width=100/></colgroup>";
ASKER
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.
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...
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>";
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>";
ASKER
Hi,
I've raised this
https://www.experts-exchange.com/questions/29045050/Problem-to-delete-record.html
I've raised this
https://www.experts-exchange.com/questions/29045050/Problem-to-delete-record.html
what will happen when you click the button?
site is this if anyone interested...
http://my-friend.co/Test_rec4/Default.aspx?userid=mc23