This is a migrated thread and some comments may be shown as answers.
ScriptRegistrar creates two jQuery blocks in Razor view
4 Answers 191 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
King Wilder
Top achievements
Rank 2
King Wilder asked on 30 Apr 2011, 02:14 AM
I have a weird issue.  Here's my application specs:
  • ASP.NET MVC 3
  • Razor views
  • Telerik Extensions for Mvc version 2011.1.315.340

The issue renders double script blocks on partial Razor view.

Here's the ScriptRegistrar in my layout master:

    @(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)
    .Add("jquery.validate.js")
    .Add("jquery.validate.unobtrusive.js")
    .Add("pngfix.js")
    .Add("menu_ie.js")))
</body>
</html>

Here's the ScriptRegistrar with OnDocumentReady in my partial Razor view:

@(Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
    @<text>
        var passwordField = $("#PasswordText");
 
        $("#generate-password").click(function () {
 
            $.ajax({
                url: '@Url.Action("GeneratePassword", "Password")',
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    if (data.Success) {
                        passwordField.val(data.Message);
                    }
                }
            });
        });
    </text>
    ))

Here's the produced HTML source output:

<script type="text/javascript" src="/Scripts/2011.1.315/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
     
                    var passwordField = $("#PasswordText");
 
        $("#generate-password").click(function () {
 
            $.ajax({
                url: '/Password/GeneratePassword',
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    if (data.Success) {
                        passwordField.val(data.Message);
                    }
                }
            });
        });
     
});
//]]>
</script>
 
 
        </div>
 
        <div class="gap10">
        </div>
    </div>
 
    <!--/WRAPPER-->
 
    <script type="text/javascript" src="/asset.axd?id=9AAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Uevp3WxapuPRh-d82dL-uynf9E6r6-3d8f3x7vjn8Z31UePdn7JyP92fJmVxSxrc9tgd6jBellN2nrdFJeu8Z5pvFpenBfv7Of3zOeLfLn-_Qv3wv4v-f4v-f7oo2lL37X5u_buT2eXWcPIU4NL-nRvZ3eX8L23e58-mNII7316n3756BH1nf-S_ycAAP__oCxA8PQAAAA%3d"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
     
                    var passwordField = $("#PasswordText");
 
        $("#generate-password").click(function () {
 
            $.ajax({
                url: '/Password/GeneratePassword',
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    if (data.Success) {
                        passwordField.val(data.Message);
                    }
                }
            });
        });
     
});
//]]>
</script>
</body>
</html>

Any ideas why this is rendering twice?  It also seems to be affecting my results.

Any help is appreciated.

4 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 30 Apr 2011, 10:29 AM
Hello King Wilder,

 It is rendering twice because you are rendering it twice. The @(Html.Telerik().ScriptRegistrar()) syntax means "output a script registrar". You need to use @{ } in order to just declare a ScriptRegistrar in your partial view.

Kind regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
King Wilder
Top achievements
Rank 2
answered on 30 Apr 2011, 10:25 PM
Atanas,

That did the trick!  I guess I need to read up a bit more on the razor syntax.  :^)

Now I just have to figure out why I'm getting an "invalid label" from my ajax call.  It's always something.

Thanks.
0
King Wilder
Top achievements
Rank 2
answered on 30 Apr 2011, 10:40 PM
I know this is not related to this thread but it might help others, as I found the solution to the "invalid label" json error.

http://stackoverflow.com/questions/4886525/jquery-1-5-ajax-call-fails-with-invalid-label-for-json-requests

It seems there might be a bug in jQuery 1.5.x for ajax calls that injects jsonp into json calls.

This was my solution:

Before solution:

@{Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
    @<text>
        var passwordField = $("#PasswordText");
 
        $("#generate-password").click(function () {
 
            $.ajax({
                url: '@Url.Action("GeneratePassword", "Password")',
                dataType: 'json',
                type: 'GET',
                success: OnGeneratePasswordSuccess,
                error: OnGeneratePasswordError
            });
        });
 
        function OnGeneratePasswordSuccess(data){
            if (data.Success) {
                passwordField.val(data.Message);
            }
        }
 
        function OnGeneratePasswordError(xhr, status, error){
            alert("There was an error generating the password. - Status: " + status + " - Error: " + error);
        }
    </text>
    );}

After solution:

@{Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
    @<text>
        var passwordField = $("#PasswordText");
 
        $("#generate-password").click(function () {
 
            $.ajax({
                url: '@Url.Action("GeneratePassword", "Password")',
                dataType: 'json',
                type: 'GET',
                jsonp: null,              <-- Added this line
                jsonpCallback: null,      <-- and this line
                success: OnGeneratePasswordSuccess,
                error: OnGeneratePasswordError
            });
        });
 
        function OnGeneratePasswordSuccess(data){
            if (data.Success) {
                passwordField.val(data.Message);
            }
        }
 
        function OnGeneratePasswordError(xhr, status, error){
            alert("There was an error generating the password. - Status: " + status + " - Error: " + error);
        }
    </text>
    );}

I hope this helps others with this problem.
0
Dan
Top achievements
Rank 2
answered on 15 May 2012, 11:11 PM
Can you post an example about what you mean about using @{}.  I am having the same problem and don't understand.
Tags
General Discussions
Asked by
King Wilder
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
King Wilder
Top achievements
Rank 2
Dan
Top achievements
Rank 2
Share this question
or