CODEWITHSUNDEEP
javascriptjqueryscope
d-_-b
d-_-b

Reputation: 23191

Scope for page that is included using load()

I have an index.php and a contact.php.

index.php uses load() like so: $("#content").load("contact.php"); and everything is great...

My problem is that on contact.php, there is a form, and I can't seem to get functions to run when the form is submitted.

index.php has jquery loaded. I've tried putting this function in and out of a ready tag:

function contact_submit(){
   alert('a');
}

on contact.php:

<form .....
   <input onclick="contact_submit();"  ....

I've been experimenting, and put the function on contact.php, but still no luck. I did notice that if I want to use jquery on contact.php I need to include jquery.js on that page (it doesn't steal it from index).

Does anyone know what i'm doing wrong, or how I can have a function on index.php be used in the loaded contact.php? If you need more of my code please let me know...

EDIT Will I need to put my global function in a .js file and load them on all pages that will be used? I know it sounds like a basic question, but does using load() not re-use Javascript functions on my index page?

Upvotes: 0

Views: 71

Answers (2)

Jiskiras
Jiskiras

Reputation: 84

The event isn't going to come along for the ride. You will need to add something on index.php or use jQuery's getScript method. If you put something on index.php, you'll just want to use jQuery's event delegation.

$('form').on('click','input',contact_submit);

Else, I'd recommend this: http://api.jquery.com/jQuery.getScript/

Upvotes: 2

iOSAndroidWindowsMobileAppsDev
iOSAndroidWindowsMobileAppsDev

Reputation: 2916

What you need to do is to add an event listener and execute the code after all the DOM Elements have been loaded, provided there are no bugs in your php.

A few of these may be:

  1. http://api.jquery.com/live/
  2. http://api.jquery.com/on/
  3. http://api.jquery.com/ready/

The first two apply to individual pages, and the third to DOM.

Upvotes: 0

Related Questions