CODEWITHSUNDEEP
javascriptjquery
Neil
Neil

Reputation: 794

Refreshed div can't access external javascript file

I'm using JavaScript/jQuery to load a page into a div.

My problem is that I then want some functions to work within this loaded page. If I add the functions I need into a script tag along with the HTML then it works fine but this looks messy and I was wondering if there was any other way I could this to work from an attached JavaScript file?

Edit: I will better explain what I mean.

I have attached a script in my header like so

<script src="custom.js" defer="defer"></script>

within this script I have a function:

$(document).ready(function() {
$('a#view-users').click(function() {

    $('#main-view').load('view_users.php');

    }
    );

});

Now within the div(#main-view) it loads view_users.php. In view_users.php I need to perform an ajax search so I added another function within my custom.js file. The problem is that anything within the #main-view div no longer can make use of what's in my custom.js file. I want to know if I can solve this whilst still adding the script in the header rather than having to add it into my view_users.php file which is very messy.

Upvotes: 0

Views: 1134

Answers (3)

Andrew De Rozario
Andrew De Rozario

Reputation: 19

Could you be more specific(ie:code samples). Do you mean that script tags inside your loaded page are not working ie:

<script type="text/javascript" src="jscript"></script>

or that events you wish to attach to Dom elements are not working when you load your new html into the div? If this is so, you should use the jQuery 'on' method as elements you are adding to the page will not be listening for events which you have been previously attached handlers for. Below is the overload of the jQuery 'on' method required to attach a handler to new elements as you attach them to the Dom.

 $('#myDiv').on('click', '#loadedPageElement', function(e) {
    alert('clicked');
    e.preventDefault();
});

The second argument will attach an event handler for elements matching the given selector both in the present and also for all elements matching the selector in the future.

Hi again,

The defer attribute will delay execution of your script until the initial page has loaded, I am not sure this is the behaviour you are after. It will then setup an event handler on ('a#view-users') which will allow ('view-users.php') to be loaded into('#main-view') when it is clicked. If you have logic that needs to work with the html generated by 'view-users.php' once it is loaded you will need to use the $.on() if the attaching of an event is require eg:

$(document).ready(function() {
 $('a#view-users').click(function() {

    $('#main-view').load('view_users.php');

 });

 $('#main-view').on('click', '#loadedPageElement', function(e) {
    alert('clicked');
    e.preventDefault();
});

});

or if you just want some code to run then a callback function is sufficient:

$(document).ready(function() {
   $('a#view-users').click(function() {

       $('#main-view').load('view_users.php',function(){

          alert('code running after load of "view_users.php"')

      });

   });

});

Neither should require you to have code written inline in you loaded php.

Hi,

Just for the sake of clarity is ('a#view-users') in the initial page load or an element in 'view_users.php' that is loaded by ajax?

Hi,

I think the problem you are having as alluded to by myself and some of the others is that if you have script in your header that interacts with elements that are loaded into ('#main-view') via ajax, even if your original code uses the correct Jquery selector the newly loaded elements will not be recognized as the same elements which is why you will need to use either a callback function as the second argument of the load method or use the 'on' method. the 'on' method works with the standard jQuery events including 'load' ie the loading of an element into the dom. eg

$("#containerElement").on('load','#newlyLoadedElement',function(e){

       //Do some stuff when the element'#newlyLoadedElement'  is inserted
       // into "#containerElement"
})

Upvotes: 0

nimgrg
nimgrg

Reputation: 582

Here' a jsfiddle http://jsfiddle.net/9MfMS/2/ if what your are trying to to do is load a html from another page and attach event handler's to it. 

//the html that is loaded
<div id="#clickMe">Click Me</div>

//attach event handler to it
$(document).on('click','#clickMe',function(){
     alert("Function invoked on html from different page."); 
});

Upvotes: 0

Mohamed AbdElRazek
Mohamed AbdElRazek

Reputation: 1684

I think you need to call getScript jquery function in your load callback something like that hope to solve your problem :

$('#result').load('ajax/test.html', function() {
         $.getScript("ajax/test.js");
});

there are another solution to use jquery deferred promise.

Upvotes: 2

Related Questions