This is a migrated thread and some comments may be shown as answers.

Trigger jquery event after ajax in user control

1 Answer 196 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

ITS asked on 12 Mar 2015, 05:07 PM

Hi,
in few words the problem is:
when i am trying to use $.event.trigger after an ajax request made with RadAjaxManager I am not able to catch the fired event in user controls.
If i put the event handler in default.aspx there is no problem and the event is "catch" but in user control the hndler is never fired...

Here my code, any suggestions? Thank you in advance...

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

function onResponseEnd(sender, eventArgs) {

console.log("response end");

$.event.trigger({

type: "myEvent",

message: "event",

time: new Date()

});

}

</script>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ClientEvents OnResponseEnd="onResponseEnd"></ClientEvents>

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ButtonAddItem">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListViewClips" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadButton ID="ButtonAddItem" runat="server" Text="Add item" OnClick="OnRadButtonClick"></telerik:RadButton>

<telerik:RadListView ID="RadListViewClips" AllowPaging="True" runat="server" Visible="True" OnNeedDataSource="RadListViewClipsOnNeedDataSource"

allowsorting="true" ItemPlaceholderID="placeHolder" DataKeyNames="Id">

<%-- <ClientSettings>

<ClientEvents OnListViewCreated="test"></ClientEvents>

</ClientSettings>--%>

<LayoutTemplate

<div id="placeHolder" runat="server">

<ul></ul>

</div>

</LayoutTemplate>

<ItemTemplate>

<li>

<%# Eval("Name") %><uc1:WebUserControl1 runat="server" id="WebUserControl1" />

</li>

</ItemTemplate>

</telerik:RadListView>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

private List<ItemState> CurrentDockStates

{

get

{

//Store the info about the added docks in the session. For real life

// applications we recommend using database or other storage medium

// for persisting this information.

List<ItemState> currentDockStates = (List<ItemState>)Session["CurrentDockStatesMyPortal"];

if (Equals(currentDockStates, null))

{

currentDockStates = new List<ItemState>();

Session["CurrentDockStatesMyPortal"] = currentDockStates;

}

return currentDockStates;

}

set { Session["CurrentDockStatesMyPortal"] = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

RadListViewClips.DataSource = CurrentDockStates;

RadListViewClips.DataBind();

}

protected void RadListViewClipsOnNeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)

{

RecreateItems();

}

private void RecreateItems()

{

var source = CurrentDockStates;

RadListViewClips.DataSource = source;

}

protected void OnRadButtonClick(object sender, EventArgs e)

{

CurrentDockStates.Add(new ItemState

{

Name = "Prova",

Id = CurrentDockStates.Count

});

RadListViewClips.Rebind();

}

internal class ItemState

{

public string Name { get; set; }

public int Id { get; set; }

}

WebControl.ascx --- Here function myEventHandler is never Fired!!!

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="TelerikWebApp1.WebUserControl1" %>

<script>

$(document).on("myEvent", myEventHandler);

function myEventHandler(e) {

console.log("myEvent on: usercontrol");

}

</script>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Trigger jquery event after ajax in user control

1 Answer, 1 is accepted