How to freeze table header at modal box - php

So I have tried using these TableLock method on normal page, it works just fine, but I tried using it on modal box and it didn't work. Any idea how to make table header at modal box freezes after it touched the top part of browser? I don't want the whole table to stay in one place like this freeze pane.

Related

How to pass unique data to bootstrap modal in while loop

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

Run PHP file in the background

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.

jquery mobile dialog window close returns to a blank page

I have a small app the returns search results via PHP and MySQL. These search results create a list of buttons that the user will then tap to select. This in turn launches a dialog (via data-rel="dialog") with a set of choices. When the cancel/close function is selected the dialog is closed but the search results page is blank. I am using this to cancel the dialog:
Cancel
To be clear each page is different file. so I have search.php, list.php, and detail.php. I have tried to disable ajax on the links to no avail. Each time the cancel or close dialog button is clicked the list.php is blank. I am guessing this has something to do with jQuery wiping out the DOM. Is there anyway around this?
Thanks.
Try to debug by opening the search result page directly in browser.
eg., http://localhost/list.php#/search.php?q=keywordyousearch to http://localhost/search.php?q=keywordyousearch
Normally jQuery Mobile shows blank page if there is an error in page while loading via Ajax.

Open a popup browser window to select a record

I want to open a popup window on client PC where I will show records. The user will click on the selected row, and the popup window will disappear, but the parent Form on my page must get filled with the DB values related to the clicked row on the popup.
This is what I want to do. What is the right approach?
You should be able to send back some response to your parent window from popup window.
There is a specific javascript methods to do this. See this.
You can also use a modal popup type container which will make communication simpler and give you more control of the data. It'll also work flawlessly even if the client has any sort of popup blocker (which most do by default).
It's easy to build from scratch and there are also many jquery plugins that make it even simpler.

Running jQuery command from modal window to affect main page

I'm currently trying to write a jQuery script which opens a modal box then (upon user entry) changes a value on the original page.
Currently I've got the script working on just the page itself (without the modal), but when I try to run the command from the modal the value on the main page doesn't change?
Does anyone know how I can solve this?
Thanks,
Tom
Make a function in the page itself (not the modal sub-page), then call opener.myMethod() in the modal sub-page.
If the modal dialog is using an iframe, then from within the iframe you can do either of the following (depending on whether you have nested iframes or whatnot).
window.parent.myMethod();
top.myMethod();
And to access elements on the main page you could do this (assuming you have jquery included on the main page as well):
top.$('#myDiv').html('hello world');
Hope this helps.

Categories