I'm using Foundation 5 & WordPress.
I am trying to launch a second Reveal Modal from an AJAX loaded Reveal Modal. It's not working for me.
I have two divs at the bottom of my page:
<div id="industryModal" class="reveal-modal" data-reveal></div>
<div id="portfolioModal" class="reveal-modal" data-reveal></div>
I launch the first modal with content from another page (so far so good):
<a id="business-services-link" href="/approach/investment-strategy/industry/business-services" data-reveal-id="industryModal" data-reveal-ajax="true">
First Reveal Modal works correctly. I then try to launch a second modal (from the first AJAX loaded content):
<a href="<?php the_permalink(); ?>" data-reveal-id="portfolioModal" data-reveal-ajax="true">
Now I am simply taken to the new page. The content is not loaded into a second modal. I've tried adding the #portfolioModal div on the original page, and on the page loaded into the first modal. In neither case is the third page loaded into the second modal.
Any idea what I'm doing wrong?
You need to call the second modal using javascript on ajax returned modal page.
Try this:
Add the second modal wrapper somewhere in your document first (you cannot reuse the currently opened modal):
<div id="modal-anotherPage" class="reveal-modal auto_width medium" data-reveal></div>
Then set event handler for links inside your current modal:
$('a.linksinsideyourmodal').click(function(e) {
$('#modal-anotherPage').foundation('reveal', 'open', {
url: $(this).attr('href')
});
return false;
});
Note that this only works with foundation version 5.2.0, the one before it somehow doesn't want to return ajax content on second modal.
Your problem might be that
<?php the_permalink(); ?>
returns an address with "http://".
Reveal wont use that address correctly. Reveal will only use ajax with relative URLs, not absolute ones, and it will only work when referencing files on the same server.
Related
I am a new front end developer and I am having problem doing my project. I used modal in a modal and it works. My first modal is a long modal which needs to be scrolled to see the entire content.
<a data-toggle="modal" data-target="#modalmessage1"><button class="btn btn-gold tdc-width-100 tdc-mt-10" ><img class="img-button-icon" src="<?php echo base_url();?>img/email-white.png">SEND MESSAGE</button></a>
The problem is: When the second modal is closed. the scroll refers to the body. I can not scroll the first modal to see the whole content.
Question: How can I enable the scroll of the first modal after closing the second modal?
When dealing with bootstrap stacked modal, most common problems are
2nd modal overlay appearing behind first modal
on closing 2nd modal, scrolling disappear because modal-open removed from <body>
both problems can be solved with custom code as suggested by bootstrap
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
$(document).ready(function () {
$('secondmodalselector').on('show.bs.modal', function () {
$('firstmodalselector').css('z-index', 1039); //this will push the first modal overlay behind second modal overlay
});
$('secondmodalselector').on('hidden.bs.modal', function () {
$('firstmodalselector').css('z-index', 1041); //bring back the first modal overlay to it's normal state when 2nd modal closed
$('body').addClass('modal-open'); // add `modal-open` class back to body when 2nd modal close so first modal will be scrollable
});
});
I am trying to use single page mobile site. Basically I have a listview inside container and click event for list class.
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true">
<li class="listbtn">
</li>
</ul><!-- /listview -->
</div><!-- /content -->
I have a script for firing "listbtn" click event
$(".listbrn").click(function(){
});
this is working fine when page loads for first time
On another event, I am pulling data and replacing the whole "listview" with new items.
After DOM manipulation is successful, I have used
$('.ui-page-active .ui-listview').listview('refresh');
$.mobile.activePage.trigger('create');
as suggested on other threads.
Up to this point everything is smooth, page refreshes with new items and CSS applied nicely as expected.
Only problem is "listbtn" click event is not firing after that.
While looking for answers, I found this thread and tried to use live as suggested but after changing to live page won't load at all. Loading gif images spins forever.
Any suggestion or ideas?
jQuery 2.0
jQM 1.4.2
Thanks
You need to delegate event to dynamically added elements.
Another note, you don't need $.mobile.activePage.trigger('create');, .listview("refresh") is enough to re-enhance list-view. Not to mention that both $.mobile.activePage as well as .trigger('create') are deprecated and will be removed on jQM 1.5.
$(document).on("click", ".listbtn", function () {
/* code */
});
Demo
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".
We have done a site, that loads content into a div, using ajax. My question is, within that ajax page, can I initiate a new page to load onclick in the existing pages place.
So as it stands on my index page I have:
<section id="mycontent">
</section>
Onclick of a element my content gets loaded into the above section. Like so:
<span class="link_wrap" data-link="prices"><span class="link_title">Our Prices</span</span>
So on click of the above, our js pulls in the relevant page: prices.php
In the JS I have:
case 'prices' :
myFunctionAjax('prices.php', function () {
_self._focustitle();
});
break;
So what I would like to do is, in say the prices.php page have a link to say deals.php
That onclick, similar to above, loads IN PLACE of prices.php content the new content from deals.php.
Any suggestions ?
I'm using the Jquery UI tabs functionality to load content via ajax. I'd like to load a particular div in the ajax call, not the entire page. Is this possible without using jQuery's load()?
As you can see from the code, it's a stock standard basic jQuery tabs implementation, but I want a particular div rather than the full page.
Here's my html:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Ajax tab</li>
</ul>
<div id="tab-1>Tab one content</div>
<div id="tab-2>Tab two content</div>
</div>
And the inline script:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Anyone know if this is possible?
Nathan.
Yes, it is possible. Use jQuery ajax "load" function. Example:
$('#result').load('ajax/test.html #container');
For your 3rd tab you should manually load content via ajax call, also you can define selector which exactly part of loaded page you need. So, create 3rd tab as via general way, load page content for 3rd tab and create tabs. Or you can dynamically load 3rd tab's content when the user clicks on tab.
More information here: http://api.jquery.com/load/, please see paragraph "Loading Page Fragments".