Databases
StackOverflow2013
Postsdbo
POjQuery plugin messing with AJAX results
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery plugin messing with AJAX results
    primarykey
    data
    text
    <p>I have a function that makes an AJAX call on key up and if the result is not empty it puts it in a tooltip. If I deactivate it everything works as expected, but once enabled AJAX seems to "toggle" between returning an empty variable and the actual result.</p> <p>Here is the part that makes the AJAX call and activates the tooltip:</p> <pre><code>jQuery(document).ready(function() { jQuery('.qty').keyup(function() { var qty = jQuery(this).val(); var pid = jQuery(this).next().html(); var element = this; jQuery.post('shopping_cart_ajax.php', {products_id: pid, products_quantity: qty}, function(data) { if (data) { jQuery(element).tooltip(); jQuery(element).unbind('mouseenter mouseleave'); jQuery(element).tooltip('update', data); jQuery(element).tooltip('show'); } else { jQuery(element).tooltip('destroy'); } }); }); }); </code></pre> <p>And the plugin itself:</p> <pre><code>(function($) { var methods = { //създаване на tooltip-а init: function(options) { //настройки по подразбиране if (!options) { options = { method: "hover", //метод за активация на tooltip-а по подразбиране (за момента има само hover опция) color: "#dc143c" //цвят по подразбиране }; } return this.each(function() { //намиране текста на tooltip-а var tooltip_text = $(this).attr("tooltip"); //добавяне на тялото и стрелката $(this).after('&lt;div&gt;&lt;/div&gt;'); $(this).after('&lt;div class="tooltip_base"&gt;'+tooltip_text+'&lt;/div&gt;'); switch (options.method) { case "hover": methods.hover(this, options.color); break; } }); }, //показване на tooltip-а при посочване с мишката hover: function(object, color) { $(object).hover( function() { methods.position(object, color); $(object).next().next().fadeIn(); //показване на стрелката $(object).next().fadeIn(); //показване на тялото }, function() { $(object).next().next().hide(); //скриване на стрелката $(object).next().hide(); //скриване на тялото } ); }, //позициониране на tooltip-а position: function(object, color) { //намиране позицията на елемента, под който трябва да се появи tooltip-а var offset = $(object).offset(); //намиране размерите на елемента var parent_width = $(object).outerWidth(); var parent_height = $(object).outerHeight(); //намиране размерите на tooltip-а var tooltip_width = $(object).next().outerWidth(); var tooltip_height = $(object).next().outerHeight(); //намиране вида на tooltip-а и начина на позициониране var pos_tooltip_top; var pos_tooltip_left; var pos_arrow_top; var pos_arrow_left; var arrow_type; if ($(object).hasClass("tooltip_top_center") == true) { pos_tooltip_top = offset.top-tooltip_height-5; pos_tooltip_left = offset.left+(parent_width/2)-(tooltip_width/2); pos_arrow_top = offset.top-5; pos_arrow_left = offset.left+(parent_width/2)-5; arrow_type = "tooltip_bottom_arrow"; } else if ($(object).hasClass("tooltip_top_right") == true) { pos_tooltip_top = offset.top-tooltip_height-5; pos_tooltip_left = offset.left+(parent_width/2)-12; pos_arrow_top = offset.top-5; pos_arrow_left = offset.left+(parent_width/2)-5; arrow_type = "tooltip_bottom_arrow"; } else if ($(object).hasClass("tooltip_top_left") == true) { pos_tooltip_top = offset.top-tooltip_height-5; pos_tooltip_left = offset.left-tooltip_width+(parent_width/2)+12; pos_arrow_top = offset.top-5; pos_arrow_left = offset.left+(parent_width/2)-5; arrow_type = "tooltip_bottom_arrow"; } else if ($(object).hasClass("tooltip_bottom_center") == true) { pos_tooltip_top = offset.top+parent_height+5; pos_tooltip_left = offset.left+(parent_width/2)-(tooltip_width/2); pos_arrow_top = offset.top+parent_height; pos_arrow_left = offset.left+parent_width/2-5; arrow_type = "tooltip_top_arrow"; } else if ($(object).hasClass("tooltip_bottom_right") == true) { pos_tooltip_top = offset.top+parent_height+5; pos_tooltip_left = offset.left+(parent_width/2)-12; pos_arrow_top = offset.top+parent_height; pos_arrow_left = offset.left+parent_width/2-5; arrow_type = "tooltip_top_arrow"; } else if ($(object).hasClass("tooltip_bottom_left") == true) { pos_tooltip_top = offset.top+parent_height+5; pos_tooltip_left = offset.left-tooltip_width+(parent_width/2)+12; pos_arrow_top = offset.top+parent_height; pos_arrow_left = offset.left+parent_width/2-5; arrow_type = "tooltip_top_arrow"; } else if ($(object).hasClass("tooltip_left") == true) { pos_tooltip_top = offset.top-(tooltip_height/2)+(parent_height/2); pos_tooltip_left = offset.left-tooltip_width-5; pos_arrow_top = offset.top-5+(parent_height/2); pos_arrow_left = offset.left-5; arrow_type = "tooltip_right_arrow"; } else if ($(object).hasClass("tooltip_right") == true) { pos_tooltip_top = offset.top-(tooltip_height/2)+(parent_height/2); pos_tooltip_left = offset.left+parent_width+5; pos_arrow_top = offset.top-5+(parent_height/2); pos_arrow_left = offset.left+parent_width; arrow_type = "tooltip_left_arrow"; } else { pos_tooltip_top = offset.top+parent_height+3; pos_tooltip_left = offset.left+(parent_width/2)-(tooltip_width/2); arrow_type = "tooltip_no_arrow"; } //позициониране на тялото $(object).next().css({ "top": pos_tooltip_top, "left": pos_tooltip_left }); //избиране на подходящата стрелка $(object).next().next().addClass(arrow_type); //позициониране на стрелката $(object).next().next().css({ "top": pos_arrow_top, "left": pos_arrow_left }); if (color != "") { //задаване цвят на тялото $(object).next().css({ "background-color": color }); var tooltip_class = $(object).next().next().attr("class"); var arrow_color; //задаване цвят на стрелката switch (tooltip_class) { case "tooltip_top_arrow": arrow_color = "transparent transparent "+color+" transparent"; break; case "tooltip_bottom_arrow": arrow_color = color+" transparent transparent transparent"; break; case "tooltip_left_arrow": arrow_color = "transparent "+color+" transparent transparent"; break; case "tooltip_right_arrow": arrow_color = "transparent transparent transparent "+color; break; } $(object).next().next().css({ "border-color": arrow_color }); } }, //показване show: function() { $(this).next().next().fadeIn(); //показване на стрелката $(this).next().fadeIn(); //показване на тялото }, //скриване hide: function() { $(this).next().next().hide(); //скриване на стрелката $(this).next().hide(); //скриване на тялото }, //промяна на съдържанието на tooltip-а update: function(content, color) { if (!color) { color = "#dc143c"; } $(this).attr({ "tooltip": content }); $(this).next().html(content); methods.position(this, color); }, //изтриване на tooltip-а destroy: function() { if ($(this).next().hasClass('tooltip_base')) { $(this).removeAttr('tooltip'); $(this).next().next().remove(); $(this).next().remove(); $(this).unbind('mouseenter mouseleave'); } } }; $.fn.tooltip = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method '+method+' does not exist on jQuery.tooltip'); } }; })(jQuery); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJJJ
    1. USNikolay Ivanov
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery plugin messing with AJAX results
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POjQuery plugin messing with AJAX results
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAjax is asynchronous, if you constantly hover over that tooltip back and forth, you're going to make a bunch of requests. Because they don't immediately return data (instantly), the `success` won't be called until it's finished. This will cause your data to change constantly. **and** in the future, please don't post entire snippets of plugins. You can't seriously expect people to go through that. Link to the github, or resource page.
      singulars
      1. POjQuery plugin messing with AJAX results
      1. USOhgodwhy
    2. COThe tooltip should be toggled on key up only if the data returned by AJAX is not empty, it's not toggled on hover. I posted the entire plugin because it's custom, there's no official website or github repo.
      singulars
      1. POjQuery plugin messing with AJAX results
      1. USNikolay Ivanov
    3. CO+1 for linking to GitHub/source of this plugin, if only so we can clean up that position() function - it's driving me crazy :)
      singulars
      1. POjQuery plugin messing with AJAX results
      1. USBobby Jack
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload