Irakli Lekishvili
Irakli Lekishvili

Reputation: 34158

Jquery pageLoad() does not working in multiple js files

I have asp.net web site with ajax and jquery. I need to use jquery pageLoad function in two jquery script files but problem is that its working in only one which is attached in master page first.

I have crated simple visual stuido test web site project and i will be very glad if you will download and see it.

I uploaded it on mediaFire http://www.mediafire.com/?4b71u9jvo0mxru3 its just 5kb please help me somebody

Upvotes: 2

Views: 803

Answers (3)

gouderadrian
gouderadrian

Reputation: 431

Another method proposed by my colleague (thanks James), is to use custom events (note that this is still being tested).

Step 1: In the masterpage, include the following as the last script (after the other scripts):

<script type="text/javascript">
    function pageLoad(sender, args) {
        $(document).trigger('PartialPageLoad');
    }
</script>

Step 2: In the script files, when you want to execute something on pageLoad, attach to the event as follows:

$(document).on('PartialPageLoad', function () {
  doSomething();
  doSomethingelse();
});

Upvotes: 0

Bruno Costa
Bruno Costa

Reputation: 2720

You can only have one pageLoad per page. I downloaded your code and I change this:

In MasterPage.master:

<asp:ScriptManager ID="MainScriptManager" runat="server" EnablePartialRendering="true">
        <Scripts>
              <asp:ScriptReference Path="~/jscript/btnFirst.js" />
              <asp:ScriptReference Path="~/jscript/second.js" />
        </Scripts>
</asp:ScriptManager>

And remove this in head:

  <script type="text/javascript" src="jscript/second.js"></script>

  <script src="jscript/btnFirst.js" type="text/javascript"></script>

In btnFirst.js (for example) change the pageLoad to:

// Attach a handler to the load event.
Sys.Application.add_load(applicationLoadHandler);

function applicationLoadHandler() {

    $('#btnFirst').each(function () {
        $('#btnFirst').css('text-decoration', 'none');
        $('#btnFirst').css('opacity', '1');
        var elem = $(this);
        setInterval(function () {
            if (elem.css('opacity') == '1') {
                elem.css('opacity', '0.1');
            } else {
                elem.css('opacity', '1.0');
            }
        }, 500);
    });
};

And you're done ;-)

Upvotes: 4

AndrewR
AndrewR

Reputation: 6748

Instead of using pageLoad(), you should be using $(document).ready. This works by passing in an anonymous function to the .ready() function which get added to a queue. After the DOM is loaded, all the anonymous functions are ran.

$(document).ready(function(){
  // your function code here
});

Upvotes: 0

Related Questions