CODEWITHSUNDEEP
jqueryjsonjquery-ui
Znowman
Znowman

Reputation: 395

jQuery UI with json

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);
  });


});

Upvotes: 0

Views: 145

Answers (2)

Jared Dykstra
Jared Dykstra

Reputation: 3626

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

Upvotes: 2

SunKnight0
SunKnight0

Reputation: 3351

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.

Upvotes: 0

Related Questions