?
Solved

timing of when the jquery runs

Posted on 2011-09-30
10
Medium Priority
?
288 Views
Last Modified: 2012-05-12
I have some jquery that runs on a page.

I also have a div that I am setting the inner HTML for on the page load.

The jquery uses the text inside this div to make a decision.

But, the jquery runs before the text gets set, so it is not able to do what is intended.

Is there a way to ensure the jquery runs after the div inner HTML is set?
0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 11

Expert Comment

by:MacAnthony
ID: 36893270
Yes, move the pageload code into a $(document).ready() block. Anything in the .ready block will execute before an onload event fires. Onload fires once the page has been rendered by .ready fires when the page has been loaded.

The other option would be to run the jquery function inside the body onload, but I like the first option more.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36893306
That's the thing...right now it is inside the .ready() function...and it is not working right.

Here is where I am assigning the values in PageLoad on the server side with ASP.NET / C#:

   protected void Page_Load(object sender, EventArgs e)
    {        

        bool showonlyinstorepickup = IWEBConfigAdmin.AllowInStorePickupOnly;

        string instorepickupdescription = IWEBConfigAdmin.InStorePickupDescription;

        if (showonlyinstorepickup)
        {
            showinstorediv.InnerHtml = instorepickupdescription;
        }
        else
        {
            showinstorediv.InnerHtml = "false";
        }


//////////////   THEN I WANT THE JQUERY TO RUN

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36893312
I even tried taking the jQuery code and putting it in a <script> block at the bottom of the master page, just above the ending </body> tag -----  and it made no difference.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 11

Expert Comment

by:MacAnthony
ID: 36893512
Putting it in page_load does not put it in a jquery .ready() block. If you don't want to change this code, then you will need to put the jquery code in a function and call that function from the page load.
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36901563
Add below tag in <head></head> tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
i.e
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 <script>
   $(document).ready(function(){
     alert($("#showinstorediv").html());
   });
   </script>
</head>

Open in new window


Above code will alert the message containing text within div

0
 
LVL 11

Accepted Solution

by:
MacAnthony earned 2000 total points
ID: 36903259
@sonawanekiran that code will have the same issue that he's having with the original post. The .ready block will run before the onload block so it won't show any html. The only way to fix this is to get the code to run after the completion of the onload code. This can only be done by moving one or the other. Either to move the onload into an .ready block so it can be ran before the other jquery code or the jquery code needs to be placed in a function and called after the page_load code.

The other option would be to move the jquery code into a .load block like:

$(document).ready( function() {
    $('body').load(function() {
        //original jquery code goes here
    });
});

Open in new window


This might have unexpected results though since I'm not familiar enough with .net to know when/how the page_load function will run.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36903675
What do you think about this possible interim solution?

 var loc = window.location.href;
        if (loc.indexOf("checkoutlegacy") != -1)
        {
            $.ajax({
                type: "POST",
                url: "WebGlobalMethods.asmx/SetToInStorePickupOnly",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg)
                {                   
                    if (msg.d != "false")
                    {
                        $("tr:not(:has(th),:contains('" + msg.d + "'))", "table[id*='gvShipping']").hide();
                    }
                },
                error: LoadFailed
            });
        }

        function LoadFailed()
        {
        }

Open in new window



This code:

-ensures we're on the page where we want the jquery applied
-calls a web method to find-out from the server what the "mode" will be for displaying the table
-by convention, anything other than the value "false" results in the jQuery being applied

I've tried this out and it seems to work okay.

But -- is this a hokey way to handle this?
0
 
LVL 11

Expert Comment

by:MacAnthony
ID: 36903781
Seems fine from a javascript perspective. That selector seems a bit complicated, but if it's working, I don't think it's horrible.
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36904018
MacAnthony- If u could famillar with U never told this tat page_load will be called after ready fun
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36904493
I think this solution also would have worked, or was on the right track.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question