This code is listed on the header of all of my webpages. When I click a link on my website, I'm unable to use the buttons on the page until after I refresh. How can I fix this?
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.faqElement').click(function() {
var faqElement = $(this);
var question = faqElement.find('.faqQuestion');
var answer = faqElement.find('.faqAnswer');
if (!answer.hasClass('activeFaqAnswer')) {
$('.faqElement').removeClass('flipButton');
faqElement.addClass('flipButton');
$('.activeFaqAnswer').css('max-height', '');
$('.faqAnswer').removeClass('activeFaqAnswer');
answer.css('max-height', 'none');
answer.css('max-height', answer.height());
answer.addClass('activeFaqAnswer');
}
});
});
</script>
This sounds like a conflict with your custom script and Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
So, depending on your template, you may find that disabling AJAX is a simple solution:
You can disable Ajax in the Style Editor, with some exceptions:
Ajax can't be disabled in Skye, Foundry, or Tudor.
Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they
will still use Ajax to load the Blog Page.
To enable or disable Ajax:
In the Home Menu, click Design, and then click Style Editor.
Scroll down to Site: Loading.
Check or uncheck Enable Ajax Loading.
If you do not want to disable AJAX altogether, then see "Option 2" in this answer for ways to write your code so that it will work on initial page load and on AJAX page loads.
It seems Ajax loads content dynamically and ruins your bindings.
You could call your function after each Ajax request using $.ajaxComplete()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
function faqElementClick() {
$('.faqElement').click(function() {
var faqElement = $(this);
var question = faqElement.find('.faqQuestion');
var answer = faqElement.find('.faqAnswer');
if (!answer.hasClass('activeFaqAnswer')) {
$('.faqElement').removeClass('flipButton');
faqElement.addClass('flipButton');
$('.activeFaqAnswer').css('max-height', '');
$('.faqAnswer').removeClass('activeFaqAnswer');
answer.css('max-height', 'none');
answer.css('max-height', answer.height());
answer.addClass('activeFaqAnswer');
}
});
};
$(document).ready(faqElementClick);
$(document).ajaxComplete(faqElementClick);
</script>
Related
My menu links uses a jQuery script to load various HTML scripts into a div on an index.php page. Menu item 'Info' puts in sectionInfo.html into the index.php page. This script contains a short form and can bring up an alert() to the user if they misuse the form. But when the alert is accepted the page reloads to the default index.php and then the user has to select Info from the menu again to return to where the form is. How can I re-load the correct div again from the alert?
jQuery script for the menu links:
$('.trigger').click(function(){
var url = $(this).attr('href');
$('#target').load(url)
The menu link:
<ul>
<li>
Info
</li>
</ul>
The Alert:
function validateMyForm1() {
alert("Alert goes here ");
window.location = 'href="sectionInfo.html" class="trigger"';
}
The div in the body of the index.php
<div id="target"></div>
I have checked other posts and tried various alternatives. Please help and if you down click me please tell me why as I have been down clicked often and don't know why. Thank you.
https://codereview.stackexchange.com/questions/64192/loading-div-sections-from-separate-files
calling jquery from a javascript function
Go to URL after OK button in alert is pressed
The jQuery script is part of longer script which I include in this edit: The lower part of which slide down text the html files.
$('.trigger').click(function(){
var url = $(this).attr('href');
$('#target').load(url, function() {
$('#faqs h1').each(function() {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
return false;
});
A couple of issues in your JS, in your first example you need to call preventDefault() on the event to stop the link being followed:
$('.trigger').click(function(e) {
e.preventDefault();
$('#target').load($(this).attr('href'))
});
In the second code sample your string location is entirely wrong, you just need to set the URL to go to as a string. Personally I prefer to do this using the assign() method, like this:
function validateMyForm1() {
alert("Alert goes here");
window.location.assign('sectionInfo.html');
}
Im using javascript - ajax and jquery to load all contents from php files which is under (#menu a)[see below 'you.php'] without refreshing the page when navigating across the page - which works perfectly.
However, how do I create a hyperlink of somesort on content-A (which loads and shows all the contents from home.php) when clicked, it relocates & shows the user to/the contents of settings.php(B).
Please note my href hyperlinks doesn't have .php at the end. The 'general.js' file explains why.
(you.php):
<div id="menu">
Home
Settings // Content (A)
</div>
<div id="content"><div>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/general.js"></script>
(general.js):
$(document).ready(function() {
// initial content that will be loaded first upon logging in:
$('#content').load('home.php');
// handle menu clicks
$('#menu a').click(function(){
var page = $(this).attr('href');
$('#content').load('' + page + '.php');
return false;
});
});
(home.php):
<h1> welcome to homepage </h1>
Would you like to go to your settings?
Click here: <a href="settings.php>Settings</a>
Obviously the problem with doing the href hyperlink like this in home.php, is that it goes directly to the settings.php page. Which makes my general.js (ajax) and jquery file pointless.
Since the whole point of using ajax and jquery is for smooth navigation and no page refresh upon navigating around the website.
and No, I do not want to load the contents of settings.php within the contents of home.php, 'loadception' is not what I'm looking for.
This is my simple question, I would like a simple answer in php,javascript,ajax.
Any ideas?
You need to use event delegation. To better performance in my example, all links that must be loaded into "#content" have a class "open" so, in jquery you could do some like this:
$('#content').on('click', '.open', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load('' + page + '.php'); // concat .php if it's only necessary
});
Updated
I created a demo on github: https://github.com/josemato/stackoverflow/tree/master/spa-event-delegation
I am developing a mobile solution with a combination of jQuery.mobile and
asp.net webforms.
For postbacks of my asp.net controls to work properly I have to disable ajax at
the top of the page, like this:
<script>
$.mobile.ajaxEnabled = false;
</script>
But when ajax is disabled like this, other functions doesn't seem to work.
I can't call dialogs/popups from jQuery document ready
For example:
$(document).ready(function () {
$('#myPopup').popup('open');
});
This will just cause the popup to show in less than a second,
then it dissapears. Also when I register a clientscript
from codebehind to trigger the popup when a serverside button
is clicked, the popup just flashes, then dissapears.
But when I disable ajax at the top of the page, the popup
calls works fine.
Any ideas how to get around these issues?
Document ready can not be successfully used with jQuery Mobile. It will usually trigger before page DOM is populated.
Instead of this line:
$(document).ready(function () {
$('#myPopup').popup('open');
});
Use this line:
$(document).on('pagebeforeshow', '#page-id', function(){
$('#myPopup').popup('open');
});
Where #page-id is an id of page that contains that popup.
jQuery Mobile has a problem with document ready so its developers have created page evenets to remedy this problem, read more about it in this ARTICLE or find it HERE.
EDIT :
I think your problem is also in $.mobile.ajaxEnabled = false; handling.
That code sample MUST be triggered from mobileinit event like this:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
One more thing, mobileinit event MUST be triggered before jQuery Mobile is initialized, like this:
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
I DID IT.....
DO NOT USE
instructions described here
simply open jquery.mobile-1.3.1.min.js file
fine ajaxEnabled:!0 and change it to : ajaxEnabled:!1
now hit CTRL+F5 and joy the project while it continues ! ;)
I am writing an app that has an audio player at the footer. each Time i click on a link whole page itself loads thus the audio player is being restarted, my question How would you reload the whole page except a certain div?
I believe that is not possible. Maybe change your approach. Reload only specific areas you want to refresh. In fact, these areas may be included in a single (and possibly big) div tag. Then you can just update that div using jQuery ajax. For that, load is the way to go:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
Edit:
Here is a more specific example using links (just wrote it off of my head):
<script type="text/javascript">
$(function(){
$("#myLink").click(function(event){
$("#updateThisDiv").load($this.attr('href'), function(){
alert('div updated!');
});
return false; // or event.preventDefault();
});
});
</script>
And your link would look like this:
<a href='pathTo/Page' id='myLink'>Link text</a>
...
<div id="updateThisDiv"></div>
So you are using jQuery ajax. Even you reload whole div by ajax, the audio object remains same. So you can again generate your audio progress with the help of the object.
EDIT:
Just suggestion if you are reloading your page.
First save the currentTime of your audio object on your session or even database using ajax. And when user load that audio, start with that currentTime.
you can do this something like this:
yourAudioObject.addEventListener(
'timeupdate',
function() {
$.ajax ({
type:'get',
url:'your/path/?currenttime='+yourAudioObject.currentTime,
......
I'm trying to replace all the HTML (including the HTML tags) with another page. What I'm trying to do is having a website acting as an app even when navigating the another page.
Here is the code :
(function($) {
Drupal.behaviors.loadingPage = {
attach: function(context,settings) {
$('a').click(function(event) {
event.preventDefault();
// Create the loading icon
// ...
$.ajax({
url: $(this).attr('href'),
success: function(data) {
$('html').replaceWith(data);
}
});
});
}
};
})(jQuery);
I've tried several things. replaceWith() causes a jQuery error in jquery.js after deleting the HTML tag, I guess it is because it can't find the parent anymore to add the replacement.
The best result I got was with document.write(data). The problem is, the javascript code on the loaded page is not executed.
Anyone got a better idea ?
A better idea? Yeah, just load the new page normally by setting window.location instead of using AJAX. Or submit a form.
Otherwise, if you want to load something to replace all of the visible content of the current page but keep the current page's script going, put all the visible content in a frame sized to fill the browser window - which, again, you wouldn't populate using AJAX.
(I like AJAX, but I don't see why you'd use it to replace a whole page.)