jQuery text() and show() not working ( RoR application) - javascript

I want to implement a custom and simple check of the number of items that I have in the cart.
First, I load my page with a place holder div in one of my menu elements:
<div id="items_count" style="display:none;">(count)</div>
Then in my javascript file (application.js) I have the following code:
$(document).ready(function () {
$items_count_element = $("#items_count");
if ($items_count_element.length > 0 )
{
$.ajax({
url: '/get_items_count',
type: 'GET',
dataType: 'json',
success: function (response) {
// Construct the new string to display
items_count_new_content = "(" + response.items_count + ")";
// Printout to verify that we point to the correct div
alert($("#items_count").text());
// Verify the new string to display
alert(items_count_new_content);
// Empty the div element and replace the content with the new string
$("#items_count").empty().text(items_count_new_content);
// Remove display : none
$("#items_count").show();
}
});
}
});
The AJAX requested is executed with success, and the alerts display the expected text ( "(count)" and lets's say "(3)", which means i have 3 items in the cart ).
But $("#items_count").empty().html(items_count_new_content); and $("#items_count").show(); seem to not work at all, even if the functions are simple enough. Moreover, I've used them many times in the past with success...
I've tried to replace text() with html() with no success.
Any ideas what may be the problem here ?
Thanks

In jQuery, you can change a value with val:
$("#items_count").empty().val(items_count_new_content);

After debugging, i noticed that i had 2 menus on the page instead of one ( the normal menu and the sticky menu ). So my problem was the usage of the idas the selector my element. This caused that the jQuery replaced the content only for the sticky menu ( Which is invisible in the top of the page ), since we are supposed to have unique ids for each element in the DOM.
I fixed my issue by replacing $("#items_count") by $(".items_count_div")
I hope it'll help whoever encounter similar problem.

Related

TinyMCE update Toolbar (after init) when you have Editor on method

I'm working on a Google Fonts plugin for WordPress and I try to have the same effect as the core WYSIWYG editor. Basically when you click on element (inside the Editor) with font class I want to get the class and then based on that reload the font family/style listbox in the Toolbar.
(I found couple of hacks here on SO like this one Proper Way Of Modifying Toolbar After Init in TinyMCE but nothing that works like the WP core example)
There is the same functionality when you click on P, H1, H3, H3 ... How they do it? Can you point me at least to the JS file in WordPress distro; I think I can figure it out if see the code.
Here is GIF that demonstrates what I'm talking about. Thanks in advance.
I found the solution and because it's not a hack, like the other ones I found on SO, I will post it in here and hopes it will help anyone else that's trying to do something similar.
First to access the button/listbox need to use onpostrender with a callback function.
editor.addButton( 'developry_google_font_family_button', {
type : 'listbox',
onpostrender : fontFamilyNodeChange,
value : '',
...
Next the callback function should look something like this:
function fontFamilyNodeChange() {
var listbox = this;
editor.on('NodeChange', function( e ) {
// This next part is specific for my needs but I will post it as an example.
var selected = [];
if ( $( e.element ).hasClass( 'mce-ga' ) ) { // this a class I add to all elements that have google fonts format
// Then I strip the classes from classList that I don't need and add the rest into an array (e.g ['roboto', '100'])
var gfont_options = $( e.element ).attr('class')
.replace('mce-ga', '')
.replace('mce-family-', '')
.replace('mce-weight-', '')
.trim()
.split(' ');
selected.push( gfont_options );
// At end I add the new value to listbox select[0][0] (e.g. 'roboto')
listbox.value(selected[0][0]);
}
});
}
And here is an example:

Append different div to divs loaded by ajax request(Infinite scroll)

I am using this plugin on my website. You will be able to see the HTML structure it is generating. I am trying to insert custom div after every 5 divs. Since it is loaded asynchronously, I am not able to append div that I wanted. I tried adding the following code which is used in normal situation
$(".alm-reveal:eq(0)").append("<div>Firstdiv</div>");
$(".alm-reveal:eq(1)").append("<div>Second Image</div>");
$(".alm-reveal:eq(2)").append("<div>Third IMage</div>");
$(".alm-reveal:eq(3)").append("<div>Fifth Image</div>");
$(".alm-reveal:eq(4)").append("<div>Sixth Image</div>");
$(".alm-reveal:eq(5)").append("<div>Seventh Image</div>");
$(".alm-reveal:eq(6)").append("<div>Eigth Image</div>");
$(".alm-reveal:eq(7)").append("<div>ninth Image</div>");
which obviously did not work. I also tried adding it in the success function.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal").append("<div>Firstdiv</div>");
}
But since it is in the loop, it is repeating. I am quite not sure how to achieve this. How do I trigger append function every time an ajax request is made and append different divs I wanted in proper place. Hope I am clear.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal:last").append("<div>"+data+"</div>"); //selects last div in that class
}
data should be passed accordingly to get different data in the div.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal:last").append("<div>"+data+"</div>"); //selects last div in that class
}
every time you append, you should append to last div in that particular class
I am answering my own question though I am not sure if this is the efficient way to do. But it works 100% the way I wanted.
if(data.indexOf("aj-l-main-entry-8") > -1) //Making sure AJAX div is loaded
{
if(document.getElementById("element-id") == null) { //Appending div only once
$("#id_of_the_div_you_want_to_append_to").append('<div></div>');
}
}
I have added the above code in the success function.

jQuery not recognizing dynamically-inserted DOM element?

Yet another "dynamically change select options based on parent option selected" question.
I have the select values changing dynamically - but after my rails render of the child select - I lose the Chosen styling (the jQuery Chosen plugin) and I cannot operate on this newly injected element.
Here is where the code is right now - it's gone through dozens of iterations -
$('#vendor_block').on('change', '#vendor_name', function(){
overlay.show();
var v = $(this).val();
vndr_json = {};
vndr_json["v"] = v;
$.ajax({
type : "GET",
url : "/purchaseorders/upd_vndr_locs",
data : vndr_json,
success: function(res) {
overlay.hide();
// console.log(typeof(res),res);
jQuery("#vndrAddrOpts").html(res);
}
});
$("#vendor_addresses").chosen(); // WHY DON'T YOU RENDER CHOSEN BOX?!
});
I get this new select box on my page - and I want to fire an event when it changes, but the DOM has already loaded, so it doesn't "see" this element I'm guessing.
Also - the Chosen plugin doesn't render on the element. Not sure why - probably the same reason.
I'm using jQuery's .on() like every post on SO says I should. But it doesn't "reload" the elements inside this parent (and 'vendor_block' is the parent div of 'vendor_name' and 'vendor_addresses').
You can see the difference in the select boxes here:
Any help would be great?
UPDATE:
Adding before and after HTML :
<div id="vndrAddrOpts">
<select class="chzn-select vndrLocs span12" id="vendor_addresses" name="vendor_addresses"><option value="">Select Location</option></select>
</div>
That is the raw HTML - but Chosen does the following when the DOM loads:
<div id="vendor_addresses_chzn" class="chzn-container chzn-container-single chzn-with-drop chzn-container-active" style="width: 100%; margin-bottom: 10px;" title=""><span>Select Location</span><div><b></b></div><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off"></div><ul class="chzn-results"><li id="vendor_addresses_chzn_o_0" class="active-result result-selected highlighted" style="">Select Location</li></ul></div></div>
This is all fine and well - this is what's supposed to happen.
This is the raw HTML after the select box has been injected:
<div id="vndrAddrOpts">
<select class="chzn-select vndrLocs span12" id="vendor_addresses" name="vendor_addresses"><option value="">Select Location</option></select>
</div>
And here is the rendered box - sans Chosen stuff.
<select class="chzn-select vndrLocs span12" id="vendor_addresses" name="vendor_addresses"><option value="">Select Location</option><option value="532757b4963e6505bc000003">Honolulu</option>
<option value="532768d0963e6505bc000004">Waipahu</option></select>
I found the answer here :
Is there a way to dynamically ajax add elements through jquery chosen plugin?
I actually was approaching this problem in an overly complex way - trying to inject and element instead of just starting with the element and adding options to it.
My AJAX looks like this now:
$.ajax({
type : "GET",
url : "/purchaseorders/upd_vndr_locs",
data : vndr_json,
success: function(res) {
overlay.hide();
var va = $('#vendor_addresses');
// console.log(typeof(res),res);
for (var i=0; i < res.length; i++) {
va.append(
$('<option></option>')
.val(res[i].id)
.html(res[i].name)
);
}
va.trigger("liszt:updated");
// jQuery("#vndrAddrOpts").html(res);
}
});
So instead of even worrying about rebuilding the chosen element from an injected element - we just use the built-in "updated" trigger and it works great.
You are inserting the result of your ajax call into the DOM it's success callback, which is executed whenever it finishes (independent of the script's execution). In this case, your ajax request is being made, the code after it begins executing, and then the callback. The odds of the success callback being called before the next line of code are slim, as the ajax call is an http request which takes much longer than a line of JavaScript executing.
You want to put the code in the success call back, such as:
$.ajax({
type : "GET",
url : "/purchaseorders/upd_vndr_locs",
data : vndr_json,
success: function(res) {
overlay.hide();
$("#vndrAddrOpts").html(res);
$("#vendor_addresses").chosen();
}
});
I think the chosen method is firing before the element has actually been rendered on the page, and jQuery can't find it. Try putting $("#vendor_addresses").chosen(); as part of the AJAX success callback. Failing that, try commenting out the chosen() method, running the AJAX script, then manually running the chosen() method. If it works that way, you have to delay it a little bit.
EDIT:
Actually, looking more closely at your code, it appears you're using an ID tag instead of a class. Do multiple HTML elements have the #vendor_address id? If so, use a class instead, and use $('.vendor_addresses').last().chosen();. If you use an ID, and use an ID selector, jQuery will pick the first element if finds with that ID, and stop there.
Lesson to be learned? Use an ID for UNIQUE elements, and classes for multiple elements of the same 'class'.

selectmenu ('refresh', true)

I get form from zend framework site and put it in response in new file in function written by jquery mobile, but I get this error:
uncaught exception: cannot call methods on selectmenu prior to
initialization; attempted to call method 'refresh' .
Code of function this file:
function addItem(id) {
$.ajax({
url:'http://zf.darina.php.nixsolutions.com/order/index/create-order-mobile',
dataType:"jsonp",
data:{id_good:id},
success:function (resp) {
console.log(resp);
$('.product-table').empty();
$('.product-table').append(resp.prod);
$('.product-table').append(resp.form);
$('.add-order-btn').button();
$('.mob-size').selectmenu('refresh', true);
$('#block').page();
}
})
}
Force initialize the selectmenu(s) first:
$('.mob-size').selectmenu(); // Initializes
$('.mob-size').selectmenu('refresh', true);
or use this for short
$('.mob-size').selectmenu().selectmenu('refresh', true);
In my case, if I was not initializing the select before invoking the 'disable' method I got the error, while if I was initializing it, the select didn't disable but duplicate itself - I tried to select the object by TAG NAME instead of by CLASS or ID NAME,
$('select').selectmenu('disable');
instead of
$('.select-class-name').selectmenu('disable');
and it worked without forced initialization
you do this in your custom refresh delegation function:
var w = $("#yourinput");
if( w.data("mobile-selectmenu") === undefined) {
// not initialized yet, lets do so
w.selectmenu();
}
w.selectmenu("refresh",true);
according to enhancement resolution here
I found the same problem, but a more involved solution. When jqm wraps the select element, it puts it in a <span> element with the same class list as the select element. I changed my reference to it so that instead of reading:
row.find(".selectCompletion").selectmenu("disable");
it now reads:
row.find("select.selectCompletion").selectmenu("disable");
Specifying that jquery should only find the select element matching the class name, rather than all elements in .row that match the class name, solved the problem.
This happened to me when cloning existing select element in order to duplicate the original section multiple times.
Calling 'refresh' for the original element, worked fine, while calling it for the cloned sections was leading to the error appearing in the question.
However, calling selectmenu() was causing a 'vandalisation' to the form, as can be seen in the following image:
Explanation: top = original. bottom = vandalised cloned element right after calling selectmenu.
Solution:
The following code solved this vandalisation problem:
cloned_elem.find('select[name=MyClass]').selectmenu().selectmenu("destroy").selectmenu();
This is not an ideal solution because we must call the first selectmenu() in order to call selectmenu("destroy"), so I would be glad to hear of a cleaner solution.

JQuery UI Tabs from Dynamically Created DIVS

I am creating an information dashboard to show the results of various actions for a web app.
I would like to show data in tables, organized by tabs, ie each tab is different category with corresponding table. The trouble is these tabs and tables need to be created on the fly based on an ajax response.
Right now I have this skeleton for the tabs in my html:
<div id="tabs">
<ul></ul>
</div>
From my ajax request I get all of the categories and all of the data as JSON, and in javascript:
function(data){
//making the tab links and content divs
$.each(data.cat, function(){
$('#tabs ul').append('<li>'+this.name+'</li>');
$('#tabs').append('<div id="'+this.id+'"></div>');
}
//making the tab content
//cycle through all results, adding each to the table in div of its category
$.each(data.results function(){
var selector = '#' + this.catid + ' table tbody';
$(selector).append('<tr><td>'+this.something+'</td><td>'+
this.somethingelse + '</td></tr>');
}
$( "#tabs" ).tabs();
}
This is "working" right now. It appropriately puts the data into the right divs that is creating, but the styling when I call tabs() is not taking place so I just have divs underneath each other. I know the problem -- these divs are new to the DOM and jquery isn't seeing them, but I have no idea how to fix it!
jQuery is seeing the modified DOM by the time you are calling .tabs(), if tabs is being called before you call your ajax, then using the .tabs('add'...) is the correct method to be using (see below). On a side note, you have some Javascript errors in your code, but it does work: as you posted: http://jsfiddle.net/highwayoflife/AcV3H
For adding new tabs, you should use the .tabs('add' ...) method.
.tabs( "add" , url , label , [index] )
Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.
NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id.
So your code may look something like...
function(data) {
$('#tabs').tabs();
...
$.each(data.cat, function() {
$('#tabs').tabs('add', this.id, this.name);
});
}

Categories