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 ?
Related
I have a select.php page where the user selects a value from the dropdown. On selection the ajax code runs and information from ajax.php gets populated on the "display" div of the select.php page. Some of the information coming from ajax.php is in the form of textarea. But it gets displayed just as textarea, and not as tinymce editor. Even though I have called it in the head section of my page.
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea'
});
</script>
My problem is very similar to this: How do I initialize TinyMCE on a ajax loaded textarea in 4.x?
But I am not understanding the solution. Please help.
you can get data after that set data on tiny
success: function (data) {tinyMCE.get(data).getContent().replace('\'', "\’");},
Your call to tinymce.init() only acts on items in the DOM at the time the init() function is run. If you are adding additional <textarea> fields to the page later you need to run tinymce.init() after you add those elements to the DOM.
You can include a call to tinymce.init() in the same block of code that injects the <textarea> into the page directly after you inject the <textarea>.
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.
I'm using jquery mobile and I'm in dealing with a problem:
I have 2 html pages: index.html and page.html
//index.html
...
<script src="script.js"></script>
<body>
<div id='contents'></div>
</body>
...
//script.js
$(document).ready(function(){
$.ajax({
...
success:
$("#contents").html(content_to_display).trigger('create');
...
});
});
and another page that calls the previous
//page.html
...
<body>
Back
</body>
...
the problem is that when I click on the Back button (after refreshing the page.html), the page index.html is displayed correctly, except the that stays empty unless I manually refresh the page (F5 or Ctrl+R) displaying the content I want to be displayed.
how to load the index.html page without manually refreshing the page every time?
Refresh is your problem, this is a timeline of what have happened:
index.html is loaded
page is changed to page.html and its body content is loaded into index.html DOM but link is still domain/page.html
Because of full page refresh, page.html is reloaded without a HEAD content of index.html.
page is changed to index.html and its body content is loaded into page.html DOM WITHOUT its HEAD part and that is a reason why javascript is not triggered
This problem will be fixed if both index.html and page.html have identical HEAD content, mainly reference to the same custom js file. For more solution to this problem (with solution) take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE.
I think you are looking for something like:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
}
this runs before the user is navigated away from the current page.
this means you can force the user to navigate to your page which will refresh correctly.
Try this instead of the backbutton if you are just navigating back one page:
BACK
Or give this a shot:
$.mobile.changePage(href, {changeHash: false });
I've been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.
This is my site structure:
<div id=container>
<div id="header">
<!-- Header + Navigation Buttons, same throughout the site. -->
</div>
<div id="main">
<!-- content of each page, different on each page. -->
</div>
</div>
Also note that each navigation button leads to an index.php file on a different sub-directory, e.g www.mysite.com/contact, www.mysite.com/comments etc.
How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn't reload, however the #main content does?
I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you'll never see a blank white page while the page is loading - instead you'll always see the nav bar etc. and the #main content would fade in and out.
Previously, I used this:
<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>
But it didn't work (note I did write the correct subdirectory) and the whole page would reload as normal.
If you could help me out I'd greatly appreciate it!
Thanks in advance!
mlazim14
<script type="text/javascript">
$(document).ready(function() {
$('#main').load('/subdirectory/ #main');
});
</script>
That should work. Are you sure the address is correct? Maybe the whole page wasn't loaded yet either. Try this, then 'echo' the contents in the index.php file:
$(function() {
$('#main').load('/comments/index.php');
});
Code inside the above function is executed when the page is ready. See jQuery .ready().
I have a website with two pages. A and B. When you click on a link in page A, it will uses the Prototype Ajax.Updater() to load the link page (page B) into a div on the page (Page A).
When page B loads into page A, the sIFR replacements are not working and the tag inner text is not even showing.
I have tried doing a sIFR.redraw() when the page has loaded into the div, with no success.
When i view page B in the browser by itself, it works perfectly.
Is it possible to insert HTML into a DIV tag on a page using AJAX and have the sIFR display properly?
I would imagine that you probably need to re-initialise sIFR within the onComplete callback of Ajax.Updater
This is the way I ended up doing this
new Ajax.Updater('content', url, {
onComplete:function(){
sIFR.replace(font, {
selector: '#content h2'
});
}
});
You could put this snippet in your html code:
<script type="text/javascript">
function pageLoad(sender, args) {
sIFR.replace(font, { selector: '#content h2' });
}
</script>
It will run the sIFR replacements each time the page reloads. This is on normal PostBack and Ajax postbacks. Make sure you have included a ScriptManager instance on your page.
mathijsuitmegen:
Your solution worked perfectly on an application I'm using where the ScriptManager was already in use.
Infact, The function was simply slotted into my sifr-config.js file and worked perfectly meaning my HTML wasn't cluttered.