通过AJAX从JSON设置值

Question

I'm using Github Gists for a web playground I'm making as a side project. I load two json files into the editor. 1 handles all the libraries (jquery, bootstrap, etc:) and another for the users settings (fontsize, version, etc:)

So anyway I have this JSON named settings

var settings   = gistdata.data.files["settings.json"].content
var jsonSets = JSON.parse(settings)

I parse and attempted to grab an object from the JSON and set it as a value of a input textbox.

Now console.log(jsonSets.siteTitle) works perfectly fine

but when I try to change the input dynamically...

$("[data-action=sitetitle]").val(jsonSets.siteTitle).trigger("change")

The problem is it's not actually applying the value!

The only way I've been able to successfully apply the value is...

setTimeout(function() {
  $("[data-action=sitetitle]").val(jsonSets.siteTitle).trigger("change")
}, 5000)

Which is ridiculously slow.

Does anyone know why it's not applying the value?
in addition.
How can I solve this problem?

var hash = window.location.hash.substring(1)
if (window.location.hash) {
  function loadgist(gistid) {
    $.ajax({
      url: "https://api.github.com/gists/" + gistid,
      type: "GET",
      dataType: "jsonp"
    }).success(function(gistdata) {
      var libraries  = gistdata.data.files["libraries.json"].content
      var settings   = gistdata.data.files["settings.json"].content

      var jsonLibs = JSON.parse(libraries)
      var jsonSets = JSON.parse(settings)

      // Return libraries from json
      $.each(jsonLibs, function(name, value) {
        $(".ldd-submenu #" + name).prop("checked", value)
      })

      // Return font settings from json
      var siteTitle      = jsonSets.siteTitle
      var WeaveVersion   = jsonSets.version
      var editorFontSize = jsonSets.editorFontSize
      var WeaveDesc      = jsonSets.description
      var WeaveAuthor    = jsonSets.author

      $("[data-action=sitetitle]").val(siteTitle).trigger("change")
      $("[data-value=version]").val(WeaveVersion).trigger("change")
      $("[data-editor=fontSize]").val(editorFontSize).trigger("change")
      $("[data-action=sitedesc]").val(WeaveDesc).trigger("change")
      $("[data-action=siteauthor]").val(WeaveAuthor).trigger("change")
    }).error(function(e) {
      // ajax error
      console.warn("Error: Could not load weave!", e)
    })
  }

  loadgist(hash)
} else {
  // No hash found
}

Answer 1

My problem was actually related to localStorage.
I cleared it localStorage.clear(); ran the ajax function after and it solved the problem.

var hash = window.location.hash.substring(1)
if (window.location.hash) {
  localStorage.clear()
  function loadgist(gistid) {
    $.ajax({
      url: "https://api.github.com/gists/" + gistid,
      type: "GET",
      dataType: "jsonp",
      jsonp: "callback"
    }).success(function(gistdata) {
      var htmlVal    = gistdata.data.files["index.html"].content
      var cssVal     = gistdata.data.files["index.css"].content
      var jsVal      = gistdata.data.files["index.js"].content
      var mdVal      = gistdata.data.files["README.md"].content
      var settings   = gistdata.data.files["settings.json"].content
      var libraries  = gistdata.data.files["libraries.json"].content
      var jsonSets   = JSON.parse(settings)
      var jsonLibs   = JSON.parse(libraries)

      // Return font settings from json
      var siteTitle      = jsonSets.siteTitle
      var WeaveVersion   = jsonSets.version
      var editorFontSize = jsonSets.editorFontSize
      var WeaveDesc      = jsonSets.description
      var WeaveAuthor    = jsonSets.author

      $("[data-action=sitetitle]").val(siteTitle)
      $("[data-value=version]").val(WeaveVersion)
      $("[data-editor=fontSize]").val(editorFontSize)
      $("[data-action=sitedesc]").val(WeaveDesc)
      $("[data-action=siteauthor]").val(WeaveAuthor)
      storeValues()

      // Return settings from the json
      $(".metaboxes input.heading").trigger("keyup")

      // Return libraries from json
      $.each(jsonLibs, function(name, value) {
        $(".ldd-submenu #" + name).prop("checked", value).trigger("keyup")
      })

      // Set checked libraries into preview
      $("#jquery").trigger("keyup")

      // Return the editor's values
      mdEditor.setValue(mdVal)
      htmlEditor.setValue(htmlVal)
      cssEditor.setValue(cssVal)
      jsEditor.setValue(jsVal)

    }).error(function(e) {
      // ajax error
      console.warn("Error: Could not load weave!", e)
    })
  }

  loadgist(hash)
} else {
  // No hash found
}