10 Replies - 412 Views - Last Post: 13 February 2014 - 03:51 PM

#1 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

.load() issue

Posted 13 February 2014 - 02:17 PM

alright, so i'm having another issue with my Jquery. I've been optimizing the code a lot today--and have made a lot of progress, everything is loading a hellava lot faster, however, I'm having a problem somewhere in the "fullStarInformation()" function that is screwing over my entire functionality.
After the user clicks the "#colony" element, and after the whole process is executed, the newly loaded
"#planet-bar #colony" button doesn't function properly--it's not executing the script at all.
I'm getting no errors in the console, and everything is working outside of that one small issue. I've rewritten the entire code about sixty times by now and still am not getting any headway...
/*
  All this code was written by Gmz1023 AKA lieoften AKA James Serbus. 
  With the exception of the centering function, which was found on StackOverflow.
  Though to be honest, that function probably won't make it into the final cut.
  
  TODO:
  	- Make a proper Purchase_stock() function that is dynamic instead of static
	- Make a menu system for stock purchases and upgrades
	- Create the Star Map.
	- Add things of interest 
*/
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
var Y = getQueryVariable('Y');
var X = getQueryVariable('X');
var URL = 'load_starmap.php?X='+X;
var URL2 = URL+'&Y='+Y;
var denial = false;
	setInterval(function update()
	{
		if(denial) return;
		denial = true;
		$.ajax(
			{
			url:'update.php', error: function(){ denial=false;},
			complete: function(){
				denial = false;
				$('#loader').hide("slow");
				$('#credits').load('world1.php?mode=money');
				$('#fuelleft').load('world1.php?mode=fuel');
				$('#energyleft').load('world1.php?mode=energy');
				$('#starmap').show("slow");
				},
			});
	}, 1000);
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}
function currentStarMapURL(URL)
{
		$('#starmap').load(URL, {},
		function()
		{
			fullStarInformation(URL);
			starInformation();
			return false;	
		}
		);
}
/* 
	Retriever Better Star Info 
*/
function fullStarInformation()
{
	$(".star").click(
		function()
		{
			val = $(this).attr('id');
			url = "planet.php?sid="+val;
			$('#planet-bar').load(url, val,
				function()
				{
				//* So yah, right now this is just a bunch of C&P shit, but it'll do some shitty shit eventually.. shit.
					$('#colony').click(
						function()
						{
							$('#colony').replaceWith('-PROCESSING-');
							sid = $(this).attr('sid');
							$.post('purchase.php?mode=planet', {sid: sid}, function() { 
								$('#planet-bar').load(url); 
								currentStarMapURL(URL2);
							});
						});	
				}
			);
		}
		);
}
/* 

	Star Information Stuff -- Needs more functionality 
	last Edit: 2.9.14
*/
function starInformation()
    {
        $(".star").hoverIntent(
        function()
        {
			$(this).addClass('hover');
            $(this).children('.starjumper').removeClass('hidden');
			return false;
        },
     function()
        {
            $(this).removeClass('hover');
			$(this).children('.starjumper').addClass('hidden');
			return false;
			
        }
        );
    }
/* 
	Stuff to do when the page opens
*/
$(document).ready(function() 
	{


		$('#starmap').hide();
		currentStarMapURL(URL2);
		$('.center').center();
		
		$('#purchased').fadeOut('fast');
		$('#purchase').click(function(){ purchase_stock(6); });
		  $(function() {
    			$( document ).tooltip();
  			});	
	}
);



Thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: .load() issue

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3223
  • View blog
  • Posts: 10,810
  • Joined: 12-December 12

Re: .load() issue

Posted 13 February 2014 - 02:30 PM

You'll need to describe the problem in more detail/ more clearly.

You are using replaceWith so I will guess that the #planet-bar content is loaded with content that includes a new #colony button (which has been removed)? If this is the case then you should either investigate jQuery's on() to attach an event to an element that may be added to the DOM, or possibly better, attach the event again after the new content has been loaded.

In brief, removing and re-inserting an element will not automatically re-attach the event that was added to the original element.

This post has been edited by andrewsw: 13 February 2014 - 02:31 PM

Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 330
  • View blog
  • Posts: 1,202
  • Joined: 15-January 14

Re: .load() issue

Posted 13 February 2014 - 02:33 PM

I haven't used jQuery much, but if you're using the load method to load HTML content into an element, the new elements are not going to have event handlers on them. Only the elements already on the page will have event handlers if you add them through jQuery. For older versions of jQuery you had to use the live method to attach event handlers. With newer versions, you use the on method and use delegation.

https://api.jquery.com/on/
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3485
  • View blog
  • Posts: 10,045
  • Joined: 08-June 10

Re: .load() issue

Posted 13 February 2014 - 02:38 PM

line #71: this.id is much easier than the jQuery way

line #81: I doubt there is an sid attribute in your code

line #81: after line #80, there is no element to get an attribute from
Was This Post Helpful? 0
  • +
  • -

#5 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Re: .load() issue

Posted 13 February 2014 - 03:00 PM

View PostDormilich, on 13 February 2014 - 02:38 PM, said:

line #71: this.id is much easier than the jQuery way


Noted.

Quote

line #81: I doubt there is an sid attribute in your code


There is in fact an SID attribute in my code.

Quote

line #81: after line #80, there is no element to get an attribute from


Alright--Duly noted; though i just changed the code around so that the element is hidden (addClass) and still the reloaded button does nothing.
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 330
  • View blog
  • Posts: 1,202
  • Joined: 15-January 14

Re: .load() issue

Posted 13 February 2014 - 03:10 PM

It's going to continue not doing anything unless you have a click event handler on it.
Was This Post Helpful? 0
  • +
  • -

#7 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Re: .load() issue

Posted 13 February 2014 - 03:30 PM

View PostArtificialSoldier, on 13 February 2014 - 03:10 PM, said:

It's going to continue not doing anything unless you have a click event handler on it.



Okay, added an Event Handler--Still not working.

function fullStarInformation()
{
	$(".star").click(
		function()
		{
			val = this.id;
			url = "planet.php?sid="+val;
			$('#planet-bar').load(url, val,
				function()
				{
				//* So yah, right now this is just a bunch of C&P shit, but it'll do some shitty shit eventually.. shit.
					/*$('#colony').click(
						function()
						{
							sid = $(this).attr('sid');
							$('#colony').addClass('hidden');
							$('#load').removeClass('hidden');
							$.post('purchase.php?mode=planet', {sid: sid}, function() { 
								$('#planet-bar').load(url, {}, function () { currentStarMapURL(URL2); }); 
								
							});
				
						}); */
						colony(url);	
				}
			);
		}
		);
}
function colony(url)
{
	$('#planet-bar table tr #colony').on("click",
	function() {
			name = this.getAttribute('sid');
			$.post('purchase.php?mode=planet', {sid: name}, 
				function () 
				{ 
					$('#planet-bar').load(url, {}, function () { currentStarMapURL(URL2); })
				}
				);
		 });	
}

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3485
  • View blog
  • Posts: 10,045
  • Joined: 08-June 10

Re: .load() issue

Posted 13 February 2014 - 03:32 PM

this $('#planet-bar table tr #colony') is pointless. IDs are unique so there is never a need to specify a CSS path other than th ID itself, i.e. $('#colony')
Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 330
  • View blog
  • Posts: 1,202
  • Joined: 15-January 14

Re: .load() issue

Posted 13 February 2014 - 03:33 PM

If you added a click event to that element, then it's going to fire if you click on it. Hopefully you don't think that you would add a click event, and then the browser would just choose not to execute it for whatever reason.

You should really use delegated events. Attach the event handlers to a parent node that is going to stay on the page, and delegate the event to the children of that node that you want the event to apply to. That way the event will still fire regardless of whether or not you are loading new elements into the DOM.
Was This Post Helpful? 0
  • +
  • -

#10 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Re: .load() issue

Posted 13 February 2014 - 03:44 PM

View PostArtificialSoldier, on 13 February 2014 - 03:33 PM, said:

If you added a click event to that element, then it's going to fire if you click on it. Hopefully you don't think that you would add a click event, and then the browser would just choose not to execute it for whatever reason.

You should really use delegated events. Attach the event handlers to a parent node that is going to stay on the page, and delegate the event to the children of that node that you want the event to apply to. That way the event will still fire regardless of whether or not you are loading new elements into the DOM.


Could you explain this further? I don't understand.
Was This Post Helpful? 0
  • +
  • -

#11 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 330
  • View blog
  • Posts: 1,202
  • Joined: 15-January 14

Re: .load() issue

Posted 13 February 2014 - 03:51 PM

Check the documentation for on:

https://api.jquery.com/on/

Scroll down and read the section on direct and delegated events. The idea is to attach an event handler to a parent node (such as the document node itself), but give it a selector to tell it which child nodes the event applies to. The event itself bubbles up to the parent node and fires there, and if the element that was actually clicked on matches the delegation selector then the event will fire for that element. The end result is that you can attach your event to something like the document, which will never go away, and as you continue to load new nodes the event handler will still work. If you attach the events directly to the child nodes then you'll have to keep re-attaching them as you add more nodes.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1