RadAjaxManager and JQuery

4 posts, 0 answers
  1. MARIANO
    MARIANO  avatar
    8 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2014 Link to this post

    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.
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 07 Mar 2014 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. MARIANO
    MARIANO  avatar
    8 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2014 in reply to Vasil Link to this post

    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;
        }
    }
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 12 Mar 2014 Link to this post

    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.

     
Back to Top