Search Results

Search found 75 results on 3 pages for 'noconflict'.

Page 2/3 | < Previous Page | 1 2 3  | Next Page >

  • Why this jquery plugin not working with 1.4.2

    - by metal-gear-solid
    http://plugins.jquery.com/project/semantictabs What is the means of this Status - Recommended for 1.0.x I'm using this plugin code as it is http://plugins.jquery.com/files/jquery.semantictabs.js_4.txt then this ( I'm also using prototype.js onsite) jQuery.noConflict(); jQuery(document).ready(function(){ $("#mytabset").semantictabs({ panel:'.mypanelclass', //-- Selector of individual panel body head:'headelement', //-- Selector of element containing panel header, i.e. h3 active:':first' //-- Which panel to activate by default }); });

    Read the article

  • using getScript to import plugin on page using multiple versions of jQuery

    - by mikez302
    I am developing an app on a page that uses jQuery 1.2.6, but I would like to use jQuery 1.4.2 for my app. I really don't like to use multiple versions of jQuery like this but the copy on the page (1.2.6) is something I have no control over. I decided to isolate my code like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <script type="text/javascript" src="jquery-1.2.6.min.js> <script type="text/javascript" src="pageStuff.js"> </head> <body> Welcome to our page. <div id="app"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" src="myStuff.js"> </div> </body></html> The file myStuff.js has my own code that is supposed to use jQuery 1.4.2, and it looks like this: (function($) { //wrap everything in function to add ability to use $ var with noConflict var jQuery = $; //my code })(jQuery.noConflict(true)); This is an extremely simplified version, but I hope you get the idea of what I did. For a while, everything worked fine. However, I decided to want to use a jQuery plugin in a separate file. I tested it and it acted funny. After some experimentation, I found out that the plugin was using the old version of jQuery, when I wanted it to use the new version. Does anyone know how to import and run a js file from the context within the function wrapping the code in myStuff.js? In case this matters to anyone, here is how I know the plugin is using the old version, and what I did to try to solve the problem: I made a file called test.js, consisting of this line: alert($.fn.jquery); I tried referencing the file in a script tag the way external Javascript is usually included, below myStuff.js, and it came up as 1.2.6, like I expected. I then got rid of that script tag and put this line in myStuff.js: $.getScript("test.js"); and it still came back as 1.2.6. That wasn't a big surprise -- according to jQuery's documentation, scripts included that way are executed in the global context. I then tried doing this instead: var testFn = $.proxy($.getScript, this); testFn("test.js"); and it still came back as 1.2.6. After some tinkering, I found out that the "this" keyword referred to the window, which I assume means the global context. I am looking for something to put in place of "this" to refer to the context of the enclosing function, or some other way to make the code in the file run from the enclosing function. I noticed that if I copy and paste the code, it works fine, but it is a big plugin that is used in many places, and I would prefer not to clutter up my file with their code. I am out of ideas. Does anyone else know how to do this?

    Read the article

  • jQTouch with PhoneGap on webOS

    - by Steve Nay
    I'm writing an application in PhoneGap that I want to run on iOS, Android, and webOS. jQTouch plays nice with everything on iOS and Android, but not webOS. Since the webOS Mojo framework is based on Prototype (which uses the $ variable), it's necessary to use jQuery in noConflict mode. I can handle that much. However, the problem is that I also want to use the jQTouch plugin. The jqtouch.js file uses $ throughout, causing JavaScript errors when that file is loaded. Is there a way to run the jQTouch plugin (or any plugin for that matter) in my PhoneGap application without interfering with Prototype?

    Read the article

  • Drag and drop: jQuery UI or Scriptaculous?

    - by jpartogi
    Dear all, I am in the middle of the road whether to use jQuery UI or Scriptaculous for drag and drop. I am using Ruby on Rails, and Scriptaculous support in Ruby on Rails is superb with the existence of scriptaculous_helper.rb. But I have already use jQuery for the ajax and DOM manipulation. I do not mind to use scriptaculous since we can use jQuery.noConflict() in the code. I also kind of get the impression that scriptaculous drag and drop is better than jQuery UI drag and drop based on the online demos. So back to the original question, which one would you recommend as a drag and drop library and which one do you think is better than the other? Scriptaculous or jQuery UI?

    Read the article

  • How to convert this jquery code into simple javascript?

    - by metal-gear-solid
    How to convert this jquery code into simple javascript var $jt = jQuery.noConflict(); $jt(function($) { $jt('.tabs a').click(function(){ switch_tabs($jt(this)); return false; }); switch_tabs($jt('.defaulttab')); }); function switch_tabs(obj) { $jt('.tab-content').hide(); $jt('.tabs a').removeClass("selected"); var id = obj.attr("rel"); $jt('#'+id).show(); obj.addClass("selected"); } I want to use same effect without the need of jquery If i remove jquery and place simple javascript , functionality should remain

    Read the article

  • jQuery code works in Firebug, but not on its own

    - by Ben
    I'm having quite the brainbuster of an issue right now. I am trying to change a link's hash tag at the end from "respond" to "comments" with jQuery. I have a simple script that should do this, however it does not work. The link does not change. However, Firebug shows no errors and when I run the code in Firebug's console, it works just as I intend. Why doesn't this work on its own? Does anybody have a solution, I'm at my wits edge with this one. (function ($) { $(document).ready(function() { $("a[href$='respond']").each(function() { $(this).attr("href", $(this).attr('href').replace("respond", "comments")); }); }); })(jQuery.noConflict()); Thanks so much, I know this might be a pain to test but I'm really thankful.

    Read the article

  • Jquery Conflicts with another Jquery Library

    - by Johangsl
    I am currently trying to implement a jquery slider into a joomla website. I already implemented NoConflict(); so that it doesn't step into joomla. And it works, BUT for another reason wich I do not understand it enters another jquery file called jsloader.js of a plugin I use for picture gallery display. I suppose all the module jquery files get preloaded before the one im calling inside the template. it enters the function() in the jsloader.js instead of the one in my jquery file. How Can I force it to enter my jquery file instead of other

    Read the article

  • jQuery fadeTo not working in IE8

    - by Lynda
    I have a div fading in using fadeTo. It works great in Firefox and IE9. It does not work in IE8. Here is my code: JS: var $j = jQuery.noConflict(); window.onload = function(){ $j('#fadein').fadeTo(6000, 1, function() { }); }; HTML <div class="img-center" id="fadein" style="opacity:0;"> <img src="src.jpg" alt="Text" class="feature-image" /> </div> How do I get this to work in IE8? I do not mind changing from fadeTo to fadeIn or some other method of fading in a div as long as it works in IE8.

    Read the article

  • problem with the drop down menu with jquery

    - by amir
    Hi Basically I have some links which include some other links, I'm trying to show the parent links only and when one clicks on the parent link the child links should appear and when one clicks on the parent link again the child link should disappear, the code works for the first click and it opens the relevant child links but how do I make them disappear when I click on the parent link again, thanks for the help. jQuery.noConflict(); jQuery(document).ready(function(e) { jQuery('.nav-container ul.level0 li.level1 a').click(function(e) { e.preventDefault(); jQuery(this).css({'background':'#000000','color':'#ffffff'}); jQuery('.nav-container ul.level0 li.level2 a').css('display','block'); }); });

    Read the article

  • Form variable does not refresh with ajax call

    - by ChrisOPeterson
    I'm building a simple email sending form and wanted to make it with ajax. The form submits correctly the first time but if you make any subsequent changes to the text in the form and then submit again then jquery does not pick up on the changes and posts the old data. Whats going on? <script type="text/javascript"> var $j = jQuery.noConflict(); $j(document).ready(function() { var submit_url = "mail_submit.php"; var send_email = $j("#sendemail"); send_email.click(function() { var form = $j("#post"); $j.post(submit_url, form.serialize(), function(data) { alert(data); }); }); });

    Read the article

  • Loading jQuery multiple times in the same page

    - by Winaji
    I'm implementing a plug-in that's embeddable in different sites (a la Meebo, Wibiya), and I want to use jQuery. Problem is, the site I'm embedding to, may already have a jQuery script loaded. The question is, what's the best approach for this kind of problem: Should I just check if jQuery is already loaded and if so, use the original site's jQuery, otherwise load it myself? If I use this approach, am I not risking comaptibility problems (i.e. the site uses an old version of jQuery)? Should I load jQuery myself (whether it's already loaded or not) and call "jQuery.noConflict(true)" when it's finished loading? If so, how can I make sure that my jQuery has finished loading (hooking to the onLoad event doesn't seem to work all the time, and polling for "jQuery" won't work for obvious reasons)? Should I do something else? Thanks.

    Read the article

  • browser scroll not going at bottom of toggle?

    - by metal-gear-solid
    I 'm using this code to make a toogle effect at bottom of the page. it's working but toogle div going under the fold but browser do not to scroll at bottom following the toogle area <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link jQuery('a#sm_toggle').click(function() { jQuery('#sitemapContainer').slideToggle(400); return false; }); }); </script>

    Read the article

  • mootools element is null using calendar EightySix plugin

    - by I Like PHP
    i m using mootools Eighty six calendar from this link i download the code and customize according to my need , it's working good on single HTML page but when i embed this code with my php page then it display below error element is null [Break on this error] element.appendChild(context);\n (on line 1712 of js/mootools-1.2.4-core.js) i m unable to debug this kind of error... please tell me where is the problem and how to solve it? one more thing: it was working fine with mootools v 1.2 i m using Jquery on header file of that php page, but also written jQuery.noConflict() in header.php file my basic code is here <link rel="stylesheet" type="text/css" href="css/calendar-eightysix-default.css" media="screen" /> <script type="text/javascript" src="js/mootools-1.2.4-core.js"></script> <script type="text/javascript" src="js/mootools-1.2.4.2-more.js"></script> <script type="text/javascript" src="js/calendar-eightysix-v1.0.1.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { new CalendarEightysix('myCalendar',{ 'format': '%a %D %B %Y', 'theme': 'default red', 'defaultDate': 'today', 'minDate': 'tomorrow', 'offsetY': -4 }) }); </script> and later <input id="myCalendar" name="myCalendar" type="text" maxlength="10" > please take intrest and help me Thanks always

    Read the article

  • jQuery and MooTools Conflict

    - by flipflopmedia
    Okay, so I got jQuery to get along with MooTools with one script, by adding this at the top of the jQuery script: var $j = jQuery.noConflict(); and then replacing every: $( with $j( But how would you get MooTools to like the following script that using jQuery?? Thanks in advance for any input, Tracy //Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com var fadecontentviewer={ csszindex: 100, fade:function($allcontents, togglerid, selected, speed){ var selected=parseInt(selected) var $togglerdiv=$("#"+togglerid) var $target=$allcontents.eq(selected) if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link) alert("No content exists at page number "+selected+"!") return } if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){ var $toc=$("#"+togglerid+" .toc") var $selectedlink=$toc.eq(selected) $("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg') $("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg') $target.css({zIndex: this.csszindex++, visibility: 'visible'}) $target.hide() $target.fadeIn(speed) $toc.removeClass('selected') $selectedlink.addClass('selected') $togglerdiv.attr('lastselected', selected+'pg') } }, setuptoggler:function($allcontents, togglerid, speed){ var $toc=$("#"+togglerid+" .toc") $toc.each(function(index){ $(this).attr('pagenumber', index+'pg') }) var $next=$("#"+togglerid+" .next") var $prev=$("#"+togglerid+" .prev") $next.click(function(){ fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed) return false }) $prev.click(function(){ fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed) return false }) $toc.click(function(){ fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed) return false }) }, init:function(fadeid, contentclass, togglerid, selected, speed){ $(document).ready(function(){ var faderheight=$("#"+fadeid).height() var $fadecontents=$("#"+fadeid+" ."+contentclass) $fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'}) fadecontentviewer.setuptoggler($fadecontents, togglerid, speed) setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100) $(window).bind('unload', function(){ //clean up $("#"+togglerid+" .toc").unbind('click') $("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click') }) }) } }

    Read the article

  • jQuery HOW TO?? pass additional parameters to success callback for $.ajax call ?

    - by dotnetgeek
    Hello jQuery Ninjas! I am trying, in vain it seems, to be able to pass additional parameters back to the success callback method that I have created for a successful ajax call. A little background. I have a page with a number of dynamically created textbox / selectbox pairs. Each pair having a dynamically assigned unique name such as name="unique-pair-1_txt-url" and name="unique-pair-1_selectBox" then the second pair has the same but the prefix is different. In an effort to reuse code, I have crafted the callback to take the data and a reference to the selectbox. However when the callback is fired the reference to the selectbox comes back as 'undefined'. I read here that it should be doable. I have even tried taking advantage of the 'context' option but still nothing. Here is the script block that I am trying to use: <script type="text/javascript" language="javascript"> $j = jQuery.noConflict(); function getImages(urlValue, selectBox) { $j.ajax({ type: "GET", url: $j(urlValue).val(), dataType: "jsonp", context: selectBox, success:function(data){ loadImagesInSelect(data, $j(this)) } , error:function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); } }); } function loadImagesInSelect(data, selectBox) { //var select = $j('[name=single_input.<?cs var:op_unique_name ?>.selImageList]'); var select = selectBox; select.empty(); $j(data).each(function() { var theValue = $j(this)[0]["@value"]; var theId = $j(this)[0]["@name"]; select.append("<option value='" + theId + "'>" + theValue + "</option>"); }); select.children(":first").attr("selected", true); } From what I have read, I feel I am close but I just cant put my finger on the missing link. Please help in your typical ninja stealthy ways. TIA

    Read the article

  • JS Object this.method() breaks via jQuery

    - by Peter Boughton
    I'm sure there's a simple answer to this, but it's Friday afternoon and I'm tired. :( Not sure how to explain it, so I'll just go ahead and post example code... Here is a simple object: var Bob = { Stuff : '' , init : function() { this.Stuff = arguments[0] } , doSomething : function() { console.log( this.Stuff ); } } And here it is being used: $j = jQuery.noConflict(); $j(document).ready( init ); function init() { Bob.init('hello'); Bob.doSomething(); $j('#MyButton').click( Bob.doSomething ); } Everything works, except for the last line. When jQuery calls the doSomething method it is overriding 'this' and stopping it from working. Trying to use just Stuff doesn't work either. So how do I refer to an object's own properties in a way that allows jQuery to call it, and also allows the object to work with the calling jQuery object? i.e. I would like to be able to do things like this: doSomething : function() { console.log( <CurrentObject>.Stuff + $j(<CallerElement>).attr('id') ); } (Where <CurrentObject> and <CallerElement> are replaced with appropriate names.)

    Read the article

  • jQuery XML loading and then innerfade effect

    - by Ryan Max
    Hello, I think I can explain myself without code, so for brevity's sake here we go: I am using jquery to pull data from an xml and put it into a ul on the page with each xml entry as a li. This is working great! However, what I am trying to do afterwards is use the innerfade plugin to make a simple animation between each of the li's. It's not working though, as it is still just loading the static list with each item visible (whereas if innerfade was working it would only display the first....then fade into the second, etc) It's not an innerfade problem however, because if I add the list in manually to the page (not injecting it with jquery) then the innerfade works fine. I'm relatively new to DOM scripting, so I think I am missing something here. I'm not quite sure how jQuery sequences everything, and I'm having trouble phrasing my question in a search engine friendly manner so here I am. Is it possible to have jquery pull the data from xml, then inject it into the page, then have innerfade work it's magic? Or am I thinking about this the wrong way? xml code: $.ajax({ type: "GET", url: "xml/playlist.xml", dataType: "xml", success: function(xml) { $(xml).find('song').each(function(){ var name = $(this).attr('title'); var date = $(this).attr('artist'); var message = $(this).attr('path'); $('<li></li>').html('<span id="an_name">'+name+'</span><span id="an_date">'+date+'</span><span id="an_message">'+message+'</span>').appendTo('#anniversary'); }); } }); innerfade code: <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready( function(){ jQuery('#anniversary').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', }); });

    Read the article

  • PHP: Retrieving JSON via jQuery ajax help

    - by iamjonesy
    Hey I have a script that is creating and echoing a JSON encoded array of magento products. I have a script that calls this script using jQuery's ajax function but I'm not getting a proper response. This is the script that creates the array: $collection = Mage::getModel('catalog/product')->getCollection(); $collection->addAttributeToSelect('name'); $collection->addAttributeToSelect('price'); $products = array(); foreach ($collection as $product){ $products[$product->getPrice()] = $product->getName(); } header('Content-Type: application/x-json; charset=utf-8'); echo(json_encode($products)); Here is my jQuery: <select id="products"> <option value="#">Select</option> </select> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ jQuery.ajax({ type: "GET", url: "http://localhost.com/magento/modules/products/get.php", dataType: "json", success: function(products) { jQuery.each(products,function(price,name) { var opt = jQuery('<option />'); opt.val(name); opt.text(price); jQuery('#products').append(opt); }); } }); }); </script> I'm getting a response from this but I'm not seeing a any JSON. I'm using firebug. I can see there has been a JSON encoded response but the response tab is emtyp and my select boxes have no options. Can anyone see and problems with my code? Here is the response I should get: {"82.9230":"Dummy","177.0098":"Dummy 2","76.0208":"Dummy 3","470.6054":"Dummy 4","357.0083":"Dummy Product 5"} Thanks, Billy

    Read the article

  • Why is this bookmarklet code saying jQuery is not defined even though jQuery is included?

    - by Josh Brown
    I am creating a bookmarklet and the code below is not working on first try. When I goto a page, it says "jQuery is not defined". But, if I click it again, it works perfectly? var qrcodetogo = { jQURL: 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', jQUIURL: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js', jQUIThemeURL: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css', init: function(){ this.createLink('qrcodetogo_UI-Lightness', this.jQUIThemeURL); this.createScript('qrcodetogo_jQuery', this.jQURL); this.createScript('qrcodetogo_jQueryUI', this.jQUIURL); this.createHiddenDiv('qrcodetogo_dialog','This is a Test.'); jQuery.noConflict(); }, showQRCode: function() { jQuery('#qrcodetogo_dialog').dialog(); }, createLink: function(id, url) { var l = document.createElement('link'); l.href = url; l.rel = 'stylesheet'; l.type = 'text/css'; l.media = 'screen'; l.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(l); }, createScript: function(id, url) { var s = document.createElement('script'); s.src = url; s.id = id; document.getElementsByTagName('head')[0].appendChild(s); }, createHiddenDiv: function(id, body) { var div = document.createElement('div'); div.id = id; div.innerHTML = body; div.style.display = 'none'; document.getElementsByTagName('body')[0].appendChild(div) } } qrcodetogo.init(); qrcodetogo.showQRCode();

    Read the article

  • jquery load returns empty, possible MVC 2 problem?

    - by Max Fraser
    I have a site that need to get some data from a different sit that is using asp.net MVC/ The data to get loaded is from these pages: http://charity.hondaclassic.com/home/totaldonations http://charity.hondaclassic.com/Home/CharityList This should be a no brainer but for some reason I get an empty response, here is my JS: <script> jQuery.noConflict(); jQuery(document).ready(function($){ $('.totalDonations').load('http://charity.hondaclassic.com/home/totaldonations'); $('#charityList').load('http://charity.hondaclassic.com/home/CharityList'); }); </script> in firebug I see the request is made and come back with a response of 200 OK but the response is empty, if you browse to these pages they work fine! What the heck? Here are the controller actions from the MVC site: public ActionResult TotalDonations() { var total = "$" + repo.All<Customer>().Sum(x => x.AmountPaid).ToString(); return Content(total); } public ActionResult CharityList() { var charities = repo.All<Company>(); return View(charities); } Someone please out what stupid little thing I am missing - this should have taken me 5 minutes and it's been hours!

    Read the article

  • how to change onclick event with jquery?

    - by user550758
    I have create a js file in which i am creating the dynamic table and dynamically changing the click event for the calendar but onclicking the calender image for dynamic generated table, calendar popup in the previous calendar image. Please help me code /***------------------------------------------------------------ * *Developer: Vipin Sharma * *Creation Date: 20/12/2010 (dd/mm/yyyy) * *ModifiedDate ModifiedBy Comments (As and when) * *-------------------------------------------------------------*/ var jq = jQuery.noConflict(); var ia = 1; jq(document).ready(function(){ jq("#subtaskid1").click(function() { if(ia<=10){ var create_table = jq("#orgtable").clone(); create_table.find("input").each(function() { jq(this).attr({ 'id': function(_, id) { return ia + id }, 'name': function(_, name) { return ia + name }, 'value': '' }); }).end(); create_table.find("select").each(function(){ jq(this).attr({ 'name': function(_,name){ return ia + name } }); }).end(); create_table.find("textarea").each(function(){ jq(this).attr({ 'name': function(_,name){ return ia + name } }); }).end(); create_table.find("#f_trigger_c").each(function(){ var oclk = " displayCalendar(document.prjectFrm['"+ ia +"dtSubDate'],'yyyy-mm-dd', this)"; //ERROR IS HERE var newclick = new Function(oclk); jq(this).click(newclick); }).end(); create_table.appendTo("#subtbl"); jq('#maxval').val(ia); ia++; }else{ var ai = ia-1; alert('Only ' + ai + ' SubTask can be insert'); } }); });

    Read the article

  • JQuery date picker does not firing in ajax page using Rails

    - by prabu
    Hi Here I have using datepicker from JQueryUI in my public/javascript folder as effects,prototype,control,dragdrop js files. in my public folder contains jqueryui development buddle. (css,js,development-bundle) in layout/application.rhtml <%= stylesheet_link_tag 'application' %> <%=javascript_include_tag :defaults%> <%= stylesheet_link_tag '/jquery-ui/css/custom-theme/jquery-ui-1.8.1.custom.css' %> <%=javascript_include_tag "/jquery-ui/js/jquery-1.4.2.min.js"%> <%=javascript_include_tag "/jquery-ui/js/jquery-ui-1.8.1.custom.min.js"%> <script> $(document).ready(function(){ var $j=jQuery.noConflict(); $j( '#date' ).datepicker({ dateFormat: 'dd-mm-yy' }); }); </script> in home/index.rhtml <%title "Home"%> <%=link_to "Add Details" ,:action=>"add"%> <%=link_to_remote "Ajax Add Details", :update=>"add" , :url=>{ :action=>"add" }%> <div id='add' /> in home/add.rhtml <%title "Add details"%> <%form_tag :action=>"create" do%> Name : <%=text_field_tag "name" ,"",:size=>15%> DOB : <%=text_field_tag "dob","",:id=>"date"%> <%=submit_tag "Save"%> <%end%> the datepicker works when I run home/add.rhtml directly but the datepicker not work when i run ajax page home/index.rhtml Any solutions for that,????

    Read the article

  • Can't get jQuery to wokr with Prototype - tried everything....

    - by thinkfuture
    Ok so here is the situation. Been pulling my hair out on this one. I'm a noob at this. Only been using rails for about 6 weeks. I'm using the standard setup package, and my code leverages prototype helpers heavily. Like I said, noob ;) So I'm trying to put in some jQuery effects, like PrettyPhoto. But what happens is that when the page is first loaded, PrettyPhoto works great. However, once someone uses a Prototype helper, like a link created with link_to_remote, Prettyphoto stops working. I've tried jRails, all of the fixes proposed on the JQuery site to stop conflicts... http://docs.jquery.com/Using_jQuery_with_Other_Libraries ...even done some crazy things likes renaming all of the $ in prototype.js to $$$ to no avail. Either the prototype helpers break, or jQuery breaks. Seems nothing I do can get these to work together. Any ideas? Here is part of my application.html.erb <%= javascript_include_tag 'application' %> <%= javascript_include_tag 'tooltip' %> <%= javascript_include_tag 'jquery' %> <%= javascript_include_tag 'jquery-ui' %> <%= javascript_include_tag "jquery.prettyPhoto" %> <%= javascript_include_tag 'prototype' %> <%= javascript_include_tag 'scriptalicious' %> </head> <body> <script type="text/javascript" charset="utf-8"> jQuery(document).ready( function() { jQuery("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> If I put prototype before jquery, the prototype helpers don't work If I put the noconflict clause in, neither works. Thanks in advance! Chris

    Read the article

  • Using JQuery in an AJAX control and avoiding conflicts

    - by Rich Andrews
    Hi, I am using JQuery within a custom AJAX user control (part of a home grown toolkit) and I need to ensure that JQuery is present on the hosting page. There can be multiple instances of the control on a page and some controls may need to use different versions of JQuery. At the moment I am using the following code to load in JQuery when the control initializes... Page.ClientScript.RegisterClientScriptInclude(Page.GetType(), "jquery-1.4.4.min.js", this.ResolveUrl("TextControlPlugin/lib/jquery-1.4.4.min.js")); This works because the scriptmanager handles not putting multiple copies of the same script into he page. Problems... I cannot use JQuery statically in the calling page (I may not have a control on the page but need to use JQuery) The scriptmanager appears to handle only duplicate URL's and I will need to deploy it from potentially 2 different URL's (the calling page's copy and the controls copy) So, is there a way to isolate a version of JQuery to the context of my control that doesnt interfear with any use of JQuery from the calling page? The developer writing the page may not have access to the internals of the control. I have looked at JQuery.noConflict() but cannot seem to get it to work correctly - I believe I'm having problems with the order in which the scripts are injected into the page - I keep getting JQuery is undefined errors. Any help would be much appreciated

    Read the article

< Previous Page | 1 2 3  | Next Page >