I have master page with custom button control. I have one javascript function in master page. When i try to call this javascript function with in custom control code behind its not invoking. pls check below code.
Javascript code in master page
function loader()
{
//Note: ctl00_loader is master page control.
document.getElementById('ctl00_loader')="X";
}
Mycustom control is
<Shri:ConfirmBtn ID="UsrBtn" runat="server">
Code-behind code is
Protected Sub UsrBtn_ConfirmClick(ByVal sender As Object, ByVal e As
System.EventArgs) Handles UsrBtn.ConfirmClick
ClientScript.RegisterStartupScript(GetType(String), "MyCode1", "<Script
Language=Javascript>loader();</script>")
End sub
code behind line is working fine in page loading time. but when i place it custom control click (UsrBtn_ConfirmClick) inside its not loading. how to solve this one? any idea please.
Use jQuery:
In the header of your html page:
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
Then capture the button click
$("#<%=UsrBtn.ClientID%>").bind("ConfirmClick", function () {
// Do whatever you need here ....
});
To debug code embedded in the page add the keyword debugger; like so:
$("#<%=UsrBtn.ClientID%>").bind("ConfirmClick", function () {
// Do whatever you need here ....
debugger;
});
This will force the IDE to stop on that line then you can use the F10 key to step through the code like you would in the code behind.
Related
Background
I have a client-side button click that triggers a server-side function. Before the server side function is called, a loading panel is displayed (div).
The loading panel needs to be removed once the server-side function has completed.
My Solution
After the server-side function is complete I will call a JavaScript function that will remove the div. So as a test i'm calling an alert script. I'm trying to do this from the master page.
Client-Side Code
My PopUp Function
<script>
function PopUp() {
debugger;
alert('TEST');
}
</script>
My Script Manager
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Server-Side Code
My Call after server side functions have completed.
//Add the script after <form> tag
bool isClientScriptBlockRegistered = ClientScript.IsClientScriptBlockRegistered("ShowStatus");
if (!isClientScriptBlockRegistered)
{
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ShowStatus", "PopUp();", true);
}
Problem
My script isn't called by the server. No alert window is created. When I try to do this from any page other that the master page it works. However on the master page it does not.
Questions
Is there something I'm missing?
Does there need to be a callback or some kind of refreshing of the page for the alert to appear, or can the server just call the script without any action from the client?
Change
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ShowStatus", "PopUp();", true);
into
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ShowStatus", "setTimeout(function () { PopUp(); }, 10);", true);
or into
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ShowStatus", "PopUp();", true);
RegisterClientScriptBlock adds the JavaScript code at the top of the page just after the ViewState tag while RegisterClientScriptBlock adds it to the bottom. So if you use RegisterClientScriptBlock and your PopUp() is somewhere lower on the page you'll get an error.
Or by setting a setTimeout you ensure that all the contents is generated and then PopUp() will also be found even is the script block is at the top.
I recently added a feature to our ASP.NET MVC web application. There's a page that is displayed when the user clicks on an item in a table. The page uses AJAX to display a partial view in a single div in the page's HTML. The partial view uses the Telerik Kendo UI to define and display dialogs and DropDownList controls. This is complicated in that the JavaScript imports are all on the View for the page, while the PartialView just builds the HTML to be displayed in the div.
The JavaScript I wrote on the page includes a jQuery document.ready event handler:
$(document).ready(
function () {
if ( $('#details-map').val() != '' )
$('#details-map').remove();
var urlTail = '?t=' + (new Date().getTime());
// Make the AJAX call and load the result into the details box.
$('#detailsbox').load('<%= Url.Action("Details") %>' + '/' + '<%: Model.Id %>' + urlTail, displayDetails);
}
)
This works fine when I run the application on my localhost. The problem appears when I deploy the page to our development server. In this case, there's an additional document.ready event handler that's emitted to very end of the page by the Telerik Kendo / ASP.net MVC extensions:
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if(!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo=...;
});
//]]>
</script>
On this page, the $(document).ready event handler I wrote runs before the Telerik handler, and my code clearly depends on the Telerik handler running first. When mine runs first, I get a JavaScript error that says "jQuery.telerik.load is not a function'.
Since this does not happen on my localhost, how do I make sure that the second document ready event handler is run first?
Edit:
After more research, I've found that the problem is that the two scripts mentioned in my answer, which are supposed to be written to the page via the following line in the Master Page used by my page:
<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(false).Compress(false)) %>
Are not being loaded. In other words, the above line does nothing. It works on another page that uses the same Master Page, though. I've placed a breakpoint on the line and it is executing. Does anyone have any ideas?
You're either going to have to make it show up after the second one on the page OR do something I hate to suggest:
$(document).ready(function() {
function init {
/* all your code that needs to be run after telerik is loaded */
}
if ( $.telerik ) {
init();
} else {
setTimeout(function check4telerik() {
if ( $.telerik ) {
return init();
}
setTimeout(check4telerik, 0);
}, 0);
}
});
So, if $.telerik is loaded, it runs, otherwise it polls until it's set, and when it is set, it runs the code. It's not pretty, but if you don't have more control, it's probably your only option, unless $.telerik emits some kind of event that you can hook into.
After spending a few hours working on this, I finally got it to work. The problem turned out to be that two JavaScript files that are used by the Telerik DropdownList control and Window control were not being loaded.
In spelunking through the JavaScript on the page, I came across this script that was generated by Telerik:
if(!jQuery.telerik){
jQuery.ajax({
url:"/Scripts/2011.3.1306/telerik.common.min.js",
dataType:"script",
cache:false,
success:function(){
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}});}else{
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}
This script was emitted by a call to Html.Telerik.DropdownListFor() in my partial view. I'm guessing that the code to include for the two JavaScript files mentioned in the code, telerik.common.min.js and telerik.list.min.js, was not emitted since the call was on a partial view. Or I was supposed to include them all along & didn't know it (I'm very new to these controls). Oddly, everything worked when I ran it locally, so I don't get it.
In any case, I added two <script> tags to my View to include these files and everything started working. That is, I added the following tags to my page:
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.common.min.js"></script>
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.list.min.js"></script>
Live and learn.
I have used a user control to get data from database and render it as MegaMenu anchors.
In code-behind file I have got data and rendered it by using a literal.
The megamenu.js file (containging myMega.Init method) has been inserted into header element
I have added following script tag into .ascx file.
<script type="text/javascript">
myMega.Init("mer_id", "anchor_id", "click");
</script>
I have several .aspx files which have same master page. The master page registers the User Control and contains following tag exact before .
<uc:MegaMenu id="anchors" runat="server"></uc:MegaMenu>
the problem is the myMega.Init only invokes when I go to firstpage.aspx. I have debugged by hitting f12 and choosing debugg Script. the init file invokes only first time (firstpage) not other pages. thank you for your help.
are mer_id and anchor_id elements' ids and what .Init does?
If you use jquery library you could put your code in ready event
<script type="text/javascript">
$(function() {
myMega.Init("mer_id", "anchor_id", "click");
});
</script>
With Client Object Model API and a bit of javascript, I want to retrieve the items of a sharepoint list and display them into the web page, when the web page loads.
I've successfully implemented examples working with button or link click event handler. But when I try to use the code with onload I get an error.
Assuming I've my ViewItem() function defined in the head.
If I use this code in the body:
<a onclick="javascript:ViewItem()">View</a>
all is fine.
If I try with classic onlaod, the call fails:
<script type="text/javascript">
window.onload = ViewItem ;
</script>
The line of code in ViewItem function which generates the error is as follows:
var myContext = new SP.ClientContext.get_current();
This code works fine with the onclick event handler, but fails with the onload event handler with error:
SP.ClientContext is null or not an object
How can I solve this issue? Why it happens only when the function is called with onload?
You have to wait for all SharePoint script to be ready:
ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
If you also use jQuery, I use to do:
$(function(){
ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
});
My problem is that, I want to call a code behind function from a JS. So that I can implement TextBox on Click event. I am NEW in JS so bear with me on this one...What I heard is that from the client side scripting you cannot call anything to the server (code behind). Here is my code:
<script type="text/javascript">
function callCodeBehind() {
<% txtAgentName_TextChanged(); %>
}
</script>
This is my Textbox:
<asp:TextBox ID="txtAgentName" runat="server" Onclick = "callCodeBehind()"></asp:TextBox>
This is my code behind:
protected void txtAgentName_TextChanged()
{
}
This function is getting fired on Page_Load(), which I don't want it to.
All I want is that to call this function txtAgentName_TextChanged() when user clicks on txtAgentName textbox.
Help!
For simplicity, you can use page methods. Check below articles for exact instructions.
Using Page Methods in ASP.NET AJAX
Using jQuery to directly call ASP.NET AJAX page methods
I think what you are looking for is AJAX. Check out the sample in the link.
You CAN call code behind from server using AJAX and jQuery library, just google it. e.g.
http://blogs.sitepoint.com/ajax-jquery/
A second issue is that the btn.click() will not work cross-browser.
you can insert a code behind method like this:
<% method(); &>