[El Forum]

[eluser]Shiju S S[/eluser]
I have loaded the following j$cripts for a slider, autocomplete, date picker and password strength.
My slider and date picker is not working after loading the autocomplete $cripts.

Slider:

Code:

<$script language="javascript" type="text/javascript" src="&lt;?Php echo base_url()?&gt;assets/slider/jquery.easing.js"><$script>

Clash with

Code:

<$cript type="text/javascript"  src="&lt;?Php echo base_url()?&gt;autocomplete/jquery-1.7.1.min.js"><$cript>
and
This function:
<$cript type="text/javascript">
var $j = jQuery.noConflict();
var base_url = "&lt;?php echo base_url();?&gt;";

The date picker has

Code:

<?Php echo link_tag('assets/ui-lightness/jquery-ui-1.8.20.custom.css'); ?>
<$cript type="text/javascript" src="&lt;?Php echo base_url()?&gt;assets/js/jquery-ui-1.8.20.custom.min.js"> </$cript>

Can someone help me

[El Forum]

[eluser]pickupman[/eluser]
If you are already using jQueryUI, why not just use the auto complete widget already included. And by clashing,what error are you actually getting? Also it looks your scripts are jQuery why the noConflict?

[El Forum]

[eluser]Shiju S S[/eluser]
The noconflict function in the code below is not allowing other functions to work: That is all I know.

Code:

<$cript type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
var base_url = "&lt;?php echo base_url();?&gt;";

$j(function()

    {  



  function log( message ) {

   $j( "<div/>" ).text( message ).prependTo( "#log" );

   $j( "#log" ).scrollTop( 0 );
  }



  $j( "#tags" ).autocomplete({

  source: function(req, add){
  var base_url = "&lt;?php echo base_url();?&gt;";
  
       $j.ajax({

                    url: base_url + "searchbox/autocomplete",
    
                    dataType: 'json',

                    type: 'POST',

                    data: {fields:$j("#tags").val()},

                    success: function(data){

                        add(data);
      
                   }

                }); },

minLength: 0,

  select: function( event, ui )

                {

   log( ui.item ?

      "Selected: " + ui.item.value + " aka " + ui.item.id :

      "Nothing selected, input was " + this.value );

  }

  });

    });  

<$script>

Password strength checker function is

Code:

<$cript type="text/javascript">
  $(function() {
  $('.password').pstrength();
  });
<$cript>

Another Slider Function

Code:

<$cript type="text/javascript">
$(document).ready( function(){
  var buttons = { previous:$('#jslidernews2 .button-previous') ,
      next:$('#jslidernews2 .button-next') };    
  $('#jslidernews2').lofJSidernews( { interval:5000,
             easing:'easeInOutQuad',
            duration:1200,
            auto:true,
            mainWidth:684,
            mainHeight:300,
            navigatorHeight  : 100,
            navigatorWidth  : 310,
            maxItemDisplay:3,
            buttons:buttons } );      
});

<$cript>

[El Forum]

[eluser]pickupman[/eluser]
I've always preferred to use this method for noConflict

Code:

jQuery(document).ready(function($){
  //Passing $ to the ready function converts $ shorthand reference to jQuery
  $(".stuff_here").something();
});

All references inside the ready() function will get passed the jQuery object allowing it to work with out conflict.

[El Forum]

[eluser]CroNiX[/eluser]
If you use no-conflict mode, then all of your plugins also must be written to be able to use it. If not, then they can't access jQuery, unless they used jQuery().method instead of $().method, but most use the shorthand version ($).

[El Forum]

[eluser]Shiju S S[/eluser]
I have no knowledge in jquery functions. Can you please help me to remove this no conflict and redefine it using ready function as you have explained.

Code:

<$cript type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict1();
var base_url = "&lt;?php echo base_url();?&gt;";

$j(function()

    {  



  function log( message ) {

   $j( "<div/>" ).text( message ).prependTo( "#log" );

   $j( "#log" ).scrollTop( 0 );
  }



  $j( "#tags" ).autocomplete({

  source: function(req, add){
  var base_url = "&lt;?php echo base_url();?&gt;";
  
       $j.ajax({

                    url: base_url + "searchbox/autocomplete",
    
                    dataType: 'json',

                    type: 'POST',

                    data: {fields:$j("#tags").val()},

                    success: function(data){

                        add(data);
      
                   }

                }); },

minLength: 0,

  select: function( event, ui )

                {

   log( ui.item ?

      "Selected: " + ui.item.value + " aka " + ui.item.id :

      "Nothing selected, input was " + this.value );

  }

  });

    });  

<$cript>

[El Forum]

[eluser]pickupman[/eluser]
I believe I already gave you the example of what to use. See my post from above. Just use the script block I posted above and put your jquery code inside of it. You can also remove the noConflict line from the code as well.

[El Forum]

[eluser]Shiju S S[/eluser]
Thank you sir, I got it done by replacing $j( with $( and removing the
var $j = jQuery.noConflict1();
That was all I knew. Any how it works.