last day (14 days later) » 

6:08 AM
1
A: Wordpress and JS Conflict

Notorious Pet0Try encapsulating your jquery and see if that helps at all. Can you post the code where you are calling .on() ? since that is the error you are getting. Take out the comma after the error function too. error:function(){ alert("Error"); } -- ^^ no comma (function($){ $(func...

 
Thank you for the reply. Unfortunately it does not work.
 
@chandan You said you were getting an error with .on(), can you post the code where you are calling .on() ?
 
Actually I don't know, it could be anywhere in the entire theme's js and the error is from jquery file :(
 
Well, that error is your problem. If jquery throws that error, its not going to work any more after that so any code after that won't run.
did you try removing that comma? Sometiems small syntax things like that actually help even though it seems stupid. What version of jquery are you running ?
 
It also give me this: Resource interpreted as Script but transferred with MIME type text/html
Yes I've removed the comma, I'm using jquery 1.5.1. I can give you the login and password if you can have a look.
 
6:09 AM
Hey man, I guess shoot me the login and I can check it out. Don't post it on the main question though, you don't want people goofing around and messing with it.
 
6:19 AM
thank you for the help.
URL: http://isotopethemes.com/js-conflict/wp-login.php
User id: isotope
Password: kKgZwi[x,4SI
If I remove the link to jquery in the custom field, all js starts working but the code can't get area locations.
 
I'll check it out... give me a few
its alot easier to figure out when I can log in, so this helps :)
 
okay, no problem :)
thank you for looking into it :)
 
6:45 AM
what part of the code did you say you remove to make it work ?
 
link to jquery in custom fields
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" language="JavaScript"></script>
 
ok gotcha
what page is that jquery on that you posted in your question, is that the header ? can you link ?
 
it's a google URL
 
no, the code your using
the $.ajax call
 
sorry I think I misunderstood you. the page is isotopethemes.com/js-conflict/community-listings/naples
ok that jquery is in the custom fileds
 
6:57 AM
where can i go to edit this ...
$.ajax({
url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
dataType: 'JSONP', // Notice! JSONP <-- P
success:function(json){
$('.output').html(json);
},
error:function(){
alert("Error")
},
});
 
you have to be logged in
Search for Custom Fields
Its right below the main editor after Admin Notes
 
ok gotcha, sorry, been a while since i messed w wordpress hehe
 
no problem :)
 
7:16 AM
so i take it you are using jsonp because of the cross domain error you get without it yes?
does the server that has the ajax script expect a jsonp response?
do you have access to that script? It may not be set up to accept jsonp
 
actually I have no idea
I thought of using Shadow DOM
which would restrict the effects only within the Shadow DOM and not affect rest of the page
but it will work only on IE10+
I'm not sure if the server expects jsonp response
 
if your not sure then it probably doesn't
your also getting an error indicating the server is sending back an html response which probably means it got your request and coudln't figure out how to handle it
Are you sending any data ? Or is this just a restful api? It seems restful
 
yes it's a restful api
but strange it blocks all js from working
 
There is probably an easier way to get this data ... give me a few mins to think about it ..
 
sure, thank a lot :)
 
7:21 AM
well, the js stops working because of the this.on error. which is related to a window event not getting the element it needs. I'm guessing once the api returns the data you need, that error will go away and the js will work again.
Window.onComputedStyle or something like that is what's causing that this.on error
its trying to set CSS on an element that doesn't exist (most likely because the api didn't return it)
are you able to upgrade your jquery version ? Not critical, but alot of changes in 2.0+
 
I tried doing it but that gave me a different error
 
the mime type one ?
or the computed style error maybe ?
anyway, let me work around getting this api data and we can worry about that later if we need to
 
okay, thank you for the explanation, I had no idea what was happening :)
 
7:37 AM
that server isn't even returning json. it's just a big block of html
actually, i was wrong, the ajax isn't have a problem. If i delete that whole ajax call, it still gives the this.on error. I guess I should ahve checked on that one 30 mins ago. So the error is occurring somewhere else in the code.
 
okay, should I try updating the jquery version
One more doubt I had, in the page source, there is a link to jquery but an additional link to jquery is required in the custom field for the whole thing to work
 
i'll check out the page source. I'm trying to figure out where this error is coming from. I updated the jquery version and error was still there.
actually, yeah .on was not introduced until 1.7. i upgraded to 2.0.1 now getting a new error. .. checking into it
 
8:16 AM
how do i edit the scripts its including in the header ? I'm pretty sure modernizr is throwing this error
 
well you'll need ftp for that, I'll send you the login in a min
after you login to FTP plz go to this folder: /isotopethemes/js-conflict/wp-content/themes/savant
host: 103.1.175.1
user id: jsconflict
pass: Chandan12!@
please tell me if you have any issues connecting
 
ok lemme check it out
 
9:00 AM
ok sry finally logged in...
do you know what file its in ?
the script tags for the <head> section ?
 
which file are you looking for
i'll locate and give you the location
 
the file that adds the script tags to the <head> section
 
files in head come form different locations like /js/ and /css/
 
Might be a function in WP too
It gets created when wp_head() is called
right, the files are linked to those locations
 
yes
 
9:03 AM
but i need to change the part where it says <script src="file.js"></script>
or i guess i coudl just rename the one i want to remove
ill just do that its easier
 
okay, I'll give you the location of file.js in a min
 
no its not that one hold on
i was just saying file.js as an example.
 
ah ok
ok got it
 
this one
<script type='text/javascript' src='http://isotopethemes.com/js-conflict/wp-content/themes/savant/core/js/lib/m‌​odernizr.min.js?ver=1.0.39'></script>
i found it tho hehe
 
okay :)
 
9:05 AM
well that pissed it off
no more error about computed style though haha
apparently the theme requires modernizr
without modernizr...
Uncaught TypeError: Core.initialize is not a function
So far here is where we are :
 
yes, I guess the theme requires modernizer to add some features
 
We need to upgrade to better jQuery (done) as 1.5.1 does not have .on() and throwing error.
The next error we get is modernizr throwing the error about ... one sec..
 
yes :), how about replacing $ with Jquery?
I found a similar question here: stackoverflow.com/questions/5706093/…
 
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
The encapsulation I originally gave you is already doing that.
 
ok
 
9:08 AM
The {jQuery} at the end gets put in place of all $
and allows you to use $ elsewhere, without causing a conflict, because its encapsulated
 
okay
i didn't knew that
 
so modernizr is throwing that weird error. i've googled it and looked it up on SO on a ton of different questions.
the modrnizr code does not look like a fun mountain to climb
 
how about using Shadow DOM?
 
go ahead and try a bunch of different jquery versions between 1.7 and 2.0
 
okay
 
9:13 AM
how would we use shadow dom to help with this ? im not clear on that
 
I would use shadow DOM to load the area locations (ajax call) in child DOM, so all the action which happens stays inside the child DOM
 
im not even loading any of that data and still getting these errors
Im looking at modernizr code to figure out whats going on
you can take a look too, but i warn you, its not pretty haha :P
 
okay :)
 
ok i lied, i was putting the data in getting those errors.
when i take the data out, no errors, but search bar and plus mark still do not work
if went back to 1.5.1 prob would make search bars work ... hmmm...
 
yes
I guess so, the theme or the code is compatable with 1.5.1
 
9:20 AM
is that thing using revolution slider to slide down by any chance ? do you know ?
 
I know it's not using revolution slider
I have the code which is used for the slide down
function initForms(body) {
var forms = body.find(".sv-form");
forms.delegate(".sv-checkbox:not(.alt-radio) input", "change", function() {
$(this.parentNode.parentNode).toggleClass("sv-status-active");
});
forms.delegate(".sv-checkbox.alt-radio input", "change", function() {
$(this.parentNode.parentNode).addClass("sv-status-active");
});
forms.each(function(i, node) {
var form = $(node);
var activeRadioValues = [];
var activeRadios = form.find("input:radio:checked");
activeRadios.map(function() {
 
where is it located ?
 
client.js and client.headroom.js
I'll send you the exact location in a sec
 
doesnt look like it would be causing thjis problem though to me
you never know tho
 
s-conflict/wp-content/themes/savant/core/js
js-conflict/wp-content/themes/savant/core/js
 
9:23 AM
another thing we might try is rolling back to the 1.5.1 and then trying to find where in the code .on() is being called. that's what it was mad about originally
 
ok, I guess that would simplify the problem
 
im still looking at modernizr, but honstely if you know that theme is designed for 1.5, then we should stick with 1.5
 
I didn't knew it was designed for 1.5 but I am assuming since upgrading breaks it
 
did you try 1.7 or .18 ?
1.8
 
No, I'll try and get back in a min
 
9:35 AM
It supports the latest version of wordpress so I don't see why it wouldn't support edge jquery too
we'll get this figured out. im determined now. haha
 
ha ha :), I thought the same when I encountered this 2 days ago :)
I don't know how this works but it works - by upgrading to jquery version 1.7.1 :)
I can't thank you enough, thought it was simple at last the lengths you've gone to help me, thank you :)
 
hold on it may be a change to modernizr i just made
but yeah you are welcome of course. glad to help.
let me go change modernizr back and see if it still works
 
okay
 
yep
it was just the jquery version
ill go update my answer. if you can give me the checkmark and an upvote that would be great ;)
 
sure, with please :)
*pleasure
please give me your mail id, I can contact you for any assistance for any of my project for paid or free help
I'm bit new to JS and I would like to know more about it, I know the basics but I can't go and debug like you.
any suggestions on how I can improve on the practical stuff?
 
9:48 AM
sure, its techsavant777@gmail.com (thats what you were asking for right ? )
 
yes
any suggestions on how I can improve my practical experince with JS?
 
cool, yeah hit me up any time. happy to help
 
okay. Thanks a lot :)
Happy weekend to you :)
 
i just learned through working with it for years
And you as well :)
 
ha ha okay :)
 
9:49 AM
Send me an email and I'll send you some links that might help out.
 
okay :)
just sent a mail
 
cool, i gotta get some actual work done now, but glad i could assist. I'll send you a reply with some links soon. ;)
have you checked out the tag wikis on SO?
links lower down on page are sometimes good help
 

last day (14 days later) »