I'm working within Zend Framework 2 and following this tutorial to display and handle form submission via AJAX. Instead of using a jQuery UI modal, I'm using the modal from Twitter Bootstrap 3.
To begin with, I'm just trying to load some dummy content in the modal by specifying a path to a controller action in the href attribute of the modal trigger button.
The view file for the AJAX action I call contains dummy html.
When I click on 'Add Agency', the page darkens but no modal window is displayed although the dummy html does appear in the top left corner of the page. I'm expecting a Twitter Bootstrap modal window to be displayed along with the dummy html within it. When I remove the href tag from the modal trigger button, the modal displays fine.
Appreciate if anyone can help me achieve this simple aim of loading content in the Twitter Bootstrap modal window.
The reason my dummy HTML wasn't being displayed within the modal window was because I wrote the HTML markup for the modal div, along with its inner divs for the header, body and footer sections of the modal. I wrongly assumed that the content I call via AJAX will be inserted into the modal-body div, however the HTML doest not get injected in the modal-body div and because the markup for that div already exists, the dummy HTML appears outside of this and breaks the layout.
So I removed all the inner divs within the modal div and moved them into the remote content, so that the HTML I want to return is enclosed in those divs.
Related
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
Is it possible to take the user where the cursor is after reloading the page? I'm enabling a <textarea> on the basis of some URL parameters on page reload using PHP. But in the new window the textarea will open on the bottom of the page. If the page is already lengthy the textarea will be hidden beneath.
Is there any way so that after reloading the page the textarea appears on the viewport so that it can be filled?
I tried:
Write
...
<a href="#ok">#<a> <!-- setting a bookmark to get the viewport here -->
<textarea><textarea>
I know there are plenty of solutions using AJAX, using lightbox etc. But I need a generic way, may be HTML or a server-side solution. Or, in a nay-say it can be jQuery.
It doesn't appear that you are using the anchor (or bookmark, as you called it) correctly. If you give the <textarea> tag an id of "ok" you should be able to link directly to that area of the page by using the # in your link to the page. Example: somepage.html#ok
There is no need to use the <a> tag to create an anchor. That is outdated.
I have index page with some modal box.
these modal cause page become very untidy and bad effect when page loaded.
Now this is my question,how can i load that modal when click that link without refresh,i do not have any modal in index page at first,by click i include that modal?
I use laravel 4 framework,some guys say it is possible by event in laravel,is it?
So I have this site on which I have several divs. When you click on a div, a modal opens (OnClick). The modal's content is loaded remotely (modal body in another file). Within the remote link, I'm also delivering some data via GET. The data is different for each clickable div. Now if I click a div, the modal opens with the correct data. When I close that modal and try to open another one, the content displayed is still made with the data of the first clicked div.
What seems to be the issue here?
That's about what I'm trying to do (simplyfied):
<div id="1" OnClick="openModal('modal_content.php?name=Peter')"></div>
<div id="2" OnClick="openModal('modal_content.php?name=John')"></div>
"openModal" is a selfmade function which opens the modal with the remote content (url in brackets).
Now when I click on the first div, the modal should be
Hello Peter!
and the 2nd should be
Hello John!
First one clicked works fine. When I close that one and try to open the other, the content doesn't change.
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.