close a pop up and reload another pop up

Question

I am new to javascript and all so pardon me for the mistakes. I am trying to open a pop up for some device discovery. When clicked on the below div,

<div class="ui-grid-solo">
                <div class="ui-block-a">
                    <a href="#waitDiscoveryDialog" data-rel="popup"
                    data-position-to="window" data-transition="pop"
                    class="ui-btn ui-corner-all ui-shadow ui-btn-a"
                    >Discover Device  ...</a>
                </div>
</div>

it opens a pop up like this

<div data-role="popup" id="waitDiscoveryDialog" data-overlay-theme="b" data-theme="b"
   data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
  <h1>Device Discovery</h1>
</div>
<div role="main" class="ui-content">
  <h3 class="ui-title"
    >This will search for new Devices.</h3>

  <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b"
     data-rel="back">Cancel</a>
  <input type="button" data-theme="b" data-inline="true" value="Discover"
         onClick="var hi=document.createElement('input');
                  hi.type='hidden'; hi.name='action'; hi.value='Discover';
                  settings_form.appendChild(hi);
                  settings_form.submit();">
</div>
</div>

My requirement is to send the hi.name='action'; and hi.value='Discover' without the input button in the pop up. Because I am using flask framework and there i use this code

    if request.method == 'POST':
        rf = request.form  
        try:
            action = request.form["action"]
        except:
            action = ""
        if "Discover" == action:
         //code for discovering the device

Then close this pop up and open another pop up with a status like "Device found or not found". Can anyone help me to solve this.? Thanks in advance..

what do you mean by _"without the input button in the pop-up"_? On 'keyUp' event? — Learn on hard way, Mar 20 '18 at 07:08
I mean I want to send the action and value without clicking on the Discover button. Is it possible? — Tony Joy, Mar 20 '18 at 07:11
Of course, there are few approaches to this, and 'events' could handle this request. — Learn on hard way, Mar 20 '18 at 07:14
@Yuri actually this full code is under a form field. I forgot to mention that. — Tony Joy, Mar 20 '18 at 07:24
Maybe [this](https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element) can help you. — Learn on hard way, Mar 20 '18 at 07:43
@Learnonhardway The link was somewhat helpful. But it can not resolve the problem. Is there any 'events' or another method that can listen to some flags so that if that flag is set close the current pop up. — Tony Joy, Mar 21 '18 at 07:24

Tushar Shukla · Accepted Answer · 2018-03-23T11:23:18.617

1

As I can see in your code, there is no user input in the popup and you want to submit a static value. If this is the case, why do you even need to open a popup when it is not doing anything?

You can simply write a function triggered on click of button that opens the popup as of now and submit the form.

After submission, you can continue your function to open a popup for "Device found or not found"
For example:

<div class="myPopup">
   <h1>This is my popup</h1>
</div>

<style>
  .myPopup {
     display: none;
     position: fixed;
     top: 0px;
     bottom: 0px;
     top: 0px;
     bottom: 0px;
     margin: auto;
     border: 1px solid black;
     border-radius: 5px;
     height: 500px;
     width: 500px; 
  }

  .showPopup {
    display: inline-block;
  }
</style>

<button title="This will search for new devices" onclick="submitForm()">Discover</button>

function submitForm() {
  var hi=document.createElement('input');
  hi.type='hidden'; hi.name='action'; hi.value='Discover';
  settings_form.appendChild(hi);
  settings_form.submit();
}

settings_form[0].addEventListener("submit", function() {
  document.getElementsByClassName("myPopup")[0].classList.add("showPopup");
});

Let me know if this helps.

edited Mar 23 '18 at 11:23

answered Mar 23 '18 at 03:46

Tushar Shukla

5,666
2
27
41

1

Thank you Tushar. I tried with your answer and its working. But I also want a popup that says "This will search for new Devices" kind of message on clicking the Discover button. How can I do that with your code.? – Tony Joy Mar 23 '18 at 06:48
Ok, just hover on 'add comment' link just below and see if this popover sort of thing can work for you. If yes, then just add `title="This will search for new devices"` in your button. You can check my edit in button code. – Tushar Shukla Mar 23 '18 at 07:20
Ok that will do the work. Also can you give me some sample code to open the other pop up. – Tony Joy Mar 23 '18 at 07:55
see my edit for popup, its not tested but I'm very sure it will work. Also, you'll have to design you popup on your own. I've written just basic css for it. – Tushar Shukla Mar 23 '18 at 10:31

score 0 · Answer 2 · answered Mar 20 '18 at 07:17

0

Please try

<input type="button" data-theme="b" data-inline="true" onClick="var settings_form= $('formid'); settings_form.submit('Discover');">

answered Mar 20 '18 at 07:17

Praveen Kumar Tripathi

282
3
21

Thank you Praveen. But actually I don't want to click on the Discover button. I want to send the action and value when I open this pop up. – Tony Joy Mar 20 '18 at 07:30

close a pop up and reload another pop up

2 Answers2