Question

我有使用JSON数组和jQuery .append从mySQL数据库动态创建3列图像网格的代码。如何将$row使用<div>创建的.append中的href中的每个图像的数据库$.getJSON ID传递给模态？我正在使用AJAX语句调用/构建模式。

下面的行从完整的href语句开始向下。我相信我可以在// These lines generate the clickable grid images <a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '"> <a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '"></a>中传递ID，但不确定在哪里或如何传递？

//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
  //loop through each surfboard in the JSON file and append a <div> with the surfboard information
  $.each(data.Surfboards, function (row) {
      $("#board_table").append(
        '<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id=' 
        + data.Surfboards[row].Surfboard.id 
        + '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
        + data.Surfboards[row].Surfboard.imageName + '" alt="'
        + data.Surfboards[row].Surfboard.imageName
        + '"></a><figcaption><p>Board Name: ' 
        + data.Surfboards[row].Surfboard.boardName 
        + '<br>Year Shaped: ' 
        + data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
  });
});

JSON解析器-构建图像网格：

<!-- Ajax Database Modal Start -->
      <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
          <div class="modal-content">  
            <div class="modal-header">  
              <button type="button" class="close" data-dismiss="modal">&times;</button>  
              <h4 class="modal-title">Surfboard Details</h4>  
            </div>  
            <div class="modal-body" id="surfboard_detail">  
            </div>  
            <div class="modal-footer">  
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
            </div>  
          </div>  
        </div>  
      </div>

图像模式：

$cursor = $collection->find( [ 'field' => 'foobar'] );
foreach ($cursor as $document) {
    // long running processes (slow)
}

链接到带有工作表示例的页面，并在图像上单击空白模式：Nalu.live/equipment
链接到github repo

请让我知道是否需要其他信息。

请考虑我仍然是一名学生，并且是Web开发的新手。
谢谢你的帮助。

Answer 1

我在同学的帮助下解决了这个问题。工作代码在下面链接的GitHub存储库中。请注意，从JSON数据库数据构建图像网格的代码在下面发布，也可以在scripts/surfboard.js

中找到

我很乐意回答问题（如果可以的话），或者在需要时通过代码陪伴任何人。

Nalu Github Repo

class popupWindowOscil(tk.Frame):

  def __init__(self,master,ser):

    OscilTop= self.OscilTop= Toplevel(master)
    tk.Frame.__init__(self)
    self.ser = ser   
    self.fig = plt.figure()
    self.ax = self.fig.add_subplot(1, 1, 1)

    self.xs = []
    self.ys = []
    self.xval =0
    self.OscilLoop()


  def OscilLoop(self):

    ani = animation.FuncAnimation(self.fig, self.Oscilliscope, fargs=(self.xs, self.ys))
    #self.canvas = FigureCanvasTkAgg(self.fig, self)
    #self.canvas.draw()
    #self.canvas.get_tk_widget().pack(side=tk.BOTTOM, fill=tk.BOTH, expand=True)
    plt.show()
    return

# The function that creates the values for the plot.
  def Oscilliscope(self,i,xs,ys):

    tryagain =1
    while tryagain == 1:
        try:
            reading = self.ser.readline().decode()
            tryagain = 0
        except UnicodeDecodeError:
            pass
    Incominglist = str(reading).split(",")
    try:
        numbers = [float(x) for x in Incominglist]
    except ValueError:
        print ('Failure during string decode, Restart and Try again')
        return
    # Add x and y to lists
    self.ys.extend(numbers)

    for val in range(len(Incominglist)):
        if  self.xval == 0 and val ==0:
            self.xs.append(self.xval)  # or any arbitrary update to your figure's data
        else:
            self.xval += 0.005
            self.xs.append(self.xval)

    # Draw x and y lists
    self.ax.clear()
    self.ax.plot(self.xs, self.ys)

    # Format plot
    self.ax.yaxis.set_ticks(np.arange(0,5,0.25))
    plt.subplots_adjust(bottom=0.30)

从JSON将图像ID-数组索引-传递给模态

1 个答案: