Javascript not working in included file?

rockinaway · November 15, 2011

I have a main page, home.php. This file then has content dynamically loaded using AJAX based on which link is clicked. So one link loads content from info.php.

I have included my Javascript file (i'm using jQuery) in home.php. However, when I use some form of Javascript e.g. "<a onclick="contact()">Contact</a>", in info.php, it doesn't work. It says that the function in undefined even though it is clearly stated in the main Javascript file included in home.php

What do I need to do? Include it individually again? :s

trq · November 16, 2011

You shouldn't be using onClick events in your markup if your using jQuery in the first place but anyway. Post some relevant code, we can't help you much without it.

rockinaway · November 17, 2011

well it's difficult to post the code as there is code in a huge number of files. I have done some troubleshooting and have made some conclusions. I will talk about my problem as simply as possible.

I have a main page, main.php. This file has a header.php included which has the javascript file, jquery_functions.js, included in the <head> tag.

Then in main.php, I have a div called 'main_div'. This DIV is empty to begin with. When a link is clicked, it triggers a function in jquery_functions.js which causes main_div to be filled with content. This new content, produced from an AJAX response to another file, now contains some JS functions which are stored in jquery_functions.js.

However, when clicking these new functions, NOTHING happens. I get that the function is undefined although it is clearly defined in my .js file.

My jquery file is below, a lot of irrelevant information really, the last bit is where the major AJAX changes occur (the changing hash section).


$(document).ready(function () {

// Set a few vars
var webroot = 'http://www.etcworld.co.uk/sn/';
var dir = '/sn/';

///////////////////////////////////////////////
/// Hover and change the images in the header
$(".msg").hover(
  	function(){this.src = this.src.replace(""+webroot+"theme/img/header_message_img.png",""+webroot+"theme/img/header_message_img_h.png");},
  	function(){this.src = this.src.replace(""+webroot+"theme/img/header_message_img_h.png",""+webroot+"theme/img/header_message_img.png");
});

$(".stream").hover(
  	function(){this.src = this.src.replace(""+webroot+"theme/img/header_stream_img.png",""+webroot+"theme/img/header_stream_img_h.png");},
  	function(){this.src = this.src.replace(""+webroot+"theme/img/header_stream_img_h.png",""+webroot+"theme/img/header_stream_img.png");
});
///
///////////////////////////////////////////////
    
    ///////////////////////////////////////////////
    /// Mini thought updates - clicking functions
    $('#cancel_mini_thought').click(function() {
    	$('#thought_form_div').hide();
    	$('#mini_thought_div').show();
    	return false;
    });
    
     
$('#thought').click(function(e) {
	// 
	e.stopPropagation();
	$('#mini_thought_div').hide();
	$('#thought_form_div').show();

	// Focus onto the text field
	$('#mini_thought').focus();
});

// When we click anywhere else
$(document).click(function(){

	$('#thought_form_div').hide();
	$('#mini_thought_div').show();
});
    ///
    ///////////////////////////////////////////////
    
    ///////////////////////////////////////////////
    /// Mini thought is submitted
$('#thought_form_div').keydown(function(event) {
	if(event.keyCode == 13) {

	  // Stop the normal submit	
	  event.preventDefault();
	  
	  // The thought submitted
	  var mini_thought = encodeURIComponent($('#mini_thought').val());
	  
	  // Send the request
		$.ajax({
			url: 'post.php',
			 data: 'mini_thought='+mini_thought,
			type: 'post',
			success: function (thought) {

				// Show the new thought
				$('#mini_thought_div').html(thought);

				// Show and hide
				$('#mini_thought_div').show();
    				$('#thought_form_div').hide();
			}
		});
	  
	  // Don't submit
	  return false;
	}
  });
     ///
 //////////////////////////////////////////////

 //////////////////////////////////////////////
 /// Mini buttons at the top

	$("#thought_update_button").click(function() {

		$("#header_mini_buttons #photo_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #photo_update_button").addClass("mini_button");
		$("#header_mini_buttons #video_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #video_update_button").addClass("mini_button");
		$("#header_mini_buttons #post_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #post_update_button").addClass("mini_button");
		$("#thought_update_button").removeClass("mini_button");
		$("#thought_update_button").addClass("mini_button_clicked");


		$("#update_boxes .update_box").css("display","none");
		$("#update_boxes #thought_update").css("display","block");

		return false;
	});


	$("#photo_update_button").click(function() {

		$("#header_mini_buttons #thought_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #thought_update_button").addClass("mini_button");
		$("#header_mini_buttons #video_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #video_update_button").addClass("mini_button");
		$("#header_mini_buttons #post_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #post_update_button").addClass("mini_button");
		$("#photo_update_button").removeClass("mini_button");
		$("#photo_update_button").addClass("mini_button_clicked");


		$("#update_boxes .update_box").css("display","none");
		$("#update_boxes #photo_update").css("display","block");

		return false;
	});

	$("#video_update_button").click(function() {

		$("#header_mini_buttons #photo_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #photo_update_button").addClass("mini_button");
		$("#header_mini_buttons #thought_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #thought_update_button").addClass("mini_button");
		$("#header_mini_buttons #post_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #post_update_button").addClass("mini_button");
		$("#video_update_button").removeClass("mini_button");
		$("#video_update_button").addClass("mini_button_clicked");


		$("#update_boxes .update_box").css("display","none");
		$("#update_boxes #video_update").css("display","block");

		return false;
	});

	$("#post_update_button").click(function() {

		$("#header_mini_buttons #photo_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #photo_update_button").addClass("mini_button");
		$("#header_mini_buttons #video_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #video_update_button").addClass("mini_button");
		$("#header_mini_buttons #thought_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #thought_update_button").addClass("mini_button");
		$("#post_update_button").removeClass("mini_button");
		$("#post_update_button").addClass("mini_button_clicked");

		$("#update_boxes .update_box").css("display","none");
		$("#update_boxes #post_update").css("display","block");

		/*if ($("#post_update").is(":visible")) 
		{
			$('#post_update').hide();
		}
		else 
		{

			$('#post_update').show();
			$('#thought_update').hide();
			$('#photo_update').hide();
			$('#video_update').hide();
		}*/

		return false;
	});

	$("#thought_update").click(function(event) {
		  event.stopPropagation();
	});

	$("#photo_update").click(function(event) {
		  event.stopPropagation();
	});

	$("#post_update").click(function(event) {
		  event.stopPropagation();
	});

	$("#video_update").click(function(event) {
		  event.stopPropagation();
	});


	$(document).click(function(){
		$("#update_boxes .update_box").css("display","none");
		$("#header_mini_buttons #photo_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #photo_update_button").addClass("mini_button");
		$("#header_mini_buttons #video_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #video_update_button").addClass("mini_button");
		$("#header_mini_buttons #thought_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #thought_update_button").addClass("mini_button");

		$("#header_mini_buttons #post_update_button").removeClass("mini_button_clicked");
		$("#header_mini_buttons #post_update_button").addClass("mini_button");

	});
 ///
 //////////////////////////////////////////////


$.extend({
	  getUrlVars: function(){
		var vars = [], hash;
		var hashes = window.location.search.slice(window.location.search.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
		  hash = hashes[i].split('=');
		  vars.push(hash[0]);
		  vars[hash[0]] = hash[1];
		}
		return vars;
	  },
	  geturlvar: function(name){
		return $.getUrlVars()[name];
	  },
	  
	  getUrlHashes: function(){
		var vars = [], hash;
		var hashes = window.location.hash.slice(window.location.hash.indexOf('#') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
		  hash = hashes[i].split('=');
		  vars.push(hash[0]);
		  vars[hash[0]] = hash[1];
		}
		return vars;
	  },
	  geturlhash: function(name){
		return $.getUrlHashes()[name];
	  }
});


var get = $.geturlvar;
var hash = $.geturlhash;

 //////////////////////////////////////////////
 /// Changing and hashing the profile tabs

  		// Roll tab has been clicked 
	$("#profile_link_stream").click(function() {
		window.location.hash = "#s=stream";

		// Need to force the check as the hash doesn't change on reclick
		$(window).trigger('hashchange');
	});

	// Photos tab has been clicked
	$("#profile_link_photos").click(function() {
		window.location.hash = "#s=photos";

		// Need to force the check as the hash doesn't change on reclick
		$(window).trigger('hashchange');
	});

	// Videos tab has been clicked
	$("#profile_link_videos").click(function() {
		window.location.hash = "#s=videos";

		// Need to force the check as the hash doesn't change on reclick
		//$(window).trigger('hashchange');

		//$.bbq.pushState('hello=test');
	});

	// Check we are on the profile page
	if (window.location.pathname == dir+"view_profile.php")
	{

	  $(window).bind( 'hashchange', function(e) 
	  {
	  		// Get the url hash
			//var url = $.param.fragment();

			// Get the user id
			var pid = get('pid');
			var s = hash('s');

			// Show pending image
			$('#profile_main').html('<img src="theme/img/loader.gif" height="16" width="16" />');

			// Photos huh?
			if (s == "photos")
			{
				// Send the request
				$.ajax({
					url: 'view_profile_photos.php',
					type: 'post',
					success: function (msg) {

						$("#profile_main").html(msg);
					}
				});
			}
			// Oh videos
			else if (s == "videos")
			{
				// Send the request
				$.ajax({
					url: 'view_profile_videos.php',
					type: 'post',
					success: function (msg) {

						$("#profile_main").html(msg);
					}
				});
			}
			// Stream it is.. 
			else if (s == "stream" || s == '')
			{
				// Send the request
				$.ajax({
					url: 'view_profile_stream.php',
					type: 'post',
					data: 'pid='+pid,
					success: function (msg) {

						$("#profile_main").html(msg);

					}
				});
			}
		})
	  
	  	// Trigger the event
	  	$(window).trigger('hashchange');
	 }
///
////////////////////////////////////////////////////////

////////////////////////////////////////////////////////
///		Submit a new thought
$("#thought_post_submit").click(function() {

	// Disable the button to stop more submissions
	$('#thought_post_submit').attr("disabled", true);

	// The thought submitted
	var thought = encodeURIComponent($('#thought_post').val());
	  
	// Send the request
	$.ajax({
		url: 'post.php',
		data: 'thought='+thought,
		type: 'post',
		success: function (msg) {

			// Do this is we are on the profile page!!!
			//
			//
			//

			//$("#profile_main").prepend(msg);

			//
			//
			//
			///////////

			// Enable the button
			$('#thought_post_submit').attr("disabled", false);

			// Clear the value of thought post
			$('#thought_post').val('');

			// Show pending image
			$('#mini_thought_div').html('<img src="theme/img/loader.gif" height="16" width="16" />');

			// Update mini thought
			$("#mini_thought_div").html(msg);

			// Show pending image
			$('#thought_success').html('<img src="theme/img/loader.gif" height="16" width="16" />');

			// Show the success message
			$('#thought_success').fadeIn("slow").html('Success').fadeOut(1500); 
		}
	});

	// Prevent the normal action
	return false;
});
///
//////////////////////////////////////////////////////




});

rockinaway · November 17, 2011

Fixed it!

Sanjitscorps · September 11, 2013

You did not say how did you fix it or what had caused the issue at the beginning. I'm having a similar issue and your solution might work on my code as well. Hope that you would respond :happy-04:

Sign In

Javascript not working in included file?

Recommended Posts

rockinaway

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

rockinaway

Link to comment

Share on other sites

rockinaway

Link to comment

Share on other sites

Sanjitscorps

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information