I've an input field in my backend where I use a jQuery colorpicker to make it easier for users to get the hex value of a color. It's working good so far.
But, as the inputfields are created with ajax, I need to get to them with an 'jQuery ajax call'.
For some reasons this gives me a javascript error 'TypeError: undefined is not an object (evaluating 'pos.top')' in the colorpicer lib js file.
Without asking you to grab thought the asset lib, is someone able to point me in the right direction as to why this error arises? I mean the calls are pretty similar, aren't they? What am I missing?
Here's my code.
Working version (after saving the page):
jQuery('.ci-js-colorpicker').click(function(){ }).ColorPicker();
Not working version (with jQuery ajax call):
jQuery(document).on('click','.ci-js-colorpicker',function(){ }).ColorPicker();
I've removed parts of the code in the function to make it easier to read.
The jQuery colorpicker lib I'm using is: http://www.eyecon.ro/colorpicker/
Try doing:
$(document).on('click', '.ci-js-colorpicker', function () {
$('.ci-js-colorpicker').colorpicker();
});
If you are displaying it in a modal, maybe you want to make the horror of:
.colorpicker-visible {z-index: 9999;}
Related
I need to fire this javascript function:
window.icegram.get_message_by_id(2072).show();
From a plain URL (e.g. www.google.com/? etc) as I cannot edit the HTML, as shown in this image:
I have tried to use this code in that URL field:
javascript:window.icegram.get_message_by_id(2072).show();
But when I click on the button, it says "Uncaught TypeError" and that the function is unknown.
For reference purposes, the Icegram documentation says that you can trigger the popup by using either using (both work on a Wordpress post):
Your text
OR
[icegram campaigns="XXXX"]Your Text [/icegram]
Maybe I could call the javascript function by including it in a separate file first? I would appreciate any help, I have tried and researched for a couple hours.
I can confirm that it adds the javascript section in the correct place -
does this mean that there is an issue with my javascript function, perhaps its not working properly? Confusing as it does work on a wordpress post (when using the full "a href=" code) but when I use the function it instantly says -
Alright, it seems that Icegram has a bug, in which the function ID used in the shortcode (e.g. 2072) is different from the function ID needed when calling using javascript (wtf), which in this case was 2073.
So if anyone else needs it, this is the solution for a plain URL field:
javascript:icegram.get_message_by_id(2073).show();
which results in the following output when viewed live on the frontend:
Your Anchor Text
I hope that helps someone. A big thank you to mplungjan and sabithpocker for the guidance and responses.
I'm trying to run JS code in WordPress, using a plugin; but can't make it work.
Here on this Codepen page, you can see the element I'm trying to integrate on my site (i.e. a drag and drop feature)
http://codepen.io/galaxija737/pen/pHvEi
And here, this is working properly.
But then, I can't figure out how to integrate the JS code properly into WordPress; whatever plugin i'm using. And idem into JSFiddle, impossible to run properly the script, as you can see...
https://jsfiddle.net/szan6shz/)
For instance using "TC-custom-javascript" plugin; when I add the JS code, nothing is running (i.e the drag-drop feature is not working; like on the Fiddle) :
I'm really new at Javascript as you can see. If anyone can give me a hand on this. (I guess i miss something is the way JS needs to be written/integrated)
Thanks a lot!
Greg
WordPress runs jQuery in safe mode. This means that you need to call it with jQuery instead of $. You can call your initial onload function with jQuery and pass $ into the function to define its use throughout the function.
See this example:
jQuery(function($){
$('.theclass').fadeIn('slow');
});
my website is marutiindia.in. My website was working fine until I installed a module named lof k2 scroller. The website was showing jquery errors and the module at the lower half of the template was not working. But I managed to get the module to work by adding the following code at the start of the JS file which was showing error:
if(jQuery){
jQuery.noConflict();
}
But, now I am getting other JS errors which I am not able to understand.
Below is the link for the screenshot of errors:
Screenshot
I don't know what these errors mean.
Also I have one more plugin to use for my website which also causes scroller to not work.
Please help me resolve these errors.
Thanks.
Joomla uses Mootools, which also use the $ function name. in order to avoid this, your plugins either:
must use jQuery instead of $. For example, instead of $('div') to get divs, use jQuery('div')
if you really want to use $, wrap the jQuery code in a closure
(function($){
//code that uses `$`
}(jQuery))
make sure the plugins are extending from jQuery and not $.
I got a wordpress page where users can add posts from the front_end. For this i use the WP_editor() function.
When I was trying the functions just plain in a new wordpress page I could just use
tinyMCE.activeEditor.getContent();
But now I'm setting everything up as the final product should look like, this means the editor is loaded in a modalbox (using fancybox plugin), and it initalizes fine, and it works. But I can't fetch the content the same way, it just returns me with the following error:
Uncaught ReferenceError: tinyMCE is not defined
I assume this has something to do with the modal box loading the page in an iFrame, meaning the editor isn't there when the javascript code is running. How do I solve this? Can I bind it to something like .live() ?
Seems like such an easy problem, guess I'm just to tired to be thinking clearly today.
Best Regards.
On the Front-End try to use wp_enqueue_script('tiny_mce') before.
In the WordPress version I use the JavaScript object tinymce and not tinyMCE. Try using tinymce.
I have a textarea by id "compose" and i want to get the data from that textarea before the submit button is pressed. I have another javascript function that will share the information to various other sites based on the user preferences and i need to pass the information in the textarea to that js.
function getVal(){
alert(document.getElementById("compose").value);
}
I am not getting any information and im guessing its because the information is stored else where but i dont know where that is stored.
I am using zend with this and i would like to use jQuery but i cannot get jQuery to work properly with zend. It either wrecks other components on the page or does not work at all. Any suggestions?
edit: This is where i am calling getVal(). Its just a link right now as i am trying to get the input into the text area. Then i will insert the found data into my js script.
I attached Zend because the site is made using the zend framework and after a while of stuggling with jquery i didnt want a jquery answer because i would not be able to use it.
click
edit1 It seems the engine im using has dropped jquery support for the version im using.... Thank you for your answers and help
since you tagged this as jquery I assume you use it. In that case, the simplest way would be ...
$("#compose").val()
Oh, never mind, I read now that you can't make jquery work?
In that case, did you read this post? Best way to start using jQuery in a Zend Framework 1.9 application?
You can hi-jack the submit event for the form, do your AJAX request, then submit the form normally:
$('form').on('submit', function () {
$.ajax({
url : '<URL>',
data : { compose : $('#compose').val() }
});
});
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().
Docs for .on(): http://api.jquery.com/on