We Keep Coding

Change "div class" of jQuery tooltip

I´m using the jQuery UI tooltip plugin.
Now I want to change the <div class="ui-tooltip-content"> in <div class="ui-tooltip-content2"> with jQuery.
I´m using $('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content') inside the "each" function but it doesn´t show any effect. I don´t get an error in the console.
I´ve made a JSFiddle. Just inspect the tooltip and you will see that the class hasn´t changed.
Complete code:
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slide",
delay: "10000"
},
position: {
my: "left+153 top+20",
collision: "flipfit"
},
});
$('*[data-id]').each(function () {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "https://xy.eu/datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id,
},
success: function (data) {
let $content = $(data);
let title = $content.siblings('[class^=item-titletl]').text()
let icon = $content.siblings('[class^=parent2]').html()
$tooltip.tooltip({
content: function () {
return [data];
},
});
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
$tooltip.attr("title", "=")
$("<img class='icon-small' src='https://xy.eu/images/icons/" + icon + "'/
>" + title + "</>").appendTo($tooltip);
}
});
});
});

The problem is that the tooltip appends when you hover over the element, that's why this code doesn't working, you element was not created yet, at that moment.
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can do it by adding this option, this will add additional class to ui-tooltip-content
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
The full code will be
$tooltip.tooltip({
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
content: function () {
return [data];
},
});
Remove this line:
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can check the docs here.

the problem is in your code you are trying to add and remove classes but the element is not present in DOM. I have modified your code
jQuery(document).ready(function ($) {
var ajaxManager = $.manageAjax.create('cacheQueue', {
queue: true,
cacheResponse: true
});
// Tooltip Script
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slide",
delay: "100000"
},
position: {
my: "left+153 top+20",
collision: "flipfit"
},
});
$('*[data-id]').each(function () {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id,
},
success: function (data) {
let $content = $(data);
let title = $content.siblings('[class^=item-titletl]').text()
let icon = $content.siblings('[class^=parent2]').html()
$tooltip.tooltip({
content: function () {
return [data];
},
});
setTimeout(AdAndRemoveClass,500);
$tooltip.attr("title", "=")
console.log($tooltip)
$("<img class='icon-small' src='https://www.elder-scrolls-online.eu/images/icons/" + icon + "'/ >" + title + "</>").appendTo($tooltip);
}
});
});
});
function AdAndRemoveClass(){
var tool= $('.ui-tooltip-content');
if(tool.length ==0){
setTimeout(AdAndRemoveClass,500);
}
else{
console.log(tool)
tool.addClass('ui-tooltip-content2');
tool.removeClass('ui-tooltip-content');
}
}
check the working fiddle here

Can I send data from Ionic JS Popup?

I try build android and in some page I'll make edit from popup. Example if i click input it will show popup and on popup be found input text. After input some text and click OK data from input text will be sent to server. But I don't know how to make it.
This my HTML
<input class = "button" ng-click = "showPopup()">Add Popup Show />
And This my JS
$scope.showPrompt = function() {
var promptPopup = $ionicPopup.prompt({
title: 'Title',
template: 'Template text',
inputType: 'text',
inputPlaceholder: 'Placeholder'
});
promptPopup.then(function(res) {
console.log(res);
});
};
Can anybody help me to solve my problem ? Thanks

I had used ionicPopup show (hope it helps you) :
$scope.updateQ = function() {
var alertpop = $ionicPopup.show({
title: 'Quantity',
templateUrl: 'popup-template.html',
scope: $scope,
buttons: [{
text: '<p class="popup-p">Ok</p>',
type: 'button-positive',
onTap: function(e) {
//window.localStorage.setItem("tmpqty",$scope.product.quantity);
return $scope.product.quantity;
}
}, {
text: '<p class="popup-p">Cancel</p>',
type: 'popup-close',
onTap: function(e) {
//alert($scope.product.quantity);
//return 'cancel button'
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false })
}
}]
});
alertpop.then(function(res) {
var tmp_qty = res;
var pid = $scope.product_id;
var url = "" + base_url + "?callback=JSON_CALLBACK&store=1&service=updatevproducts&productid=" + pid + "&qty=" + tmp_qty + "";
$http.jsonp(url)
.then(function(response) {
var stat = response.data;
if (stat.status == "success") {
var successPop = $ionicPopup.alert({
template: 'Inventory of Product Id : ' + pid + ' updated successfully !'
});
$state.go('app.stocks');
} else {
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false });
}
});
});
};

Jquery function cannot fire event from new data in webgrid

Wasn't exactly sure how to title this problem, but essentially what my issue is, is calling a jquery function based on a new elements that gets put into my WebGrid. However, my webgrid is populated on toggling of radio buttons. The grid then gets updated with new data by an ajax call. Therefore, no page refresh is done and my elements exist in my grid, but my javascript does not know about them.
Below is some of my code.
Webgrid:
#grid.GetHtml(tableStyle: "table table-striped table-bordered",
headerStyle: "thead-default",
columns: grid.Columns(
grid.Column("account_number", "Account Number", canSort: true),
grid.Column("last_name", "Last Name", canSort: true),
grid.Column("first_name", "First Name", canSort: true),
grid.Column("middle_name", "Middle Name", canSort: true),
grid.Column("reject_reviewed", "Reviewed", canSort: true, format: (item) => Html.CheckBox("completed", (bool)(item.reject_reviewed == 1), new { disabled = "disabled" })),
grid.Column("comment", "Comments", format: (item) =>
new HtmlString(
Html.ActionLink("Add", "RejectAddComment", controller, new RejectCommentViewModel { reject_id = item.id, account_number = item.account_number, reject_message = item.reject_message },
htmlAttributes: new { data_modal = "", id = "btnCreate", #class = "" }).ToString()
+ " | " +
Html.ActionLink("View", "RejectViewComment", controller, new RejectCommentViewModel { reject_id = item.id, account_number = item.account_number, reject_message = item.reject_message },
htmlAttributes: new { data_modal = "", id = "btnCreate", #class = "" }).ToString())),
grid.Column("reject_message", "Reject Message", canSort: true)))
javascript:
$(function () {
$.ajaxSetup({ cache: false });
$("body").on("click", 'a[data-modal]', function (e) {
// hide dropdown if any
$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
//Refresh
location.reload();
} else {
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}

Change your event binding from:
$("a[data-modal]").on("click", function (e) {
To
$("body").on("click", 'a[data-modal]',function (e) {
and it is better to use a a better selector than body, something like you grid id or class
By the way this is a famous issue, googled

Changed the line to this
$("#scroll-grid").on("click", "#btnCreate", function (e)
and the javascript event now fires.
The first element must be a parent element, and after the click event must be the element you are looking for the event of.

Cannot display data in a jQuery UI dialog via AJAX on opening

I just want to display following reviews which I got from my database on the Jquery UI dialog box on loading but it displays nothing:
{"results":[{"review_text":"good"},{"review_text":"not bad"},{"review_text":"great"}]}
Could you please check my code below and help me to find my mistake.
Here is my view:
<?php
$data = array(
'name' => $item_id,
'class' => 'all_reviews',
'content' => 'Reviews'
);
echo form_button($data);
?>
<div id="see_all_reviews">
<div id="load_reviews"></div>
</div>
Here is my JS file:
$(".all_reviews").click(function() {
var self = this;
var id = $(self).attr("name");
$.post('filter/get_reviews', { id: id }, function (data) {
var my_obj_review = data;
$.each(my_obj_review, function (i) {
var reviews_text = my_obj_review[i].review_text;
$("#load_reviews").text(reviews_text);
});
}, "json").error(function() { $( "#load_reviews" ).text(data.message);
});
$( "#see_all_reviews" ).dialog({
autoOpen: false,
title: "Reviews",
modal:true,
draggable:false,
width: 600,
height: 600,
close:function(){ $(this).dialog('destroy'); }
});
});

You primary issue is that your AJAX call is returning a data object not a data list. Replace:
var my_obj_review = data;
with:
var my_obj_review = data.results;
Additionally, this:
$(self).parent().find("#see_all_reviews").text(review_text);
can be replaced with this:
$("#see_all_reviews").text(review_text);
In either case, your each loop is going to replace that element with the last item in the list. Are you trying to append reviews to that div?
Finally, you may need to initialize your dialogue:
$("#see_all_reviews").dialog({
autoOpen: false,
show: "blind",
hide: "blind"
});
Here's your code refactored slightly:
$(document).ready(function() {
$(".all_reviews").click(function() {
var item_id = $(this).attr("name");
$.post('contr/get_reviews', { item_id: item_id }, function (data) {
$.each(data.results, function (n, result) {
$("#see_all_reviews").text(result.review_text);
});
// Above loop equivalent to:
$("#see_all_reviews").text(data.results[data.length-1].review_text);
}, "json")
.error(function(data) {
$("#see_all_reviews").text(data.message);
});
$("#see_all_reviews").dialog();
});
});
And here's a fully functioning fiddle: http://jsfiddle.net/klenwell/d7r7s/

Typeahead minlengh 0 suggestion not showing bloodhound

I am working on autosuggestion task and i have requirement like if typeahead suggestion textbox is empty shows default options on suggestion list like below jsfiddle
http://jsfiddle.net/5xxYq/
This example working perfectly. but I have retrieved a suggestion list from remote using bloodhound is not working listed below my piece of code:
var sos_adapt = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'appsearch?ty=so&cid=%CID&query=%QUERY',
replace: function(url, query) {
return url.replace('%QUERY', query).replace('%CID', customer_id);
},
filter: function(sos) {
return $.map(sos, function(sos) {
return {
so_desc: sos.so_desc,
so_no: sos.so_no,
so_details: sos.so_no + " : " + sos.so_desc,
customer_id: sos.customer_id,
customer_details: sos.customer_id + " : " + sos.customer_name
};
});
},
ajax: {
global: false,
beforeSend: function(xhr)
{
}
}
}
});
//initialize the bloodhound suggestion engine
sos_adapt.initialize();
$('#so_details').typeahead(null, {
displayKey: 'so_no',
source: sos_adapt.ttAdapter(),
minLength: 0,
templates: {
empty: [
'<div class="sug_items">',
'unable to find any so#!',
'</div>'
].join('\n'),
suggestion: Handlebars.compile([
'<div class="sug_items"><p class="repo-language">SO# : {{so_no}}</p>',
'<p class="repo-name">{{so_desc}}</p></div>'
].join(''))
}
});
my code was working perfect when user type text on textbox. but, when user focus empty textbox bloodhound not sending remote request for suggestion. but, i tried code for on focus show suggestion list on typeahead textbox below:
$("#so_details").on("click", function() {
var ev = $.Event("keydown");
ev.keyCode = ev.which = 40;
$(this).trigger(ev);
return true;
});
this code pick from above jsfiddle example, can any one guide me how to do that? any help will be appreciated.