4 Replies - 2422 Views - Last Post: 23 October 2013 - 06:17 AM

#1 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 109
  • Joined: 09-December 13

jQuery ajax loading php file to reload part of page is unbinding

Posted 23 October 2013 - 02:57 AM

hi, when a part of the page gets reloaded using the following jquery:

        $.ajax({
            url: "PHP FILE HERE",
            type: "POST",
            data: data,
            success: function (html) {
                $('ELEMENT TO LOAD PHP IN').html(html);
            }
        })



i have elements with classes that are meant to be bind to jquery functions in some of my ajax loads, but as soon as they are reloaded the functions (click, keyup, etc etc) unbind and no longer work. I am coding the these functions as follows:

$(document).on("click or keyup, etc etc", "THE ELEMENT TO BE CLICKED OR SOMTHING", function (e) {
    //stuff i want it do do when clicked or what ever
});



So my question is how do I keep a buttons functionality, text box or any elements after that html element has been reloaded with jQuery Ajax with PHP???

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery ajax loading php file to reload part of page is unbinding

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: jQuery ajax loading php file to reload part of page is unbinding

Posted 23 October 2013 - 04:03 AM

Is the html still correctly formed after the new content is loaded? And do the elements still have the correct class-names, and structure, etc., that would mean that they are still successfully targeted by your on() method?

Are there any errors in your browser's console?

on() the docs (for reference)
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: jQuery ajax loading php file to reload part of page is unbinding

Posted 23 October 2013 - 04:13 AM

$(document).on("click or keyup, etc etc", "THE ELEMENT TO BE CLICKED OR SOMTHING", function (e) {
    //stuff i want it do do when clicked or what ever
});

It would assist if you provided the real version of this.
Was This Post Helpful? 0
  • +
  • -

#4 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 109
  • Joined: 09-December 13

Re: jQuery ajax loading php file to reload part of page is unbinding

Posted 23 October 2013 - 05:29 AM

View Postandrewsw, on 23 October 2013 - 04:03 AM, said:

Is the html still correctly formed after the new content is loaded? And do the elements still have the correct class-names, and structure, etc., that would mean that they are still successfully targeted by your on() method?

Are there any errors in your browser's console?

on() the docs (for reference)


yes the HTML is all in check, and here is the full js file:


//GLOBAL VARIBLES 
var today = new Date();
var day_holder = today.getDate();
var month_holder = today.getMonth()+1; //January is 0!
var year_holder = today.getFullYear();
if(day_holder < 10)day_holder='0'+day_holder;
if(month_holder < 10)month_holder="0"+month_holder;
var cyclistsThatAreTicked = [];

//PAGE LOAD FUNCTIONS
$(document).ready(function () {
    LOAD_CALENDAR_PAGE(false);

});

function LOAD_EVENTS_PAGE(date) {
    //LOAD THE EVENTS PAGE
    $('.show_page').load('form_events.php', function () {
        //LOAD DATE IN HEADERS
        $('show_header_date').text(GET_MONTH(month_holder) + ' ' + year_holder);
        //LOAD DATE INTO THE DATE FIELD
        $('.event_date').val(day_holder + '-' + month_holder + '-' + year_holder);
    });
}


function LOAD_CALENDAR_PAGE(date) {
    //SET POST DATA
    var data = 'd=' + day_holder + '&m=' + month_holder + '&y=' + year_holder;
    //LOAD THE CALENDAR PAGE
    $('.show_page').load('calendar_page.php', function () {
        //LOAD DATE IN HEADERS
        $('.show_header_date').text(GET_MONTH(month_holder, year_holder) + ' ' + year_holder);
        //LOAD THE CALENDAR
        $.ajax({
            url: "update_calendar.php",
            type: "POST",
            data: data,
            success: function (html) {
                $('#show_cndr').html(html);
            }
        });
		//UPDATE EVENTS LIST HEADER WITH NEXT NUMBER OF EVENTS
		$.ajax({
			url: "update_events_list_heading.php",
			type: "POST",
			data: data,
			success: function (html) {
				$('#show_cndr_events_header').html(html);
			}
		});
    }); //   end   LOAD THE CALENDAR PAGE
}


Was This Post Helpful? 0
  • +
  • -

#5 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 109
  • Joined: 09-December 13

Re: jQuery ajax loading php file to reload part of page is unbinding

Posted 23 October 2013 - 06:17 AM

omg, turns out i was being a spoon, there are 3 ways this certain element could turn out due to the POST that is given to it......and....i forgot to add the class to two of them......yes i am a plumb :stupid:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1