I have a Modal that shows CssClass icon like book, cup and pen, if i click any i want the clicked one to appear on page and when the user logs in he or she will see the itemicons she/he picked.
Example lets say i have CssClass fa fa-book, fa fa-cup and fa fa-pen on Modal. If mic44 picks book it will insert mic44 details in UserPICKS table like the below table
The problem am facing is the icons on the modal doesnt appear on the datalisrt when a user clicks it, and i got stucked in the code like the Ajax jquery side, the web method side i dont know if i got that right any help?
UserName Iconbook IconCup IconPen postId statuscount
mic44 book null null 106 1
may88 null Cup null 195 1
Stak55 book null Pen 106 1
ston55 null Cup null 195 1
[WebMethod]
public static string INSERTUSERSTATUS((string icon, int pickedId, string userName, string postId)
{
string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO [UserPICKS](UserName,statuscount,Iconbook,IconCup,IconPen) VALUES(@UserName,@statuscount,@Iconbook,@IconCup,@IconPen)"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
// cmd.Parameters.AddWithValue("@ID", id);
cmd.Parameters.AddWithValue("@UserName", HttpContext.Current.Session["userName"].ToString());
cmd.Parameters.AddWithValue("@statuscount", "1");
cmd.Parameters.AddWithValue("@Iconbook", "book");
cmd.Parameters.AddWithValue("@IconCup", "cup");
cmd.Parameters.AddWithValue("@IconPen", "pen");
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return posted";
}
<asp:DataList ID="Getpost" runat="server" DataKeyName="Id" OnItemDataBound="Getpost_ItemDataBound" OnDataBound="Getpost_DataBound" Font-Bold="True" Width="100%">
<ItemTemplate>
<div class="well col-lg-6">
<asp:Label ID="Label1" Text='<%# Eval("UserName") %>' runat="server" />
<div class="" style="margin-top:0;margin-left:9px;margin-bottom:8px" >
<asp:Label ID="lblpost" runat="server" Text='<%# Eval("ContentPost").ToString().Length >180 ? Eval("ContentPost").ToString().Substring(0,180)+"...(Read More)" : Eval("ContentPost").ToString()%>' Font-Bold="False" Font-Strikeout="False" ForeColor="#333333" CssClass="" Font-Names="Arial" Font-Size=""/>
</div>
<asp:Label ID="lbCOMlId" Text='<%#Eval("ID") %>' CssClass="" runat="server" Font-Size="0px" Visible="False" />
<asp:Label ID="lbCOMlId2" Text='<%#Eval("ID") %>' CssClass="" runat="server" />
<div class="clearfix"></div>
<asp:LinkButton ID="btnPick" Text="" runat="server" >
<asp:Label ID="lblpickdefaultshow" runat="server" Text="" CssClass=" fa fa-shopping-cart"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="Pick"></asp:Label>
</asp:LinkButton>
</div>
</ItemTemplate>
</asp:DataList>
modal
<!-- delet modal-dialog 1 -->
<div class="modal fade" id="pickermodal" tabindex="-1" role="dialog" aria-labelledby="pickerModalLabel"
aria-hidden="true">
<div class="">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Pick Item Icons</h4></div>
<div class="modal-body">
.......
<span style="margin-right:29px">
<asp:LinkButton ID="btnpickbook" Text="" runat="server" >
<asp:Label ID="Label59" runat="server" Text="" Font-Size="42px" CssClass=" fa fa-book"></asp:Label>
</asp:LinkButton>
<a href="#" id="">
</a>
</span>
<span style="margin-right:29px">
<a href="#" id="btnpickcup">
<asp:Label ID="Label7" runat="server" Text="" Font-Size="42px" CssClass=" fa fa-cup" ForeColor="Red"></asp:Label>
</a>
</span>
<span style="margin-right:29px">
<a href="#" id="btnpen">
<asp:Label ID="Label8" runat="server" Text="" Font-Size="42px" CssClass=" fa fa-pen"></asp:Label>
</a>
</span>
</div>
<div class="modal-footer">
</div></div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog --></div><!-- /.modal -->
</div>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.showposts();
string username5 = this.Page.User.Identity.Name;
//Path.GetFileName(Request.Url.AbsolutePath);
//}
}
}
private void showposts()
{
// string userId = Session["userName"].ToString();
// string userId = Session["userName"].ToString();
// string str = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
string showposts = "GetUserPOSTSEXAMPLE";
using (SqlConnection con = new SqlConnection(constring4))
{
con.Open();
using (SqlCommand cmd = new SqlCommand(showposts, con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
//
sda.Fill(dt);
ViewState["DataTable"] = dt;
Getposts.DataSource = dt;
Getposts.DataBind();
}
}
}
<script type="text/javascript">
$(function () {
$('[id*=btnliked]').on('click', function () {
var username = $(this).closest('tr').find('[id*=Label1]').text();
$('[id*=pickermodal]').modal('show');
var button = $(this);
var userStatus = $(this).closest('tr').find('[id*=Label3]');
var count = $(this).closest('tr').find('[id*=Label4]');
$.ajax({
type: "POST",
url: "TEST66ONBUTON.aspx/UpdateStatus",
data: '{userName: "' + username + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$(button).text(($(button).text() == "Book") ? "Book" : "Book");
$(button).text(($(button).text() == "Cup") ? "Cup" : "Cup");
$(button).text(($(button).text() == "Pen") ? "Pen" : "Pen");
$(userStatus).text(($(userStatus).text() == "False") ? "True" : "False");
$(count).text(($(count).text() == "0") ? "1" : "0");
},
failure: function (response) {
alert(response.responseText);
}
});
return false;
});
$('[id*=btnpickbook]').click(function () {
// var id = "1";
var id = $('.id').html().trim();
$.ajax({
type: "POST",
url: "HomePage.aspx/InsertPin1",
data: '{id:"' + id + '",username:"' + username + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#pinmodal1').modal('hide');
// clear value
$(".id").html('');
$(".username").html('');
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
});
</script>
