jQuery UI with json

Question

Been trying to add jquery UI functions to my images I'm loading from a json file. Why won't the tooltip and mouseover work on my img id I'm creating when loading the images? Also, I'm using a jquery ui tab menu, used to load the images directly from my folder through in the html file and have them link to the different tabs in the menu. Is there a way to make it work when I'm loading the images from a json file instead?

$(document).ready(function() {
  $(document).tooltip();


  $("#click").mouseenter(function() {
    $("this").stop().animate({
      width: "220px",
      height: "170px"
    });
  });

  $().mouseleave(function() {
    $(this).stop().animate({
      width: "200px",
      height: "150px"
    });
  });

  $("#contentBox").tabs();

  $("a[href=#click]").click(function() {
    $("#contentBox").tabs("option", "active", 1);
  });
  $("a[href=#recept2]").click(function() {
    $("#contentBox").tabs("option", "active", 2);
  });
  $("a[href=#recept3]").click(function() {
    $("#contentBox").tabs("option", "active", 3);
  });
  $("a[href=#recept4]").click(function() {
    $("#contentBox").tabs("option", "active", 4);
  });
  $("a[href=#recept5]").click(function() {
    $("#contentBox").tabs("option", "active", 5);
  });
  $("a[href=#recept6]").click(function() {
    $("#contentBox").tabs("option", "active", 6);
  });
  $("a[href=#recept7]").click(function() {
    $("#contentBox").tabs("option", "active", 7);
  });
  $("a[href=#recept8]").click(function() {
    $("#contentBox").tabs("option", "active", 8);
  });
  $("a[href=#recept9]").click(function() {
    $("#contentBox").tabs("option", "active", 9);
  });


  var jsonDoc = "mylist.json";
  $.getJSON(jsonDoc, function(json) {
    var imgList = "";
    $.each(json.imgs, function() {
      imgList += '<a href="#recept"><img id="click" src= "' + this.imgPath + '"></a>';
    });

    $("#picList").append(imgList);
  });


});

score 2 · Answer 1 · edited May 23 '17 at 11:59

The issue is the order that your jQuery methods are executed.

$.getJSON is asynchronous by default, so you can either add handlers using .done() on the XHR, or add handlers the callback method of getJSON().

If you use the synchronous API by setting async:false, your application will block during the HTTP request, while the server is processing, and the time it takes to send the response. From the JQuery Docs:

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

For information about async vs sync in Javascript, see: Is Javascript synchronous(blocking) or Asynchronous(nonblocking) by default

Worked as soon as I ran json outside $document. – Znowman Nov 12 '15 at 20:17 — Znowman, Nov 12 '15 at 20:17

score 0 · Accepted Answer · answered Oct 28 '15 at 19:32

0

Since the img element does not exist on document creation $("#click").mouseenter or any other triggers for that element do not work when included in $(document).ready. Make your JSON synchronous so that you know it is done creating the element and then add the triggers related to the element.

answered Oct 28 '15 at 19:32

SunKnight0

3,331
1
10
8

How would I go about making json synchronous? – Znowman Oct 28 '15 at 19:53
`$.ajaxSetup({"async":false});` you can use the same with `true` to revert it back once done if you want to keep it asynchronous for other functions. – SunKnight0 Oct 28 '15 at 19:56

jQuery UI with json

2 Answers2