I am using this jquery plugin for called tokeninput it's for autosuggestion when typing:
the code here generates the autosuggestion for the input box:
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
but when I try to append the input which uses the #input-auto it does not do the autosuggestion but it works when it's loaded on the page:
the code is here:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
I'm trying to solve the problem, but I can't find anything, I also tried to put the live click on the .topicEdit, but it's still not working. :)) thanks
Looks like you're probably initializing the autosuggestion BEFORE you add the input into the DOM. You have to remember that jQuery is stupid, and only does things in the order that you tell it. When you initially 'generate' the autosuggestion, if it can't find it in the DOM at that moment, it won't do anything! So, to solve your problem, you'll want to do the generation of the autosuggest after you insert it into the DOM:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
yay?
Calling tokenInput on page load when input-auto doesn't yet exist is your problem.
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
I'm not exactly sure what the problem is, but try using livequery plugin. You don't need to specify an event to it, just a function which will run for all current and future elements that match the selector.
Example:
$(".something").livequery(function () {
// do something with the element
}
Related
i use javascript made a function that every time i click button "add one more" button, html page will add another group of html elements, which i need to includes tinymce text area, but I cannot manage to do it.
here is part of my code,
<script>
$(document).ready(function (e) {
var html = '<textarea class="tinymce" name="CCV_product_full_description[]" id="childccv-product-full-description" />';
...
I defined tinymce in another js file and included in this html file, but it not works some how, i need some help :)
in another js file
tinymce.init({
selector:"textarea.tinymce"
});
here is the function for add another group of html elements
$("#add").click(function (e) {
$("#container").append(html);
});
It looks like you are trying to initialize the editor on DOM elements that don't yet exist.
Also, if you are trying to dynamically add several instances of TinyMCE, you need to remove TinyMCE first before you can call it again.
$("#add").on('click', function (e) {
e.preventDefault()
$("#container").append(html);
tinymce.remove()
tinymce.init({
selector:".yourSelectorName"
});
});
I wanted to destroy and recreate multiselect widget from Telerik's Kendo UI. Normally it is easy thing which I done much times before, but never with multiselect. The problem I am facing now is that way which should work (atleast I think it should) ... does not.
Here is code which I am using to destroy and recreate components like grids or dropdowns:
if ($('#dropdown1').data('kendoDropDownList')) {
$('#dropdown1').data('kendoDropDownList').destroy();
$('#dropdown1').html('');
}
How i said - If I use it on dropdown or grid - it works. But on the multiselect it does not:
if ($('#multiselect1').data('kendoMultiSelect')) {
$('#multiselect1').data('kendoMultiSelect').destroy();
$('#multiselect1').html('');
}
I prepared small Dojo example where is shown the behaviour. When dropdown is destroyed and recreated it looks correct. When I do the same to Multiselect it always add widget as next line.
Of course I can overcome this problem by changing dataSource and just call read method or something like that but I whould like to know if it is bug or there is another way how to destroy multiselects.
Thanks.
This code uses unwrap() to remove the original input from the kendo wrapper div and then .remove() to get rid of leftover kendo DOM elements:
$('html').on('click', '#destroy2', function(e){
if ($('#multiselect1').data('kendoMultiSelect')) {
alert('multiselect exists - destroying and recreating');
$('#multiselect1').data('kendoMultiSelect').destroy();
$('#multiselect1').unwrap('.k-multiselect').show().empty();
$(".k-multiselect-wrap").remove();
$("#multiselect1").kendoMultiSelect({
dataSource: {
data: ["Three3", "Four4"]
}
});
$('#text2').text('Multiselect AFTER calling destroy');
}
});
When you clear the html of multiselect1, it still leaves behind all the other dom elements created when the input is turned into a widget.
Then when you recreate it, it doesn't quite handle it as well as the dropdownlist, which I think could be a bug.
If you instead wrap the controls you need to recreate in a div element and clear that element instead, it will get rid of all the extra elements so that you can start will a clean slate to create the new one.
http://dojo.telerik.com/#Stephen/EDaYA
<div id='multiselectDiv'>
<input id="multiselect1" />
</div>
$('html').on('click', '#destroy2', function(e){
if ($('#multiselect1').data('kendoMultiSelect')) {
alert('multiselect exists - destroying and recreating');
$('#multiselect1').data('kendoMultiSelect').destroy();
$('#multiselectDiv').empty();
$('#multiselectDiv').append('<input id="multiselect1" />')
$("#multiselect1").kendoMultiSelect({
dataSource: {
data: ["Three3", "Four4"]
}
});
I updated you code to this and it works:
$('html').on('click', '#destroy2', function(e){
if ($('#multiselect1').data('kendoMultiSelect')) {
alert('multiselect exists - destroying and recreating');
var multiSelect = $('#multiselect1').data("kendoMultiSelect");
multiSelect.value([]);
$("#multiselect1").remove();
$("#multiselect1").kendoMultiSelect({
dataSource: {
data: ["Three3", "Four4"]
}
});
$('#text2').text('Multiselect AFTER calling destroy');
}
});
Use remove will work once
In my erb file, I have a script like this:
function checkJquery() {
if(window.jQuery) {
jQuery(document).ready(function() {
alert('onready');
$('div#habla_topbar_div').click(function() {
alert('onclick');
});
});
}
else {
window.setTimeout(checkJquery, 1000);
}
}
I get the 'onready' alert, but the 'onclick' alert does not work. Any idea what I might doing wrong?
Edit:
The div is part of the Olark chat integration and the erb file has nothing except the configuration for that and the above script.
The div 'habla_topbar_div' is defined.
Image:
Several Rails-specific issues here
--
Delegation
Because most Rails applications use Turbolinks or similar, you have to delegate your Javascript (typically) from the document object:
#app/assets/javascripts/application.js
$(document).on("click", "#habla_topbar_div", function() {
alert('onclick');
});
If you use this without embedding with other JS functions, it should work, considering you have a div with id=habla_topbar_div.
--
Turbolinks Events
Secondly, you want to ensure you replace the standard $(document).ready function with one of the Turbolinks event hooks. You'll want to do the following:
#app/assets/javascripts/application.js
var your_function = function(){
...
}
$(document).on("page:load ready", your_function);
Your code looks good, maybe you don't have a div with id="habla_topbar_div".
Check this Fiddle to find out where did you wrong.
Update:
If you already have a div with id="habla_topbar_div" maybe the Id's value has been changed by some code or application before rendering or on runtime.
Try to add an unique class name to "habla_topbar_div" div like this:
<div id="habla_topbar_div" class="habla_topbar_div_unique habla_topbar_div_normal ...">
and use this:
$('.habla_topbar_div_unique').click
instead of this:
$('div#habla_topbar_div').click
Check Fiddle Demo
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class
I have a page that display some data. It is loaded from a database using php and mysql, I use zend framework to handle all this.
On this page I have two things that use jquery. one is a paginator and the other is a thumps up function.
the paginator works fine. It receives the data as json and applys it to the view. all the functions that I need to handle this are located in one js file. In this file I listen for clicks...
$(document).ready(function() {
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
});
Now I have a problem with the thumps up function. It is located in another js file. Everytime the thumbs up button is clicked the script should just alert "click". actually when you click before you use the paginator a "click" appears, but when you do it after nothing happens. but the html in the dom inspector appears to be the same.
in my thumpsup.js I just have
$(document).ready(function() {
$("a.tp").click(thumpsUp);
});
function thumpsUp() {
alert("click");
}
I do not know where the problem is. maybe the js files are interferring each other!?
function thumpsUp() {
var url = window.location.hostname + '/programme/thumpsup/id/'
+ $(this).attr('page');
$.post(url, {
"format" : "json"
}, function(data) {
alert(data);
}, 'html');
return false;
}
I'm guessing the paginator is rewriting your elements and they are losing their click event binding. Try using live() for event binding instead:
$(document).ready(function() {
$("a.tp").live('click',thumpsUp);
});
function thumpsUp() {
alert("click");
}
You might have the Script files (which are included in your mark up) the wrong way round. That's the only solution I can think of...
I'm pretty sure you can get away with two $(document).ready()'s (even if it is frowned upon).