Pop up only functions as intended the third time I open it?

Question

I have a pop up I am making thats intended function is to open with interactive calendar Which allows the User to input a Start date and End date using jquery datepicker. However currently on page load, I have to open and close the pop up twice before it functions as intended I am wondering why this is happening / how to fix it ? Here is the code

webpage in question

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title> {(BnB)} Market </title>
  </head>

<div id= 'user_listings'>
 </div>
 <body>
 Market BnB
 </body>
<a href = '/make_listings' > Looking to show your own listing? </a>
<div id = 'table'>
<table>
  <tr>
  <h1> BnB-able properties </h1>
  </tr> 
  <% @BnB.each do |record| %>
  <tr>
     <td class ='new_BnB'><%= record['address'] %> </td>
    <td class ='code_BnB'> | <%= record['post_code']%> </td>
    <br>

       <a id="OpenDialog" href="#">  <img src = <%= record['photo'] %> width="300" height="200" alt='test' >
    </a> 
    <div id="dialog" title="Property Info" style="display: none;" >
    <p>
<p>Start date: <input type="text" id="datepicker"> End date: <input type="text" id="datepicker2"></p>
 <input type = "submit" value='Submit'>
</p>

    </div>

    </tr>

    </table>
    <% end %>

    <head>

    <head>
<title></title>
</head>
<body>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</body>

  <%# <title>jQuery UI Datepicker - Default functionality</title> %>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

  <script src="interface.js"></script>

</div>

interface.js

 $(document).ready(function() {
    $("#OpenDialog").click(function () {
     $("#dialog").dialog({modal: true, height: 500, width: 700 });
   });
 });

  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  $( function() {
    $( "#datepicker2" ).datepicker();
  } );

** what the @BnB value is **

require 'pg'

class BnBControl

  attr_accessor :connection

  def self.all
    @connection = PG.connect(dbname: 'bnb')

    listings = @connection.exec("SELECT * FROM properties")
  end
------
class BnB < Sinatra::Base
  enable :sessions

  get '/' do
    #if session[:user] 

      @BnB = BnBControl.all 

      erb :index_logged_in 
    # else
    #   erb :index
    # end
  end

these are seperate files just included in same code fence

What does it do when it doesn't "function as intended"? And, how many `@BnB` records are listed on the page whose elements all have the html ids? When there are multiple, how do you differentiate which `#datepicker` and `#dialog` from the **x** on the page you're referencing? — Simple Lime, Jan 29 '20 at 13:06
ah there are 2 @BnB records on the page and by not functioning as intented I mean first pop up has the calendar but wont put anything into the text field second pop wont open the calender and third has both calender and will put calender dates into the text field - I currently dont have a method in there for differentiating I havent built that in yet — JBDR, Jan 29 '20 at 13:19

score 1 · Answer 1 · answered Jan 29 '20 at 13:06

you using document.ready as well as $(function() which are same and need not to be used multiple time. also, call datepicker function inside $(document).ready before popup click event handler, which should work for you.

Try below

$(document).ready(function() {
    $( "#datepicker" ).datepicker();
    $( "#datepicker2" ).datepicker();
    $("#OpenDialog").click(function () {
     $("#dialog").dialog({modal: true, height: 500, width: 700 });
   });
});

Pop up only functions as intended the third time I open it?

1 Answers1