StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There were still a few issues in your updated code. I've made some changes, and pasted in the code below. I've changed the method to <code>$.post()</code>, so your PHP file will need to access the parameter as <code>$_POST['filename']</code>.</p> <p>A couple issues I noticed, you had more than one element with the same <code>id</code> attribute. I removed the redundant <code>data-filename</code> attributes from elements that didn't need them. I placed your jQuery inside a <code>$(document).ready()</code> in order to make sure that nothing was called until all DOM elements had been loaded. I also used the <code>.on</code> method for binding the event...just in case you ever dynamically add more <code>li</code> elements with the <code>a.image-list</code> element. This way you are binding the event to an element that will always be there, and catching it on the <code>a.image-list</code>. (I might be explaining that incorrectly...it's late).</p> <p>Hope this helps.</p> <pre><code><ul class="image-list"> <?php $count = 1; if ($hotelId) { foreach(glob($hotelDir) as $filename=>$hotelvalue){ echo '<li id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" title="Delete" data-filename="' . basename($hotelvalue) . '" ><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>"; $count++; } } ?> </ul> <script> $(document).ready(function(){ $("ul.image-list").on("click", "li.image-list a.image-list", function () { var _clicked = $(this); var _filename = _clicked.attr('data-filename'); _clicked.parents("li.image-list").fadeOut(function(){ $(this).empty().remove(); }); $.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) { // it succeeded }).fail( function (error){ // it failed }); }); }) </script> </code></pre> <p><strong>UPDATE:</strong> I had a typo in my code...not sure you caught it. </p> <p><code>var _filename = clicked.attr('data-filename');</code></p> <p><strong>SHOULD BE...</strong></p> <p><code>var _filename = _clicked.attr('data-filename');</code></p> <p>My apologies.</p> <p>To see if you are hitting your PHP file, you can do something simple like this...</p> <pre><code><?php $data["response"] = $_POST['filename']; echo json_encode($data); ?> </code></pre> <p>And then modify your <code>.done</code> method to look like this...</p> <pre><code>$.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) { // it succeeded console.log(data); }).fail( function (error){ // it failed }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload