[Solved] $(document).ready in content pages

[Daniel Collier]

I am using the scriptregistar call in the site.master and adding an document ready there.  My problem is that my individual content pages need to add jquery event methods to the document ready call, like so:

      $(document).ready(function() {

         $('#parent').change(function() {

            var parentId = $('#parent').val();

           $.getJSON("/MyArea/Parent.mvc/GetChildJSONList", { parentId: parentId , showAll: true }, function(data) {

               $("#child").fillDropDown(data);

             });

           $.getJSON("/MyArea/Campaign.mvc/GetSecondChildJSONList", { childId: 0 , parentId: parentId }, function(dataB) {

               $("#secondChild").fillSelect(dataB);

            });

How can add these events to document.ready in my content pages?

[Kazi Manzur Rashid]

Hi Daniel Collier,

Both master and content pages can have there own OnDoccumentReady, when the view renders, it consolidates all the statements in a single client side $(document).ready(..). for examle the following:

Master Page:
===========
<% Html.Telerik()
           .ScriptRegistrar()
           .Scripts(group => group.AddSharedGroup("publicScripts"))
           .OnDocumentReady(() =>
                                  {%>
                                    $('input.largeTextBox').focus(function() { this.select(); });
                                  <%}
                             )
           .Render(); %>

And Content Page:
=============
<% Html.Telerik()
           .ScriptRegistrar()
           .OnDocumentReady(() =>
                                  {%>
                                    createShortUrl.init('<%= Url.InputValidationErrorIcon() %>');
                                  <%}
                           ); %>

will be render as:

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
 createShortUrl.init('/Content/images/forms/exclamation.png');
 $('input.largeTextBox').focus(function() { this.select(); });
});
//]]>
</script>

Best wishes,
Kazi Manzur Rashid
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.

[Daniel Collier]

Thanks!  I'm not sure why I didn't try that before.  That's exactly what I needed.  I think I was under the impression that you could only have one scriptregistar call.  Anyway, thanks!

[IQworks]

 Hi,
   I know this thread is a couple of weeks old, but, would you happen to remember putting the scriptregistrar in place but the javascript within it would not execute ?  
   i took out the <script> </script> tags and replace them with the scriptregistrar code and the js would not run. 
   if I put the <script> tags back, replaceing the scriptregistrar code and the javascript runs. 
   I was thinking that the scriptregistrar code was incorrect, but it looks ok, like the following ... 
  

 <% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {
    %>
    alert("anything");
     $('.iqNameTooltip')
        .live('mouseover', function() {
            var companyno = $(this).nextAll('.cId').html();
            var contact = $(this).nextAll('.gId').html();

            $('<div class="iqTooltip  t-group" />')
                .html('CompanyNo: ' + companyno + '<br/>Contact: ' + contact)
                .appendTo(this)
                .css({
                    left: $(this).position().left + 20,
                    top: $(this).position().top + $(this).height()
                })
                .fadeIn(500);
        })
        .live('mouseout', function() {
            $('.iqTooltip').remove();
        });


<% }); %>

  just thought I would ask because I think the double scriptregistrar is the answer to one of my current issues. 
  thanks
  

[Jose Granja]

Hi, I'm having trouble using this function.

I have a while loop and each element should excecute the following;

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {
                %>
                        $('#CancelCharge_<%=Charge.ID%>').click(function(event) {
                            //click code here
                        });

                        $('#CancelCharge_<%=Charge.ID%>').confirm({
                            msg:'Sure?',
                            timeout:5000,
                            dialogShow:'fadeIn'
                        });

                <% }); %>

Every element of the list should have this function but however it's only working for the last element! The others one won't work!

If I get rid of Scriptregistar of Telerik and use $(document).ready(function() { it works for all elements!

The function I'm using is not equivalent to $(document).ready(function() { ??? Can't I call as many times as I want right??? Any help would be appreciated!

cheers,
jose

[Jose Granja]

Ok I just know what is happening!! The function is called as many times as need but the value of the var used in the scriptregistar is the same for all document ready!

I'm calling:

document ready{
        $('charge_<%=Charge.ID%>).//something
}

the Charge object is the one going throught the loop and it's value changes for every document ready in theory! What is happening that the value Charge.ID is for all the same, it's the last one!

so if my charge id's are in a vector {0, 1, 2, 3, 4}

the document ready would be excecuted 5 times with the Charge.ID = 4 instead of one for each Value.

I'm giving examples because my english is not very good and I want to make my point clear. Any ideas how to solve this???

cheers

[Alex Gyoshev]

Hello Jose,

In order to make the action execute properly, you need to compile it first - otherwise it gets compiled at the end and this results in incorrect behavior. Your code should look something like this:

<% var action = (chargeID) => { %>
    $('#CancelCharge_<%= chargeID %>').click(function(event) {
        //click code here
    });

    $('#CancelCharge_<%= chargeID %>').confirm({
        msg:'Sure?',
        timeout:5000,
        dialogShow:'fadeIn'
    });
<% }; %>

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(action(Charge.ID)); %>

Greetings,
Alex Gyoshev
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.

[Jose Granja]

Thank you for the quick reply! It makes perfect sense the solution you gave me, however I get a compile error in this line:

<% var action = (chargeID) => { %>  

CS0815: Cannot assign lambda expression to an implicitly-typed local variable

I never used something like that, I don't know what it's wrong with it. Any ideas?

regards,

jose

[Alex Gyoshev]

Hello Jose,

Here's the correct code - sorry for the round-trip.

<% Func<int, Action> action = (chargeID) =>
   {
       return () => { %>
            $('#CancelCharge_<%= chargeID %>').click(function(event) {
                //click code here
            });

            $('#CancelCharge_<%= chargeID %>').confirm({
                msg:'Sure?',
                timeout:5000,
                dialogShow:'fadeIn'
            });
       <% };
   }; %>

<%-- then you can use the render action in a loop: --%>
<% for (var i = 0; i < 6; i++) {
    Html.Telerik().ScriptRegistrar().OnDocumentReady(action(i));
} %>

Regards,
Alex Gyoshev
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.

[Jose Granja]

Wow!!! That is perfect! Thank you so much! I didn't now the existence of <% func<int,Action> %> I'm going to take a deeper look into it!

Thank you again :)

[Alex Gyoshev]

Hello Jose,

I'm glad that it works for you!

After giving it some more thought, here's another bit of advice:

1. You can chain the jQuery calls, making your code a bit faster:
   

   $('#CancelCharge_<%= chargeID %>')
       .click(function(event) {
           //click code here
       })
       .confirm({
           msg:'Sure?',
           timeout:5000,
           dialogShow:'fadeIn'
       });

2. You can use a class selector instead of an id selector. This way, you'll trim your JavaScript output from the server (the whole operation with the Func will be unnecessary). I'm not sure whether this solution is viable in you scenario, but the gains are obvious.

Kind regards,
Alex Gyoshev
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.

[Jose Granja]

Thanks again for the tips!

In don't know if it's useful in my scenario as I need the ChargeID to redirect it to the correct page. On solution could be using a class to give the button this behaviour and get the ChargeID throught an html attribute??? I don't know really if putting attributes into elements is a dirty trick or not. What do you reckon?

like having

<input type="button" class="confirmationButton" chargeid="<%Charge.ID%>" />

and then on the onclick get the chargeid from the button click and construct de url.

is this better than what I'm doing now? It's less lines of code on I would only have to call documentReady once 

I really apreciate your help

[Alex Gyoshev]

Hello Jose,

Attributes are a dirty trick if you are aiming at valid (X)HTML - so you'd better not.

You could use both the class and id - i.e. attach the javascript handlers by class, and fetch the generated id in the handlers, not unlike this:

$('.CancelCharge')
    .click(function(event) {
        var id = parseInt(/\d+/.exec(this.id)[0]);
        //click code here
    })
    .confirm({
        msg:'Sure?',
        timeout:5000,
        dialogShow:'fadeIn'
    });

This will work for the following element:

<div class="CancelChange" id="CancelChange_1"></div>

Hope this helps,
Alex Gyoshev
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.

[Jose Granja]

Yes this works but I was thinking to add the id a attribute so the code is more readable.

instead of getting the id through 

parseInt(/\d+/.exec(this.id)[0]);

doing like this:

$(#DIV).attr('chargeID')

and then the def of the button would like like this:

<button class=".Cancelable" chargeID = '<%=Charge.ID%>' />

I was wandering with solution was better. I know it's not standar html but I don't know if it's dirty coding.

anyway your solution works very good :)

[John DeVight]

I am trying to get this to work but keep getting an error:

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1525: Invalid expression term ')'

Here is my code:

<%= Html.Telerik().ScriptRegistrar()
    .Scripts(group => group.AddSharedGroup("publicScripts"))
    .OnDocumentReady(() =>
    {
        %>
            $('body').layout({ applyDefaultStyles: true });
        <%
    });
%>

I am using: "Extensions for ASP.NET MVC Q3 2010"

Can you help me figure out what I am doing wrong?

 

Regards,

 

John