将变量传递给弹出框

Question

i have a bit complicated problem about passing variables in php.

I have listed and nested items in html <ul> tag and near every item i have button which should edit name of directory or file(<ul> list are generated from existing directory tree view in server).

I managed to make a popup form to let user enter new name and i have path to the old name.

list part in index.html(which is generated):

<ul>
<li>
  <p>folder</p>
  <div class="edit-button">
    <a href="index.php?path=!working part with getting path!></a>
  </div>
  <ul>
    <li>
    ... and here subfolders etc
    </li>
  </ul>
</li>
</ul>

popup form part in index.html:

<div id="popupEdit" class="popupEdit">
    <?php $path = $_GET['path']; ?>
    <div class="popupEdit-content">
        <form action="rename.php" method="post">
            <input type="text" name="path" value="<?php echo $path; ?>" >
            <input type="text" name="new-name" placeholder="nowa nazwa">
            <input type="submit" value="Submit" class="popupEdit-submit">
        </form>
    </div>
</div>

first input with name path will be hidden to pass through path of the file. rename.php works fine with static new name so it's just about passing new-name into that file.

So there are two major problems here:

1. when i open popup window after clicking in editing button i have refreshed page(because of a tag) so my popup dont last long because in default(after refresh) popup have display: none
2. after button is clicked for the first time i dont get path property into input but when url of site is already filled with ?path=... part it's good and on popup for half of second(before it's reloaded) i am able to see that input with name path is filled with path correctly.

I think it's possible with ajax request but i have no idea how to making that possible.

I just want to edit current node name, maybe there is simplier way to do this?

Answer 1

I think the best option will be to use jQuery. Here's a working example, setting dynamically the path of the forms

$('.toggler').click(function(){
  var path = $(this).attr('path');
  $('#popupEdit').css('display','block');
  $('.pathinput').val(path);
  $('.path').text(path);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggler" path="example text">Click Me</button>
<button class="toggler" path="example text 2">Click Me 2</button>
<button class="toggler" path="example text 3">Click Me 2</button>



             
<div id="popupEdit" class="popupEdit" style="display: none">
    <p class="path"></p>
    <div class="popupEdit-content">
        <form action="rename.php" method="post">
            <input type="text" name="path" class="pathinput" value="PATHHERE" >
            <input type="text" name="new-name" placeholder="nowa nazwa">
            <input type="submit" value="Submit" class="popupEdit-submit">
        </form>
    </div>
</div>

</div>