Like the title, I used jquery autocomplete to set some text to some of my labels. Then, click save, but the event save in code behind only recieve "" from the labels.Text even though they already have text. Here is my code.
<input id="search" type="text" placeholder="search" />
...
<asp:Label ID="LabelNYCNhanVienName" runat="server"></asp:Label>
...
<script type="text/javascript">
$(document).ready(function () {
$("#search").autocomplete({
showHeader: true,
select: function (event, ui) {
this.value = (ui.item ? ui.item.FullName : ' ');
$('#<%= LabelNYCNhanVienName.ClientID %>').text(ui.item ? ui.item.bab: ' ');
return false;
},
minLength: 2,
source: function (request, response) {
$.ajax({
...
});
}
});
});
code Behind:
void ButtonSave_Click(object sender, EventArgs e)
{
Titi item = new Titi ();
item.titiName = LabelNYCNhanVienName.Text;
//My problem is here: the LabelNYCNhanVienName.Text always
//return "" even when i use firebug at that time to catch the LabelNYCNhanVienName
//It still have text in it.
OnSave_Event(item);
}
Here is the picture when i debug. At the save event, the Label still has Text:
Hope you can help me get text from the labels. Thank you
Related
I have a script file scripts.js with a function that styles all checkboxes in page. This file is referenced in the master page.
There is a user control and a aspx test page for it. On page load, the UC shows a list of checkboxes and the style is applied.
On clicking a button, an ajax call gets a list from database and binds some more checkboxes to the page. But for the new checkboxes, the style is not applied. What could be going wrong.
scripts.js:
function selectcheckBtn() {
alert(1);
if ($("input:checkbox").prev("span").length === 0) {
alert(2);
$("<span class='uncheked'></span>").insertBefore("input:checkbox")
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
}
ctrl.ascx:
<script>
function ShowMore() {
$.ajax({
url: "/_layouts/15/handlers/ShowMore.ashx",
data: {},
success: function (msg) {
//append new chkbox list to existing list. It is hidden at first and later faded in.
$(".divList").append(msg);
selectcheckBtn();
$(".hideDiv").fadeIn(300).removeClass("hideDiv");
},
error: function (msg) {
alert("An error occurred while processing your request");
}
});
}
</script>
Show more
On page load both alerts pop. But on clicking 'Show More', only alert(1) pops.
There are no errors in browser console.
Rendered HTML:
//with style applied to chkboxes on page load
<div><span class="uncheked"></span><input type="checkbox" runat="server" id="406">
<label>Compare</label></div>
//with no style applied to new chkboxes
<div><input type="checkbox" runat="server" id="618"><label>Compare</label></div>
I did not understand why the if condition wasn't true in selectcheckBtn();, for the new chkboxes. So, added a new class for the checkboxes and wrote this workaround.
Now calling this function instead of selectcheckBtn(); in the ajax code, worked.
function StyleCheckBox() {
$(".chkBx").each(function () {
if ($(this).prev("span").length === 0) {
$("<span class='uncheked'></span>").insertBefore($(this));
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
});
}
This is my html:
<input type="hidden" id="HiddenIndex" name="HiddenIndex" runat="server" />
Some labels and textbox
<asp:Button runat="server" ID="btnGetCoordinates"
Text="Get Coordinates" OnClick="btnGetCoordinates_Click" />
<asp:Label ID="info" runat="server" Text="Waiting...." />
So when the button Get Coordinates is clicked, it will call the Web Services to return some json results from code behind. A Dialog will popup a listbox with these results. It works perfectly until this point. My goal is when a client select an item in the list and click on "Select" button, it will return the selected item's Index, store in a hidden field and manipulate later from the code behind.
This is my jquery function
function ShowPopup()
{
$("#parentForm").fadeTo(500, .2);
$("#C1Dialog1").dialog({
open: function () {
$(".ui-dialog-titlebar-close").hide();
},
buttons: [{
text: "Select",
click: function () {
var value = " ";
storedIndex = " ";
var selected = $("[id*=lstCandidates] option:selected");
selected.each(function () {
value = $(this).val();
storedIndex = $(this).index();
$("#HiddenIndex").val(storedIndex);
});
alert(value + " and index is " + storedIndex); //Show value and index
alert("html hidden value " + $("#HiddenIndex").val()); //show value
$(this).dialog("close");
$("#parentForm").fadeTo(500, 1);
},
style: "margin-right: 40px;"
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
$("#parentForm").fadeTo(500, 1);
},
style: "margin-left:0px;"
}]
});
}
</script>
As you can see the alert show the value of the hidden field
This is my code behind
protected void btnGetCoordinates_Click(object sender, EventArgs e)
{
//Show the Dialog
if (count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
//never stop here --PROBLEM RIGHT HERE**, there is NO value for Hidden field**
var indexValue = Request.Form["HiddenIndex"];
info.Text = "HiddenIndex is " + indexValue;
}
}
The Info label show nothing when I click on Dialog's select button
Any help would be appreciated , thank you very much.
Probably an issue with the client ID. ASP.NET will not necessarily use the client ID in your markup when emitting the HTML.
There are several ways to fix this, but the easiest is to make the hidden field a plain HTML control. That way ASP.NET won't monkey with it. So change this
<input type="hidden" id="HiddenIndex" name="HiddenIndex" runat="server" />
to this
<input type="hidden" id="HiddenIndex" name="HiddenIndex"/>
Other options:
Set your clientIDmode to static
Modify your jquery selector to use id$='HiddenIndex' so that it ignores any prefix added by ASP.NET.
Using Jquery I was able to pop up a dialog window using a link button and it's nothing but the div tag being popped up.
The pop up window consists of a TextBox and button.
This is the button coded in *.aspx file:
<asp:Button ID="btnSubmitComment" runat="server" onclick="btnSubmitComment_Click" style="display:none;" />
In Jquery :
$(function () {
var dlg = $("#divEditComment").dialog({
autoOpen: false,
show: "blind",
hide: "blind",
//height: 200,
minWidth: 220,
//position: ['right', 210],
buttons: {
"Update Note": function () {
var Updates = btnSubmitComment.replace(/_/g, '$');
__doPostBack(Updates, '');
}
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
divEditComment is the div tag which acts as dialog box. In this dialog box, the button which is not working exists.
In C# code-behind, I have declared:
protected void btnSubmitComment_Click(object sender, EventArgs e)
{
}
Still I am getting the error:
microsoft jscript runtime error 'btnSubmitComment' is undefined
I am not understanding where I'm wrong.
If you need the id of an asp.net control you can use <%= btnSubmitComment.ClientId %> which will be replaced by asp.net to btnSubmitComment's id, for example:
var btnSubmitComment = $('#<%= btnSubmitComment.ClientId %>')
will get btnSubmitComment as a jQuery object.
or using only jQuery:
var btnSubmitComment = $('[id$=btnSubmitComment]');
var id = btnSubmitComment.attr('id');
I have a jquery function where upon clicking on a more link I display more information of a specified summary.
I am relatively new to jQuery and I was hoping for a pointer as to where I am going wrong as it is not working as it is.
$(document).ready(function () {
$('#more').on("click", function () {
"$('#more').hide(); $('#content').show();"
});
});
This is my C# code on code behind
topicGenerator.InnerHtml += summary.Substring(1, 100);
topicGenerator.InnerHtml += "<a href='#' id='more'> more...</a>";
topicGenerator.InnerHtml += "<div id='content' style='display:none;'>"+summary+ </div>";
Kind regards
Try changing
"$('#more').hide(); $('#content').show();"
to
$('#more').hide();
$('#content').show();
You don't need to wrap these statements in "quotations".
You could also condense .hide() and .show() into .toggle():
<script>
$(function(){
$("#more").click(function(){
$("#content").toggle();
});
});
</script>
See fiddle.
this will swap between show and hide and change the <a> to less then again more
$(document).ready(function () {
$('#more').click(function () {
$('#content').toggle();
if($('#more').html()=='more...'){
$('#more').html('less...');
}else{
if($('#more').html()=='less...'){
$('#more').html('more...');
}
}
});
});
I show modal popup window in default.aspx page so:
<a id="popup" href="../Popup/Keywords.aspx">edit</a>
Jquery function:
$(document).ready(function () {
$('a#popup').live('click', function (e) {
var page = $(this).attr("href")
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 450,
width: 'auto',
title: "Edit Employee",
buttons: {
"Close": function () { $dialog.dialog('close'); }
},
close: function (event, ui) {
__doPostBack('<%= grdReportKeywordsRefresh(report_id) %>', '');
}
});
$dialog.dialog('open');
e.preventDefault();
});
});
How to call "grdReportKeywordsRefresh" method with parameter "report_id" right?
Why controls of Default.aspx page are not displayed in popup window?
report_id:
private String r_id;
public Int32 report_id
{
get { return r_id != null ? Convert.ToInt32(r_id) : 0; }
set { r_id = value; }
}
grdReportKeywordsRefresh method:
protected void grdReportKeywordsRefresh(int report_id)
{
grdKeywords.DataSource = conn.GetKeywordsByRepId(report_id);
grdKeywords.DataBind();
}
People are right, you're mixing stuff :)
It should go like this:
<script type="text/javascript">
this is what you call:
__doPostBack('updateMyGrid', '')
</script>
in codebehind (using VB.NET, if you use C#, I'll change it)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack AndAlso Page.Request("__EVENTTARGET") = "updateMyGrid" Then
'rebind your grid here
End If
End Sub
c# (just frome head)
protected void Page_Load(object sender, EventArgs e) {
if(IsPostBack && Page.Request["__EVENTTARGET"] == "updateMyGrid") {
//rebind here
}
}
You're mixing client and server code.
You're also loading another page altogether into your pop-up, so it's not surprising it's not showing anything from default.aspx.
You could set a value in a hidden field when you close the pop-up, then force the postback & on the server, check if the hidden field value is set and call the function if it is.
Simon
Where is report_id defined? You cannot use variables that are set in javascript because server side code (<%= %>) gets executed when the page is rendered by the server.