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.
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 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
I'm building a WordPress site with a modal window for entering search terms. On submit, the modal window is supposed to close and the search results are returned on the search results page.
I've tried WordPress' native search functionality (4.7), as well as Search Filter Pro (2.2). Both search forms work correctly and reroute if they are used in the main content area, NOT in a modal.
example.com/search/?_sf_s=pigs (I cannot show the dev site without client permission)
But when using the modal window, upon submit, the page does not redirect, but the URL query changes to:
example.com/?_sf_search%5B0%5D=pigs&_sf_submit=Search
I'm using Bootstrap 3 for the modal, but I've also tried another jQuery plugin (leanModal.js). Both of them reproduce the problem in the exact same way.
Is there a fundamental problem with submitting a form in a modal window? Is the closing of the modal window triggering a callback that somehow prevents the form _POST from firing? Has anyone encountered this problem before?
Any feedback would be appreciated.
Thx,
Michael
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.
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.