Call a codebehind function from a javascript method - javascript

I am trying to call a codebehind function with javascript. I need to make some operations with my gridview.
Here is my javascript:
function hideColumn() {
var gridrows = $("#GridViewHdcvi tbody tr");
AddTeklif.RemoveTextBoxes();
for (var i = 0; i < gridrows.length; i++) {
gridrows[i].cells[5].style.display = "none";
}
return false;
};
And my codebehind:
[WebMethod]
public static void RemoveTextBoxes()
{
foreach (GridViewRow row in GridViewHdcvi.Rows)
{
TextBox txb = (TextBox)row.FindControl("txtAdet");
string adet = txb.Text;
txb.Visible = false;
Label lbl = (Label)row.FindControl("LblAdet");
lbl.Text = adet+" $";
}
}
I have an error like 'An object reference is required for the non-static field,method, or property CRM.AddTeklif.GridViewHdcvi' in 'GridViewHdcvi.Rows'. When I make method's name 'public void RemoveTextBoxes()' error gone but method doesn't working since it is not static.

It seems that you are mixing two different concepts. JavaScript is run from the browser and will not have any access to your server code. What you are doing here is attempting to call a WebMethod when your page is Rendered to be sent to the browser.
A better approach would be to convert your RemoveTextBoxes method to jQuery as what you are wanting to do is modify the DOM.

This is how you would call your JavaScript function hideColumn() from a code behind.
Put this in the method where you want to call your javascript function.
Page.ClientScript.RegisterStartupScript(this.GetType(), "hideColumn", "hideColumn(;", true);
To call a codebehind from a javascript function you have to play some tricks.
1.) create a hidden button control. You have to hide it within the CssClass
<asp:Button ID="hdnButton" runat="server" CssClass="hidden" />
.hidden {
display: none;
}
2.) Create a click hdnButton method in your code behind
3.) Call the hidden button click event from your javascript
function CallCodeBehind() {
document.getElementById('<%= hdnButton.ClientID%>').click();
}

Related

ajaxcontroltoolkit CascadingDropDown call method when control populated

I have a CascadingDropDown control in my page. I want to do some jquery actions when the dropdown is populated. according to the documentation , there is a event called (populated) for that purpose.
I added that code in my page:
function raise_populated() {
alert()
}
and here is how i use the dropdown
<asp:DropDownList ID="listcat" runat="server" required></asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="cdlisteCategorie" TargetControlID="listcat" PromptText='Catégories'
ServicePath="../Webservice/CategorieService.asmx" ServiceMethod="GetCategories" Category="IDCATS" runat="server" LoadingText="Chargement..."></ajaxToolkit:CascadingDropDown>
the raise_populated never fires.
I've found the solution here
function pageLoad(sender, args)
{
var cdd = $find("behaviorIDofCDD");
cdd.add_populated(onPopulated);
}
function onPopulated()
{
//any function to be called
}

Add data to bootstrap modal

I have a problem here with bootstrap modals, so in back-end of my app I pull out data from SQL, and I call a JS function like this:
ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowPopup",
"MailLanguageChange('" + Description + "','" + TextResult + "');", true);
And JS looks like this :
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
}
So firebug hits break point at this function, so I am sure call of function does work, but here comes the problem, JS is trying to apply this data onto the modal, before all elements of modal are loaded.
But as I use this modal for multiple purpuses ... is there anyway to write it down, "Don't do anything until modal is shown"?
$('#MainContent_NewMailTemplate').modal('show');
As docs says, it returns to the caller before the modal has actually been shown ... how can i by pass that?
EDIT :
This is how I have also tried it
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
});
}
CONCLUSION :
With use of logic of global variables provided by #Guruprasad Rao
I ended up just simply using
$(document).ready(function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});
Thank you
Use twitter-bootstrap's shown.bs.modal method as below:
$("#yourmodalid").on('shown.bs.modal',function(){
//Do whatever you want here
});
There are several other events to look into regarding modal
Update
see you are showing the modal first and then you are registering that event.. So I would suggest you below steps.
Declare 2 global variables at the top in js page.
Ex
var name,text;
Assign them values inside your function MailLanguageChange.
Ex
function MailLanguageChange(Name, Text) {
name=Name;
text=Text;
$('#MainContent_NewMailTemplate').modal('show');
}
Keep shown.bs.modal event somewhere outside the above function
Ex
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});

Client side event that fires after ASPxClientGridView.ApplyFilter performs its work

This link explains how to handle it on the server side via the ASPxGridView.AfterPerformCallback event:
http://www.devexpress.com/Support/Center/p/Q274366.aspx
How can I handle it on the client side?
I am working on a custom server control and I have this client side function on my control:
applyFilterToGridView: function () {
this.theGridView.ApplyFilter(this.filterCondition);
this.filterAppliedEvent();
}
Because ApplyFilter does a callback, this.filterAppliedEvent() is not called at the right time which should be after the filtering is complete. this.filterAppliedEvent() is a client side function.
This event is fired after the filter is applied:
protected void theGridView_AfterPerformCallback(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewAfterPerformCallbackEventArgs e)
{
if (e.CallbackName == "APPLYFILTER")
{
}
}
Is there some way to to tell the client to call filterAppliedEvent from the AfterPerformCallback event?
I would prefer to be able to run this.filterAppliedEvent() after AfterPerformCallback on the client side if possible.
Thanks in advance.
EDIT ( Solution thanks to Filip ):
C#:
protected void theGridView_AfterPerformCallback(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewAfterPerformCallbackEventArgs e)
{
if (e.CallbackName == "APPLYFILTER")
{
ASPxGridView gv = sender as ASPxGridView;
gv.JSProperties["cp_FilterApplied"] = "true";
gv.JSProperties["cp_VisibleRowCount"] = gv.VisibleRowCount;
}
}
theGridView.ClientSideEvents.EndCallback = "function(s,e){"theGridView.theGridView_OnEndCallback(s, e);}";
JS:
theGridView_OnEndCallback: function (s, e) {
if (s.cp_FilterApplied) {
if (s.cp_FilterApplied.indexOf('true') != -1) {
this.adjustGridViewSize();/*Uses visible row count.*/
delete s.cp_FilterApplied;
}
}
}
In theGridView_AfterPerformCallback add entry to JSProperties collection, e.g. cp_FilterApplied.
Add EndCallback client side event handler.
In EndCallback handler execute this.filterAppliedEvent() if cp_FilterApplied exists.
Delete that property so that subsequent callback doesn't execute filterAppliedEvent method.
Look at my answer to this question for code example.
It's really the same problem, just set js property in theGridView_AfterPerformCallback instead of ASPxGridView1_RowUpdated and adjust names/js code to your needs.

how to retrieve property value in js file?

I am creating one asp page. In that page i defined one property like below
.cs
private long _sequence;
public long Sequence { get { return _sequence; } set { _sequence = value; } }
Now i want to retrieve this property value in js file. Actually i can retrieve it in .aspx but i want it in .js file.
here is my js function and .aspx code which i am trying but it could not find property value
.aspx
<asp:Button ID="btnShowSimple" runat="server" Text="Notes Dialog" OnClientClick="NotesDialog(this)" />
.js
function NotesDialog(ctr) {
var ControlName = document.getElementById(ctr.id);
$("#btnShowSimple").click(function (e) {
ShowDialog(false);
e.preventDefault();
LoadData("GetNotes", '"sequence":<%= this.Sequence %>');
});
}
Anything I am missing?? If anyone have any idea about it than please help me..I am facing this problem since two days..
Your js files are static files on the server. You cannot use those <%= %> tags in them.
You could pass the property via a global javascript variable, that you set in your aspx page and use in your js file.
i.e.
.aspx
<script type="text/javascript">
myProp = <%= this.Sequence %>;
</script>
.js
function NotesDialog(ctr) {
var ControlName = document.getElementById(ctr.id);
$("#btnShowSimple").click(function (e) {
ShowDialog(false);
e.preventDefault();
LoadData("GetNotes", '"sequence":' + myProp);
});
}
Nope you cannot do this in JS file as it is not processed by asp.net runtime. The best you can do is declare a variable in aspx and use it in js like:
aspx:
var _seq="<%= this.Sequence %>";
JS:
LoadData("GetNotes", '"sequence":' + _seq); //USE ASPX VARIABLE
You should try to separate you JavaScript code from you HTML.
Instead och creating a asp:Button use an HTML button and set an data-attribute you can retrive.
<button type="button" id="btnShowSimple" data-sequence="<%= this.Sequence %>">Notes Dialog</button>
And in your javascript-file bind an click event to your button that picks up the data-sequence.
/** Put this in the bottom of you javascript file **/
(function (window) {
var document = window.document,
view;
view = {
/**
* Invoked in jQuery event context
* #param e
*/
bindClickEvent : function (e) {
$("#btnShowSimple").click(function (e) {
e.preventDefault();
var sequence = $(this).data('sequence');
ShowDialog(false);
LoadData("GetNotes", '"sequence":' + sequence);
});
}
}
$(document).ready(view.bindClickEvent);
} (window));
From your current code you when you click the asp:Button you just bind a new click event and never execute it.
Also from some of the other answer, you should NEVER declare arbitrary global variables in JavaScript

showing an asp:ModalPopupExtender using jQuery

I am trying to show an asp:ModalPopupExtender using jQuery, without any success. Here is what I have :
ASP.NET
<asp:ModalPopupExtender BehaviorID="confirmPopup" ID="confirmPopup" runat="server" />
JAVASCRIPT
function ShowConfirmPopup() {
var _id = '#<%= confirmPopup.ClientID %>';
var modal = $find(_id);
modal.show();
}
What happens is that modal is always equal to null, so the popup never gets shown. What am I doing wrong?
$find() is not part of jQuery, but of ASP.NET AJAX. Therefore, you should not prefix the behavior id with a hash sign:
function ShowConfirmPopup()
{
var modal = $find("confirmPopup");
modal.show();
}

Categories

Resources