SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Reinitialising document ready function

    Hello,

    I have some event listeners in my document ready function and I make some items dragable with jqeury and jquery ui. See below part of my code. Most is copied from example jquery ui.
    Code:
    $(function() {
    	$("#ingeplandP li").draggable({
    		cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    		revert: "invalid", // when not dropped, the item will revert back to its initial position
    		helper: "clone",
    		cursor: "move"
    	});
    	$( "#ingeplandP li").click(function( event ) {
    		var $item = $( this ),
    			$target = $( event.target );
    
    		if ( $target.is( "a.ui-icon-trash" ) ) {
    			deleteImage( $item );
    		} else if ( $target.is( "a.ui-icon-refresh" ) ) {
    			recycleImage( $item );
    		}
    
    		return false;
    	});
            $("#startProject").change(testFunc);
    	$("#endProject").change(testFunc);
    });
    The testFunc is a simple function which executes a load

    Code:
    function testFunc()
    {
    	var start = $("#startProject");
    	var end = $("#endProject");
    	if(start.val() && end.val())
    	{
    		$('#beschikbaarP').load('includes/php/helpers/loadBeschikbaarP.php);
    	}
    }
    After the load has completed the inserted items have lost their listener and their dragability. I can make them dragable again and add the listeners manually, but that means I would have the first code parts two times. This is not good I guess. So I would like to know if somebody know off a way to initialise my code in my first code block again after the load has completed.

    I have looked around, but can't seem to find what I look for. Maybe I use the wrong terms.

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a smart moment and got a solution. Don't know if it is correct to do it like this, but it works. I didn't really use much javascript before.

    I put a wrapper around my code that needs to be initialised.

    Code:
    $(function() {
    	loadReady();
    });
    
    function loadReady()
    {
            $("#ingeplandP li").draggable({
    		cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    		revert: "invalid", // when not dropped, the item will revert back to its initial position
    		helper: "clone",
    		cursor: "move"
    	});
    	$( "#ingeplandP li").click(function( event ) {
    		var $item = $( this ),
    			$target = $( event.target );
    
    		if ( $target.is( "a.ui-icon-trash" ) ) {
    			deleteImage( $item );
    		} else if ( $target.is( "a.ui-icon-refresh" ) ) {
    			recycleImage( $item );
    		}
    
    		return false;
    	});
            $("#startProject").change(testFunc);
    	$("#endProject").change(testFunc);
    }
    And modified my testFunc

    Code:
    function testFunc()
    {
    	var start = $("#startProject");
    	var end = $("#endProject");
    	if(start.val() && end.val())
    	{
    		$('#beschikbaarP').load('includes/php/helpers/loadBeschikbaarP.php', loadReadyFunction);
    	}
    }
    Is this good practise?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •