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

RadAjaxManager and JQuery

3 Answers 82 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
MARIANO
Top achievements
Rank 1
MARIANO asked on 07 Mar 2014, 03:10 PM
Hello everyone.

I've one javascript file(js) with some methods... 

i'm using one Radgrid with update, insert and delete and for this i need to use radajaxmanager.

But, when i use the radajaxmanager the jquery stop working...

Can someone help with this?

Thanks.

3 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 07 Mar 2014, 03:37 PM
Hi Mariano,

The provided information is not enough for us to identify the issue.

Lots of our controls are using jQuery internally, and you could see that they are working correct in our demos with enabled Ajax on the pages.

Please provide us more details about your case, we will try to reproduce it here.

Regards,
Vasil
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

0
MARIANO
Top achievements
Rank 1
answered on 07 Mar 2014, 03:50 PM
Hello Vasil.

Here is my ASPX:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CadEdit_Bairros.aspx.cs" Inherits="SWM.Web.UI.Cadastro.CadEdit_Bairros" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../Content/Style/controles.css" rel="stylesheet" />
    <script type="text/javascript" src="../Content/Script/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../Content/Script/Cadastro/CadEdit_Bairros.js"></script>
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="formscreen">      
        <h1>
            Cadastro/Edição de Bairros
        </h1>
        <div class="groupform">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <ajaxsettings>
                    <telerik:AjaxSetting AjaxControlID="rgBairros">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgBairros" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </ajaxsettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" AnimationDuration="10" BorderStyle="Solid" Skin="Metro" />
 
            <telerik:RadWindowManager ID="rwmGerenciador" runat="server" EnableShadow="true"></telerik:RadWindowManager>                 
            <h3>
                Bairros
            </h3>
            <br />
            <telerik:RadGrid
                    ID="rgBairros" 
                    Name="rgBairros"
                    runat="server"
                    Culture="pt-BR"
                    AutoGenerateColumns="false"
                    AllowMultiRowSelection="false"
                    OnNeedDataSource="rgBairros_NeedDataSource"
                    OnItemDataBound="rgBairros_ItemDataBound"
                    OnUpdateCommand="rgBairros_UpdateCommand"
                    OnDeleteCommand="rgBairros_DeleteCommand"
                    OnInsertCommand="rgBairros_InsertCommand"
                    AllowAutomaticInserts="false"
                    AllowPaging="true"
                    PageSize="20"
                    ShowStatusBar="false" >
                    <GroupingSettings casesensitive="false" />
                    <MasterTableView
                        CommandItemDisplay="Top"
                        ShowHeadersWhenNoRecords="true"
                        CommandItemStyle-CssClass="radgrid-header"
                        NoMasterRecordsText = "Não existe dados cadastrados"
                        AllowFilteringByColumn="true"
                        DataKeyNames="ID"
                        CommandItemSettings-RefreshText="Atualizar"
                        CommandItemSettings-AddNewRecordText="Adicionar" >
                    <Columns>
                        <%--Coluna Descrição--%>
                        <telerik:GridTemplateColumn
                            HeaderText="Descrição"
                            DataField="Descricao"
                            UniqueName="Descricao" >
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Descricao")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox
                                    ID="txtDescricao"
                                    runat="server"
                                    Width="400px" >
                                </telerik:RadTextBox>
                                <asp:RequiredFieldValidator
                                    ID="rfvDescricao"
                                    runat="server"
                                    ForeColor="Red"
                                    ErrorMessage=" *Campo obrigatório"
                                    ControlToValidate="txtDescricao" >
                                </asp:RequiredFieldValidator>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
 
                        <%--Coluna Município--%>
                        <telerik:GridTemplateColumn
                            HeaderText="UF"
                            DataField="ID"
                            UniqueName="ID"
                            Visible ="false">
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "ID")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:DropDownList
                                    ID="ddlUF"
                                    runat="server"
                                    Width="400px" >
                                </asp:DropDownList>
                                <asp:CustomValidator
                                    ID="cfvUF"
                                    runat="server"
                                    ForeColor="Red"
                                    ErrorMessage=" *Campo obrigatório" 
                                    ClientValidationFunction="ValidaDdlUF" >
                                </asp:CustomValidator>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
                         
                         <%--Coluna Município--%>
                        <telerik:GridTemplateColumn
                            HeaderText="Municipio"
                            DataField="Municipio.ID"
                            UniqueName="Municipio.ID"
                            Visible ="false">
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Municipio.ID")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:DropDownList
                                    ID="ddlMunicipio"
                                    runat="server"
                                    Width="400px" >
                                </asp:DropDownList>
                                <asp:CustomValidator
                                    ID="cfvMunicipio"
                                    runat="server"
                                    ForeColor="Red"
                                    ErrorMessage=" *Campo obrigatório" 
                                    ClientValidationFunction="ValidaDdlMunicipio" >
                                </asp:CustomValidator>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
 
                        <%--Coluna Botão Editar--%>
                        <telerik:GridButtonColumn
                            HeaderText="Editar"
                            ButtonType="ImageButton"
                            Text="Editar"
                            CommandName="Edit"
                            ImageUrl="~/Images/bt-edit.png"
                            ItemStyle-HorizontalAlign="Center"
                                                ItemStyle-Width="8px" />
                         
                        <%--Coluna Botão Excluir--%>
                        <telerik:GridButtonColumn
                            HeaderText="Excluir"
                            ButtonType="ImageButton"
                            Text="Excluir"
                            HeaderStyle-Width="40"
                            CommandName="Delete"
                            ConfirmText="Tem certeza que deseja excluir o registro?"
                            ItemStyle-HorizontalAlign="Center"
                            ItemStyle-Width="8px"
                            ImageUrl="~/Images/bt-del.png" />
                    </Columns>                        
 
                    <%--Configurações gerais do modo de edição--%>
                    <EditFormSettings ColumnNumber="2" >
                        <FormTableItemStyle Wrap="False" />
                        <FormCaptionStyle CssClass="EditFormHeader" />
                        <FormMainTableStyle
                            GridLines="None"
                            CellSpacing="0"
                            CellPadding="3"
                            BackColor="White"
                                        Width="100%" />
                        <FormTableStyle
                            CellSpacing="0"
                            CellPadding="2"
                            Height="110px"
                            BackColor="White" />
                        <FormTableAlternatingItemStyle Wrap="False" />
                        <EditColumn
                            ButtonType="ImageButton"
                            InsertText="Inserir"
                            UpdateText="Atualizar"
                            UniqueName="EditCommandColumn1"
                            CancelText="Cancelar"
                            UpdateImageUrl="~/Images/bt-update.png"
                            InsertImageURL="~/Images/bt-include.png"
                            CancelImageUrl="~/Images/bt-incl-cancel.png" >
                        </EditColumn>
                        <FormTableButtonRowStyle
                            HorizontalAlign="Right"
                            CssClass="EditFormButtonRow">
                        </FormTableButtonRowStyle>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
    </div>
</asp:Content>


My JS:

$(document).ready(function () {
    //Encontra o ID do DropDownList de UF
    var idDdlUF = "#" + $("[id$='ddlUF']").attr("id");
 
    //Evento é chamado quando o valor do DropDownList UF é modificado
    $(idDdlUF).change(function () {
        //Verifica o valor do DropDownList de UF
        var idUF = $(this).val();
 
        //Tenta carregar o DropDownList de Municipio de acordo com o UF escolhido
        $.ajax({
            type: "Post",
            url: "CadEdit_Bairros.aspx/CarregarDropDownListMunicipio",
            data: "{'idUF': '" + idUF + "'}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                //Deserializa o retorno do JSON
                var itens = $.parseJSON(data.d);
 
                //Limpa o DropDownList de Município
                var idDdlMunicipio = "#" + $("[id$='ddlMunicipio']").attr("id");
                $(idDdlMunicipio).empty();
 
                //Carrega o DropDownList de Município
                $.each(itens, function () {
                    $(idDdlMunicipio).append("<option value='" + this.ID + "'>" + this.Nome + "</option>");
                });
 
                $(idDdlMunicipio + ">option[value='0']").prop('selected', true);
            },
            error: function (data) {
                alert("Não foi possível carregar os municípios.");
            }
        });
    });
 
});
 
/************************************************************************************/
/* Validação dos campos                                                             */
/************************************************************************************/
//DropDownList de UF
function ValidaDdlUF(source, args) {
    if ($("[id$='ddlUF']").val() > 0) {
        args.IsValid = true;
    }
    else {
        args.IsValid = false;
    }
}
 
//DropDownList de Municipio
function ValidaDdlMunicipio(source, args) {
    if ($("[id$='ddlMunicipio']").val() > 0) {
        args.IsValid = true;
    }
    else {
        args.IsValid = false;
    }
}
0
Vasil
Telerik team
answered on 12 Mar 2014, 02:22 PM
Hello Mariano,

Use pageLoad instead of the document ready, to be sure that all server IScriptControls are created client side for executing your custom Ajax call. Also make sure you have enabled the script debugging in your browser and you don't see any JavaScript error in the page.
If you have doubts that the problem is in the RadAjaxManager, you can wrap the grid inside normal asp:UpdatePanel and see if it will behave differently.

Regards,
Vasil
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
Tags
Ajax
Asked by
MARIANO
Top achievements
Rank 1
Answers by
Vasil
Telerik team
MARIANO
Top achievements
Rank 1
Share this question
or