Support

Account

Home Forums General Issues jQuery and new field type

Solved

jQuery and new field type

  • Hi there,
    I have a question regarding jQuery in combination with a new custom field type.
    I use the custom field template and I added the following example in the create field function:

    	function create_field( $field )
    	{
    		// defaults?
    		/*
    		$field = array_merge($this->defaults, $field);
    		*/
    
    		// perhaps use $field['preview_size'] to alter the markup?
    
    		// create Field HTML
    		?>
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
          <div id="dialog" title="Basic dialog">
            <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
          </div>
    		<?php
    	}

    But now I have the problem, that I have js Script in an external file that I load in the input_admin_enqueue_scripts function:

    	function input_admin_enqueue_scripts()
    	{
    		// Note: This function can be removed if not used
    
        //register front-end scripts
        wp_register_script('acf-input-fs_player_d', '/wp-content/themes/lensa/custom/fields/js/fs_player_dd.js', array('acf-input'), $this->settings['version']);
        
    		// register acf scripts
    		wp_register_script('acf-input-fs_player_dd', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version']);
    		wp_register_style('acf-input-fs_player_dd', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);
    
    		// scripts
    		wp_enqueue_script(array(
    			'acf-input-fs_player_dd',
          'acf-input-fs_player_d',
    		));
    
    		// styles
    		wp_enqueue_style(array(
    			'acf-input-fs_player_dd',
    		));
        
    
    	}

    in my external file I have the following:

     $(function() {
    $( "#dialog" ).dialog();
    });

    Now it seems that the script is fired before the HTML is fully initalized. Does anyone now what to do?

    Thanks in advance,
    javanese

  • Hi @javanese

    It is important to place your jQuery code within the acf/setup_fields action.
    This ensures that all HTML is ready for jQuery

    You can read more in this guide:
    http://www.advancedcustomfields.com/resources/getting-started/adding-custom-javascript-jquery-for-fields/

  • Hi @elliot,

    thank you for your answer. I have already read this article, but I don’t reaklly understand it. Do I have to create the acfg/setup_fields action in my wordpress functions.php or directly into my HTML in the create_field function() ?

    My create_field function looks like this now. But it doesn’t work 🙁

    	function create_field( $field )
    	{
    		// defaults?
    		/*
    		$field = array_merge($this->defaults, $field);
    		*/
    
    		// perhaps use $field['preview_size'] to alter the markup?
    
    		// create Field HTML
    		?>
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
          
          <script>
            $(document).live('acf/setup_fields', function(e, div){
     
            	// div is the element with new html.
            	// on first load, this is the $('#poststuff')
            	// on adding a repeater row, this is the tr
             
            	$(div).find('.class').each(function(){
             
            		$(this).doIt();
             
            	});
             
            });
            
            function doIt() {
                alert("Hello World!");
            }
          </script>
          <div id="dialog" title="Basic dialog">
            <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
          </div>
    		<?php
    	}

    Cheers,
    javanese

  • Sorry for speaking to myself. I have figured it out. I have done the following. Thanks again for your help @elliot

    <script type="text/javascript">
        
            jQuery(document).on('acf/setup_fields',function(e){
    		      //alert('test');
              jQuery( "#dialog" ).dialog();
    
        		
        	});
    
          </script>
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘jQuery and new field type’ is closed to new replies.