Compatibility issues with jquery libs - javascript

I am working on a crm adding some features. One of them was to use ajax to post to another page a use the returned information to fill out some forms. It worked great. I am using $.post and all that good stuff. I then noticed that one of the other prewritten features of the site stopped working. So I started poking around and the feature that stopped working was giving this error in the console log.
[19:15:21.013] TypeError: $("view_Option").selectedIndex is undefined # http://test.com/crm/modules/Calendar/script.js:598
So ok I figured I was linking to jquery twice or something along those lines so I commented out that line and it works. So I check my code to make sure that works too and now I get
[19:13:40.312] TypeError: $.post is not a function # http://test.com/crm/modules/Calendar/renterAutoUpdate.js:16
Can someone explain to me the reason this is happening and how I would go about fixing something like this?
[Edit] The line that determines whether my code or the prewritten code is going to work is
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Probably you've commented out the line, that was used elsewhere in your project. Try uncommenting it again and see what happens. The $.post is not a function should gone, and you should get back your first error.
If it happens, you have to fight back the first error, which is probably that jQuery doesnt have the .selectedIndex. Instead, you should write:
$("view_Option")[0].selectedIndex
Try this, and write, what happens.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
var $jq = jQuery.noConflict();
</script>
And then I did
$jq.post(
instead of
$.post(
Fixed all my issues for anyone else having this same problem

Related

Primefaces - Datatable Widget for var ... not available

I am using primefaces 4.0 and jsf 2.2 in my Application. I have created a page where a datatable is nested in a tabview. Now when I want to filter the datatable, it keeps loading and doesn't how a result.
After some time i recognized, that javascript throws the following error: "Widget for var 'test' not available! ".
I guess this should be the issue, but what's the problem or how can i solve this? Does anyone have an idea?
Best Regards!
I am posting my answer here hopefully can help some people out there.
I have the same problem. My case is I want to perform the default filter for my <p:dataTable>, thus, I have to perform the PF('dtWidgetVar').filter(); script in javascript when page load.
This is my initial attemp:
$(document).ready(function()
{
PF('dtWidgetVar').filter();
});
It looks perfectly fine, but just doesn't work. Until I find the error in Chrome console Widget for var 'dtWidgetVar' not available!, and googling it for hours, finally I found this thread. Therefore I add a $(function(){}); to wrap my script as below:
$(document).ready(function()
{
$(function()
{
PF('dtWidgetVar').filter();
});
});
BOOM!, finally it works. From here as well as here both stating that the $(function(){}); and $(document).ready(function(){}); are actually the same, so I have also no clue why it works. I have also try to only use $(function(){}); but it doesn't work. Have to use both functions to make it works, at least in my case. But still, I hope this helps some humans! Sorry for my bad English.
In the absence of posted code it's impossible to say. However, there are a couple of things I can suggest to look for.
Check to see if you have a duplicate widget name in your view.
Obviously you wouldn't intuit that from the message you got, but I
recall in the past getting this same message for duplicate widget
names
Check to see if you have a component where you've given the widget var the same name as the ID. I've read that this is to be avoided.
A very common error is to conflate ids and widget names. That
is, you are trying to use an ID as a widget var
See what in your code is trying to reference "test"
I can't confirm this myself, but I've seen other StackOverflow posts that suggest this is a possible error when you have imported two copies of the jQuery library
I've experienced Widget for var '[widgetVar]' not available when using p:ajax update="#all" inside a p:commandButton. I could avoid the issue by putting content to be updated in a h:panelGroup which I referenced in update and put the element declaring widgetVar outside that panel group.

ScrollToTop after AJAX call

In a project we are using teleriks RadAjaxManagerProxy to send AJAX requests and I was delegated the easy task to implement a scroll-to-top-of-the-screen behaviour through javascript after an AJAX call. This was not at all as easy as expected.
Among other things, I have tried placing my javascript function directly on the page, I have worked with RadAjaxManager.ResponseScript and I have tested with jquery AJAX functions but still no progress. Does anybody have a good clue how to solve it?
This is my latest attempt and I did actually make it work if putting an alert into the code, like this:
ScriptManager.RegisterStartupScript(Page, typeof(Page), "ScrollToTop", "alert('hello');", true);
But whenever I try to insert javascript code like window.location = '#'; or window.scrollTo(0,0); it nevertheless doesn't scroll to top. What am I missing?
ScriptManager.RegisterStartupScript is used only together with UpdatePanels, which I didn't use on my page. Instead I found a solution based on getting the actual RadAjaxManagerProxy for the page. This was done by using the function GetCurrent() on the MasterPage's RadAjaxManager. Hopefully this will save some hours for anyone else with the same problem! My solution:
RadAjaxManager.GetCurrent(Page).ResponseScripts.Add("window.scrollTo(0, 0);");

How do I use jQuery.noConflict();

After installing lightbox for my website my comments stopped working. I looked at the code and moved the javascript links that were in the <head> (the ones that came with lightbox) in the to above the javascript links that came with Wordpress-Buddypress. Before my javascript links from Lightbox were below the javascript links that came with Wordpress.
After making the switch, the comments started working again on my website but now the lightbox does not work.
When I use Firebug to find errors, I get this error.
$("#videogallery a[rel]").overlay is not a function
That code comes from "videolightbox.js" which was a file that came with my lightbox.
I did lots of reseach on this problem and I am thinking that I might need to use jQuery.noConflict(); but I have no idea how to use it? I was looking at this link
but I can't seem to get it to work because I have no idea how to use it. I also tried replacing all the $() with jQuery() but that did not solve my problem.
but I have no idea how to use it?
var $j = jQuery.noConflict();
and your code will change from
$(selector) to $j(selector)
A lot of examples are given here
http://api.jquery.com/jQuery.noConflict/
One thing to consider closely is the script loading order and watch for repeat loading of JQuery. In some (hopefully rare) situations, you can load JQuery, set up some code that uses it, then reload JQuery which tosses away the events that were set up after loading it the first time.
I know I ran into that situation once, but I can't remember the details that led to it occurring.
To your answer
$=jQuery.noConflict();
Now you can use $('#id').css(...);
The error is probably causing the rest of the code not being executed, .overlay is not a function means that .overlay is not a function and $ is working fine.
var test; test("#videogallery a[rel]").test()
//TypeError: test is not a function <-- You would see this if $ wasn't working
var test = function(){return {};};
test("#videogallery a[rel]").test();
//TypeError: test("#videogallery a[rel]").test is not a function <-- You see this because .overlay isn't working
It simply means you are trying to call .overlay before it exists.

$(“#request-brochure”).validate is not a function

This has got me baffled. I'm sure the solution is obvious, but I can't figure it out for the life of me.
All of the files are getting included correctly, and in the right order. I tried just removing the validation completely, just to see what would happen, and then started getting:
jQuery.easing[jQuery.easing.def] is not a function
...but only on this one page.
Can anyone offer any insights?
The page is at http://www.hotspring.co.nz/request-info/
You're loading two different versions of jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--...-->
<script type='text/javascript' src='http://www.hotspring.co.nz/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
One of them ends up as $() and doesn't have validate installed, the other ends up as jQuery() and does have validate installed; in particular, $() ends up as jQuery 1.5.2 and jQuery() ends up as 1.4.4. Open up a JavaScript console on your site and look at these:
$.fn.jquery // This will say 1.5.2
jQuery.fn.jquery // This will say 1.4.4
The solution is to just include one jQuery library.
Are you sure nothing else is competing for the "$" object? A lot of toolkits use that and that can cause a lot of issues with jQuery and its plugins. Experiment with this and see if that helps you.

jQuery call followed by clicking accordion control fires Ms Jscript error

I have jquery modal that works perfectly fine.
But after closing this modal and clicking on accordion control(MS ajax) fires
Jscript runtime error
Microsoft JScript runtime error:
Sys.ArgumentTypeException: Object of
type
'AjaxControlToolkit.AccordionSelectedIndexChangeEventArgs'
cannot be converted to type
'Sys.CancelEventArgs'. Parameter name:
instance
I have done days of searching. But I couldn't find a solution to this.
I have tried scriptmode="Release". Single reference call to the jquery file.
I read some parts saying that some it helped some people to turn of smart navigation but I couldn't find how to do so.
If anyone has any idea on this it will be much appreciated.
Please.. Help~!
I've solved this issue by putting this
var $j = jQuery.noConflict();
at the end of my jquery.js file and referencing all jquery functions with a $j, instead of $
Ok I found the problem. One of the controls inside the container(div) which is loaded by jquery was throwing an error. So in this case, the error message did not help much to track that particular control down.
Thanks a lot for your effort guys!.

Categories