I am trying to create a delete-button for each printed row in a php while loop that opens a modal window. The delete query will be executed from the modal.
How can I pass the corresponding row's id, title etc to the modal?
The way it is now, I only get the data from the first table row no matter what delete-button I press.
There are many solutions out there, but I can't make them work.
Hoping someone can help me understand this...
PHP is server side, so it really needs done in Javascript.
I created a Javascript lib if you are interested called bs-delete-confirm. you add a class to your delete button, and when you click it, it stops an href from leaving the page and brings up a Bootstrap modal asking if you are sure you wish to perform the action. Clicking ok follows the link, clicking cancel doesn't. Simple!.
Check it out here https://github.com/delboy1978uk/bs-delete-confirm
X
$(document).ready(function(){
$('.delete_class').deleteConfirm();
});
and that's it! you now have a delete confirm modal :-)
I tend to create a hidden modal in the bottom of my html and clone it into a new variable, then change the data for that new modal, append it and fire it up.
That way when you delete it or need to create a second one, you always have access to your template/blueprint.
It also allows you to keep a separate reference to every modal for later use.
eg $modal1.find('.inputEmail') and $modal2.find('.inputEmail')
You can even make that dynamic afterwards if you have many inputs
Related
I wonder if it is possible to run a PHP file in the background on my website?
What I want to do is to show a form with inputs and dropdowns. The content of the dropdown is taken from a table in a MySQL database. Next to the dropdown is an Edit button which opens a Bootstrap Modal and shows all the content in the table for the dropdown. Here I can make changes to the table. Then I want to go back to the form and apply the changes I jsut made (i.e. select a new post from the dropdown).
I know how to do all of this - BUT - when I save the changes to the dropdown table, a php file is called to perform the SQL syntax and then redirects the user back to the form. Every input you have made in the form is lost since the page is reloaded.
Is there a way to make it work like I want?
I understand that you need to implement Ajax to do the background operation. Ajax request runs in background, its entry and exit is handled through Javascript functions . See here : http://www.w3schools.com/ajax/
As some already noted, Ajax is the way to go in this case.
An idea would be to use ajax to send the modal data to the server (saving the new options for the dropdown) when the user clicks in the "save" button (or anything equivalent). When this ajax call finish successfully, you could reload the dropdown with another ajax call (or even better, save the modal data in a temporary structure in JavaScript and use it to update the dropdown once the first ajax call is successful, hence avoiding some work on the server)
Note that the page won't reload in the whole process.
The simplest and the easiest way to do this is to open the modal in a new window.
example
Modal
And you can attached this to your select option value with a on-click event.
I have a base php file that displays items in a database on an html table. Each row has a remove button. When pressed, it will remove that one item from the database. At the end of the table, there is an add button that once it is pressed will take you to another php file with a form that you can fill out with information to add to the database. I am having two problems. The first is that I am not sure how to determine what remove button is pushed. My second question is how do I move to a different page for the other php file once the add button is clicked? I am not supposed to use AJAX for this. And though I tried using include and isset, I couldn't get them to work properly. Any help, conceptual or code examples would be greatly appreciated.
If you can go to other pages, simply create a form with a hidden input field holding the id of the row and have the remove button be a form submit button.
On the remove button being clicked it will go to the delete php file and redirect back to the table page.
As far as the adding button, instead of using a button just use a link to the add form.
If any of this doesn't work because of requirements you haven't mentioned let me know of any restrictions you have.
For your first problem, just make a form for each individual row of data. that way, you will be able to pass by post the relevant id you want to remove.
Another way would be to create a "button" (not a submit button) and have the relevant onClick="..." script - like redirect to "index?Action=Remove&Id=xxxx"
By making different form for each button, you add button will have its own "action" in the form and you'll be allright!
You either have to generate a new "form" (with proper html) if you need to pass data to your next page. If you only need to redirect depending on which button you press, you can have a onClick="..." event on your button. Make sure not to make a "submit" button :)
Long story short I am using javascript and php to add / remove questions to a database (think notecards to study with). It all works except I can't get the table on my page to refresh whenever I hit the add question button which uses a XHR to add the data. I can refresh the page manually and see the updated table with my information, but want to use ajax to refresh the table on-screen right after I submit the new question (or delete it) seamlessly. I would rather not have to redraw the entire page, just the table and the info. I understand how to use the XHR and refresh the mysql...but how can I tell the browser to reload a table in a specific div on the page - and only that specific table - with the additional or removed info?
I can NOT use Jquery or other frameworks, just plain old JS, PHP, and html.
I have been searching, and just can't get that "ah-ha" moment yet, can't anybody help me out and push me in the right direction? Generalities, Dom commands to look up or research would be a great help, I don't need character by character coding done by the collective.
thank you, :-)
All you need to do is get it with a method such as document.getElementById or document.querySelector. Then you could change the element however you would need to.
var element = document.querySelector('#elToChange');
element.innerHTML = //something from the server
element.remove(); //for deleting
//If you delete remember to do the following so that you don't have a memory leak.
delete element;
I'd look at innerHTML you can place your table inside a div or whatever, and use innerHTML to regenerate the contents of that div.
I am playing with things here above my head but am desperately trying to learn.
I have an administration page, using jquery I display a hidden div that displays a another page inside.
I do this using:
$(document).ready(function(){
$("a#fadeoutblog").click(function(){
$("#page").fadeTo("slow",0.25)
$("#terms4").fadeIn("slow")
$("#back2").fadeIn("slow")
$("#terms4").load("blogpageload.php")
}); });
So terms4 is the div on the admin page and it diplays the page blogpageload.php!
On this page is a table that displays all the posts of a really simple blog, 'a' delete post a tag and an approve post 'a' tag (which just sets the approved column to 'Y' in the database). What i want is for the page inside this div to refresh when a post in the table is deleted(or the delete 'a' tag is clicked). The problem is that when you click on the delete 'a' tag we are sent to the ammendblogdatabase.php page first so that the post can be deleted!.
I have tried multiple methods but they all have problems!
The main part that is causing problems is that to view this div that contains a page the user must first click on another a tag that uses a jquery to stop the 'display: none;'.
Im not sure what code you may need to see but please ask....
This is the information in the table cell with the delete button:
echo "<a id='refreshblog' href='deleteblogentry.php?username=".$usn."&timeleft=".$tml."'>Delete</a>";
Thank you!
The problem you're most likely having is binding to "future" elements (e.g. elements that will be on the page, but aren't yet). To overcome this, you can use .on() to avoid this.
$('#terms4').on('click','a',function(){
// will bind to anchor elements in #terms4 at the time of execution
// (most likely page ready) and look for future anchors added (in
// the case of .load() completing)
});
From there, you can bind your own show/hide event, maybe call an ajax method that deletes the entry behind the scenes, and make a re-call to .load again and refresh the page.
I am building a page with a button which opens a popup and allows to create a new record in MySQL table. Now I would like to refresh part of the parent page with summary results after the popup window closed. Could you please let me know if there are any examples or sample code? I gooled but couldn't find any example. Thanks for your help.
Are you using any JS lib?
Assuming you are using jQuery + jQuery UI for popup, you can look at jQuery UI modal form example (one note - there is no ajax used, but it's fairly simple to do so).
Idea is simple, bind to onClose popup event, serialize form, submit, and insert recived data into page content.
I guess you will need to call javascript function of parent which will change a particular div based upon your requirement..