• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Jscript Conflicts

#1
[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:
&lt;?Php echo link_tag('assets/ui-lightness/jquery-ui-1.8.20.custom.css'); ?&gt;
<$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

#2
[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?

#3
[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>

#4
[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.

#5
[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 ($).

#6
[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>

#7
[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.


#8
[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.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.