Jquery Load aspx into ascx - Rating not selectable

9 posts, 1 answers
  1. Dan Ehrmann
    Dan Ehrmann avatar
    152 posts
    Member since:
    Jul 2004

    Posted 19 Dec 2013 Link to this post

    Before I begin, it's quite possible that my implementation is wrong, so be gentle. I'm loading an aspx on top of  an ascx using jquery load. The aspx page contains the Ratings. When the aspx is loaded onto the ascx, the stars are basically dead and cannot be selected. However, if I open the page by itself, the ratings appears to work fine and the stars can be selected. The stars follow the cursor, etc.

    The stars do appear when the aspx is loaded - so I can only assume its an ajax manager conflict or something to do with the script manager.

    Here's the aspx file. Non pertinent stuff has been removed.
    ---------------------------
    <body>
        <form runat="server">
        <Telerik:RadScriptManager ID="ScriptManager1" runat="server"/>
            <div>
                <!--BEGIN RATINGS -->
                <div id="rating_div" runat="server">
                    <div id='rating_<%# _documentId %>' >
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                              <td class="field-label" style="white-space:nowrap;">Your Rating</td>
                                <td style="width:110px;white-space:nowrap;">
                                    <ajax:RadRating ID="your_rating" ItemCount="5" Precision="Half" ReadOnly="false" Value="<%# _memberDocumentRating %>" SelectionMode="Continuous" OnClientRated="documentRated" DocumentID="<%# _documentId %>" runat="server" />
                                   </td>
                                   <td align="right" class="content-text" style="white-space:nowrap;">Overall Rating</td>
                                    <td valign="bottom" style="white-space:nowrap;">
                                    <ajax:RadRating ID="overall_rating" ItemCount="5" Precision="Half" ReadOnly="true" Value="<%# _overallDocumentRating %>" SelectionMode="Continuous" runat="server" />
                                        </td>
                                        <td style="white-space:nowrap;">
                                            <%# "(" + _overallDocumentRating.ToString("f") + "--" + _documentRatingCount + " ratings)" %>
                                        </td>
                            </tr>
                        </table>
                        </div>
                </div>
                <!--END RATINGS -->
                </div>
        </div>
        <ajax:RadAjaxManager id="ajax_manager" EnableEmbeddedScripts="true" OnAjaxRequest="ajax_manager_AjaxRequest" runat="server"/>
        </form>
    </body>

    ---------------------
    The ascx file has no ajax managers, or telerik controls in place. Does it need them?


  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 23 Dec 2013 Link to this post

    Hi Dan,

    By investigating the provided code I can determine that the second RadRating control is not selectable because it is set in the markup with the ReadOnly="true" property, which configures the control to be in a read-only state and the user cannot select further the value of this rating.

    The first rating has an attached method to the OnClientRated event, which does not exist in the provided markup. Note that when a JavaScript method is used with an event and it is not implemented, this control will be rendered, but because of the thrown JS error and the missing function, it will not behave as expected. I suggest verifying that this function exist in the document object and use it properly. If you do not need such event you can just remove the set attribute.

    If I am somehow mislead on the occurred problems, please get back to me with a simple project, which isolates the problem, so that I could investigate it on my end.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan Ehrmann
    Dan Ehrmann avatar
    152 posts
    Member since:
    Jul 2004

    Posted 23 Dec 2013 Link to this post

    Lanko,

    Thanks for the response.
    I neglected to send the script block in the previous email. The second ID overall_rating is set to read-only, as it is meant for display of the calculated rating. That behaves as expected.  In fact, both ratings behave as expected when loaded on their own as an aspx file. However, when they are loaded via ajax - jquery load() into an ascx - I encounter the problem.

    For the sake of conversation, here's the markup with the OnClientRated method. It will take some time to simplify the project, but I'll get to work on it.

    <body>
        <form runat="server">
        <Telerik:RadScriptManager ID="ScriptManager1" runat="server"/>
            <div>
                <!--BEGIN RATINGS -->
                <div id="rating_div" runat="server">
                    <div id='rating_<%# _documentId %>' >
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                              <td class="field-label" style="white-space:nowrap;">Your Rating</td>
                                <td style="width:110px;white-space:nowrap;">
                                    <ajax:RadRating ID="your_rating" ItemCount="5" Precision="Half" ReadOnly="false" Value="<%# _memberDocumentRating %>" SelectionMode="Continuous" OnClientRated="documentRated" DocumentID="<%# _documentId %>" runat="server" />
                                   </td>
                                   <td align="right" class="content-text" style="white-space:nowrap;">Overall Rating</td>
                                    <td valign="bottom" style="white-space:nowrap;">
                                    <ajax:RadRating ID="overall_rating" ItemCount="5" Precision="Half" ReadOnly="true" Value="<%# _overallDocumentRating %>" SelectionMode="Continuous" runat="server" />
                                        </td>
                                        <td style="white-space:nowrap;">
                                            <%# "(" + _overallDocumentRating.ToString("f") + "--" + _documentRatingCount + " ratings)" %>
                                        </td>
                            </tr>
                        </table>
                        </div>
                </div>
                <!--END RATINGS -->
                </div>
        </div>
        <ajax:RadAjaxManager id="ajax_manager" EnableEmbeddedScripts="true" OnAjaxRequest="ajax_manager_AjaxRequest" runat="server"/>
        </form>
    </body>
    <script>
        var splitCharacter = "<%= SplitCharacter %>";
        function documentRated(sender, args){
            var ajaxManager = <%= ajax_manager.ClientID %>;
            var parameters = getRequestParameterString("<%= UpdateRating %>", sender.get_element().getAttribute("DocumentID"), sender.get_value());
            ajaxManager.ajaxRequest(parameters);
        }
            // getRequestParameterString
        function getRequestParameterString(action, parameter1, parameter2) {
            return action + splitCharacter + parameter1 + splitCharacter + parameter2;
        }
     
        </script>


  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Dec 2013 Link to this post

    Hi Dan,

    The provided code is not runnable on my end. There are many Server-side declarations that I am unable to find in the provided code and they appear wrong on my end.

    I can only make assumptions about the expected behavior of the implemented logic and I am unable to determine the use of some approaches and configurations. For example I am not aware what is the use of the documentid attribute in the RadRating control, the implemented approach to get the AJAX manager's object is not correctly set it should like this one:
    var ajaxManager = $find("<%= ajax_manager.ClientID %>");

    Currently I am unable to provide a firm answer or a possible solution, because I am unable to determine what is the origin of the problem. 

    Please provide a simple runnable project, more details about the requirements and specific details about the expected behavior of the RadRating control that is implemented in a user control.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Dan Ehrmann
    Dan Ehrmann avatar
    152 posts
    Member since:
    Jul 2004

    Posted 26 Dec 2013 Link to this post

    Lanko,

    Thanks for the continued support. I've created a small facsimile project. It exceeds the file size to attach to this thread, so I've hosted it here:

    Load ratings / Jquery

    If you load the details.aspx page itself, the ratings are selectable and the stars follow the pointer as you hover over them.

    However, if you open loader.aspx and click the "click here to load ratings" link - the ratings appear but are not selectable and do not follow the pointer. The function call to "documentRated" does not occur, etc.

    Although its unnecessary, I have included all the css I have been using in the files in the event they are causing an issue.

    Please let me know if you have any questions or need anything else.
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 Dec 2013 Link to this post

    Hi Dan,

    The provided project is not runnable on my end due to multiple errors regarding missing Server-side attributes, properties and declarations. Note that the provided project is a code library instead of a proper site or application.

    On a side note, investigating the code I found that there is no DOCTYPE registration, because of that the IE would be set to quirks mode and the application will not behave as expected. The IE quirks mode is not officially supported and id the issues are related to this mode, I would suggest setting a proper HTML markup that does work under the default render modes of the browsers.

    If you want further assistance, please try isolating the problem in a simple example project, which could be locally runnable, so that I could be able to examine it properly and correspondingly assist you.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Dan Ehrmann
    Dan Ehrmann avatar
    152 posts
    Member since:
    Jul 2004

    Posted 27 Dec 2013 Link to this post

    I asked a co-worker to try the test project. It worked without any fuss. All he did was copy the files into a folder, create an IIS web site pointing to the folder, and run the site (the url was http://localhost:8080/loader.aspx). No errors.

    What specifically are you seeing? What errors?

    The doctype was accidentally omitted - our actual site uses "<!DOCTYPE html>"

    All of our projects are code libraries - that has nothing to do with being able to run the project as a web site.
  9. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 02 Jan 2014 Link to this post

    Hello Dan,

    I managed to run the sample that you provided and I was able to reproduce the behavior that you observed. Unfortunately this behavior is expected, as the jQuery load method will break the normal Webforms application cycle. As a result the UI will be loaded, but it will not function correctly, as the control's initialization has not taken place.
    There are two approaches that you may wish to follow. One is to make sure that the client-side workflow is initialized. This can be done by making sure the Sys.Application.initialize() method is run when the content is loaded, i.e. in the complete callback method:
    Sys.Application.initialize();
    $(this).show();
    The second approach is to have the pure Webforms approach using UpdatePanels. Here is an article on the topic - http://msdn.microsoft.com/en-us/library/bb398890(v=vs.100).aspx. Furthermore you may wish to use the RadAjaxPanel - http://www.telerik.com/help/aspnet-ajax/ajax-ajaxpanel.html.

    Hope this helps.

    Regards,
    Niko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Dan Ehrmann
    Dan Ehrmann avatar
    152 posts
    Member since:
    Jul 2004

    Posted 02 Jan 2014 Link to this post

    Calling Sys.Application.initialize() did the trick for us - thanx for your help.

    FYI - we also had success by using an iframe loaded with our aspx. However, I think we will stick with our original plan of loading it into a div and using your solution
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017