I have dynamic content inside a Bootstrap modal. It means that I have a number of buttons that open the modal and send it to different ID. The ID pulls data from the DB.
CREATE NEW SECTION
CREATE NEW SECTION
I have a script inside the modal. If I call to "jquery-1.11.1.min.js" inside the modal then all the scripts work fine. But the problem is that the modal doesn't refresh when it's getting opened (same content displays with each opening). If I remove the jquery file from the modal then some scripts do not work.
Please make sure that the sequence of calling jquery is correct i.e call jquery-1.11.1.min.js on top after that call bootstrap jquery. Hope so it will solve the problem.
It matters in which order you call the resources in the head or top part if you will. Just cut the code line which calls jquery and put it above the call for bootstrap. Maybe make a fiddle or something so people can check to see what's wrong
Related
It's another late night and another seemingly simple issue that's causing a headache!
So, here's the situation. I have a simple HTML form that's in a Bootstrap modal. When this form is submitted, there's an AJAX POST to a receiving page, SESSIONS are set and the request is then forwarded to a simple DB query. This all works.
What I want to do is show the sessions on the original page without a page refresh.
I thought this would be easy so I tried using this on the original page;
$('#filteroptions').on('hidden.bs.modal', function () {
$("#breadcrumbs").load('includes/files/private/breadcrumb.php');
});
breadcrumb.php holds the output format and the file is populated immediately after the POST from the modal (called filteroptions)
I also tried to attach it to the POST success with a simple success process to load the file but each time, the breadcrumb.php fils to be loaded.
Curiously, if I ctrl+F5 the page after the first POST, there is no value shown BUT if I search again the DIV is updated each time I search after that.
Why would the request not fire the first time that the search is performed? Why do I need to refresh the page for everything to start working?
There is no caching to it's not a case of a dependantr file being cached after the refresh.
Thanks
The solution was to populate the div with nothing and then update it.
Previously, the div was only being drawn when it was populated thanks to the code in the breadcrumb file looking for a specific POST or SESSION variable.
It now allows for a blank value.
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
I have a profile page where im showing the friends of that user from db, I'm using auto scroller that works fine if I place that data directly in main file not an external file, Also I have a drop down that on selection will sort the friends records accordingly, but as I have moved the code to main file, I need to make ajax call to same file not an external, to repopulate data with required sorting.
Please let me know how can i do this on same file with ajax. On selection of drop down value.
Have you considered using Jquery?
Its surprisingly easy. You just need to do $('#contentdiv').load('contentyouwant') where you bind the event for the ddl.
If you must use the same file, place the code that will be ran by ajax, in a function. then at the beginning of the page, evaluate if this was the ajax call or the whole file.
Hope it helps.
I am having difficulties in the following problem:
I have a screen in PHP which displays a list of some records when I choose any of these
records (by clicking) it gives me a web site to share the data with this record. So far, it works.
I need to click on some of these records, instead of him
open another page, scroll down the screen and the record data to appear in the same screen, ie without opening another window.
Do you have any idea how to do this?
Thanks
You'll need to have a DIV at the bottom of the page, which will be completed by using an Ajax call and some javascript or jquery.
Without going into too much detail, heres what needs to happen:
User clicks a link which fires off an ajax request.
The backend PHP script takes the ajax call and generates either XML or pure HTML and returns the data.
JQuery or JavaScript on the original page takes the return and populates the empty DIV at the bottom of the page.
Regards
It sounds like you'll need to use ajax to pull this off.
I would personally suggest starting with reading up on the jQuery javascript library if you are not familiar with it already. It provides a very good set of ajax tools to work with.
Create a DIV layer on the bottom of the page. Use a simple AJAX library like this
Create a new php page that will only load a new record based on the recordID and call this page on the onclick method of your link that is now opening in the new window
I would try adding some jQuery to your page to handle this effect.
If you do add jQuery here is a function written to do just that:
http://pastebin.com/SeMHwSgg
Call the script like so:
Where a is the record you are having them click on and href="[some anchor]" located at the spot on the screen where you want the scrolling to stop:
<a id="gotop" href="#" onclick="goTop();return false;">click here</a>
So
Indeed, there is no error, it just does not have the effect that (scroll down the screen and show the record data). For now, it only shows the record open in another window.
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.