Javascript reference in an Ajax loaded Div

[ejaboneta]

I have a page that has a link "Schedule A Call" when it is clicked, a page is loaded into a div with ajax. The page that is loaded has a form to schedule an appointment, and a calendar so that a user can click a date and it will be loaded into the form. The page with the form works alone but not when it is loaded into a div.

 

 

This is the page that loads into the div:

http://leadstest.vanbergins.com/list/schedulecall.php

 

 

This is how I refer to the textfield in the link

<?php
<a href=\"#\" onclick=\"document.scheduleform.scheduledate.value='$scheduletime'; return false;\">$date</a>
?>

 

 

[lonewolf217]

I was actually wondering the same thing, so bumping the thread.

 

using jquery I populate a div on the front end page, however I cannot reference any button or div ID that was loaded from the backend page.

 

Is there a way to handle this ?

[YourNameHere]

You can reference an id on a dynamically loaded page HOWEVER, no scripts will work as ajax only get the plain HTML so the scripts that you want to call on the loaded div would need to be stored in a separate .js file that is linked to the page that calls the content of the div. Alternatively, you can have all the scripts necessary for the calendar in the head of the page calling the ajax content into the div (same page as the container div)

[Xtremer360]

I have the same problem.

 

Here's my ajax code? Did I write it wrong?

 

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid)
{
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject)
{
	// if IE
	try
	{
		page_request = new ActiveXObject("Msxml2.XMLHTTP")
	} 
	catch (e)
	{
		try
		{
			page_request = new ActiveXObject("Microsoft.XMLHTTP")
		}
		catch (e)
		{
		}
	}
}
else
{
	return false
}

page_request.onreadystatechange=function()
{
	loadpage(page_request, containerid)
}

page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid)
{
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs()
{
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++)
{
	var file=arguments[i]
	var fileref=""
	if (loadedobjects.indexOf(file)==-1)
	{ 
		//Check to see if this object has not already been added to page before proceeding
		if (file.indexOf(".js")!=-1)
		{
			//If object is a js file
			fileref=document.createElement('script')
			fileref.setAttribute("type","text/javascript");
			fileref.setAttribute("src", file);
		}
		else if (file.indexOf(".css")!=-1)
		{
			//If object is a css file
			fileref=document.createElement("link")
			fileref.setAttribute("rel", "stylesheet");
			fileref.setAttribute("type", "text/css");
			fileref.setAttribute("href", file);
		}
	}
	if (fileref!="")
	{
		document.getElementsByTagName("head").item(0).appendChild(fileref)
		loadedobjects+=file+" " //Remember this object as being already added to page
	}
}
}

[RossF.72]

I have the same problem.

 

Here's my ajax code? Did I write it wrong?

 

 

Here's another free kick for you - you are trying to do something with that code that it wasn't designed to do.  It won't correctly do the job you are trying to make it do - i.e. full page swaps in an administration panel that uses javascript in the pages. 

 

I'm not and have never lied to you about any of this, what you are doing now is crazy stupid and is doing nothing but wasting people's time.  You may have stolen it from me when lifting the rest of my script, but I didn't write it either, it came from a free code repository.  It does for me exactly what it said on the box.  Maybe try googling it and see if you can find directions on how and where to use it.

 

Oh, and for the record, please stop posting my source code and claiming it as your own, or saying a friend gave it to you.  I am not your friend, but you are a thief and have broken several laws. 

 

Post anything that you wrote, but leave mine off public forums.  Thanks.

[Xtremer360]

I'm just saying I don't know as much as you and have done some learning however I'm just trying to get a hint/direction as to waht specially I need to do stick to for catching up on my learning to make something load in that.

 

And specially I"m talking about say if I were to do the Add new or edit links. As I have a general idea and I have worked on my own with them I have but nothing is working.

[YourNameHere]

Ok to answer the ORIGINAL question to this topic, maybe I was unclear with my other post. When you load content via ajax that has javascript code in it, The JavaScript code is NOT loaded. So, to get around this, you should write all your JS in a seperate file for all pages and content loaded trough ajax.

 

For example, you have a div that  is populated with a list of images from another page via ajax. and you need a script that turns that list into a slide show. if that code was written on the page that contained the images, it would not work. SO, to get around this, you would make a separate .js file that contained the code for the ajax call in a function and the slide show function. This was you can reference the slide show function upon completion of the ajax call.

 

OR, you could write the slide show function in the <head> of the page that calls the ajax content. This is now best practice however.

[lonewolf217]

I think I understand where you are going with this, however i still do not understand how to get around the issue I mentioned.

 

I have two pages

Page 1:

front end page.  contains the javascript jquery code and an empty div (id='targetdiv') which is the target for jquery

 

Page 2:

back end page for processing.  content echo'd here will be displayed in the empty div on Page 1

 

the issue I have right now is that the jquery code in the <head> of Page 1 does not recognize any div or other object that is displayed within 'targetdiv'.  Take for example if I am displaying a form.  inside 'targetdiv' I have a select menu which is automatically populated based on information which was entered in a form object which is on Page1.  If I try to submit the page and verify the contents via javascript (just one small example of what I would do) I cannot retrieve the selected index of the select menu in 'targetdiv'

 

I hope this explained my issue a little better, I cannot see exactly how putting the javascript into its own file will help here, and I never put the javascript on Page2

[YourNameHere]

ok, then I understand your issue a little more. I urge you to look up the jquery  function ".live()". This allowes you to bind an event to newly created content such as a click event.

 

Here is the documentation on it.

 

http://docs.jquery.com/Events/live

 

Your code would look something similar to

 

$('#targetdiv #submitButton').live("click", function()
{ 
$('this.form').submit(); 
});

 

but not exactly like that so please read the aforementioned doc and you will be able to fix your issue.

[YourNameHere]

ok, then I understand your issue a little more. I urge you to look up the jquery  function ".live()". This allowes you to bind an event to newly created content from AJAX such as a click event.

 

Here is the documentation on it.

 

http://docs.jquery.com/Events/live

 

Your code would look something similar to

 

$('#targetdiv #submitButton').live("click", function()
{ 
$('this.form').submit(); 
});

 

but not exactly like that so please read the aforementioned doc and you will be able to fix your issue.

 

 

edit: Oops I hit quote instead of modify.

[lonewolf217]

Interesting idea.  No idea if it will work, but I will look into it.

 

Thanks

[YourNameHere]

if you have problems implementing it (because it WILL work) go to #jquery on the freenode server in an IRC client like mIRC.

 

if you dont want to mess with an irc client then google "Freenode Online irc client" and you'll be able to use an online client.

 

ask them in there for help with .live and they will help you.

[lonewolf217]

oh, i have no doubt it will work for what it was intended for, the question is whether or not its intended purpose is for what i am trying to do

[lonewolf217]

thanks YourNameHere, i think this will work out nicely once I rearrange some things. I was able to get some sample code working for now

[YourNameHere]

Np problem, glad I could help 

[ejaboneta]

So Im surprised to see how long my thread has gotten.... Surprisingly though, the answer I found through days of research(probably cuz I'm a javascript noob), is nothing anyone has suggested. Is this even the same topic anymore? I started using the following and now I have access to any div on the page no matter how it was loaded...

 

parent.document.getElementById('divname')

 

(If you can, please look at my other post 'Loading in the wrong div'... desperate need of help!)

[nafetski]

Oh this thread is funny.

 

When you load new content into a div, you have to make sure you assign event handlers to that new content.

 

In your callback function, after you probably have something like

 

$("#results").html(data);

 

Add your event bindings right underneath it. It will work better than live();

 

Good luck ;P