I'm loading a page using jQuery's .load() function. The page I'm loading links to an external javascript file. So i try to execute that by calling getScript().
This is the code for loading the page:
<script>
$j(document).ready(function() {
$j( "#scriptin" ).load("home.html");
$j("#index").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load("home.html");
});
$j("#artists").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load( "artists.html" );
$.getScript("pix.js");
});
$j("#concert").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load( "storminateacup.html" );
$.getScript("stormload.js");
});
});
Now when the concert link is clicked, as you can see in the code I load storminateacup.html and after that i call the external script stormload.js
This is stormload.js
$( "#scriptintwo" ).load( "latest.html" );
});
$("#artists").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "artists.html" );
});
$("#latest").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "latest.html" );
});
$("#videos").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "videos.html" );
This script doesn't seem to run. When i wrap it around a $document.ready() and open the link directly (i.e without using.load()) it works perfectly. But when i load it without document.ready nothing happens and when i load it with document.ready() only one of the clicks work.
Related
I trying to get a trigger working but this doesn't seem to work. Im 100% sure this is the right code to do the job.
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).trigger( "click" );
});
});
however is there another way to trigger an element click when a different element is clicked?
I don't see flaws in that code. It might be something else then (classnames are correct?)
You could try getting the click on another thread:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
setTimeout(function(){
$( ".attachment-large" ).trigger( "click" );
}, 10);
});
});
Or try another click method trigger:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).click();
});
});
Is there no error message provided in your console?
I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
I'm using infinite scroll and social share buttons after loading more results aren't appearing. I need to reload the script for the buttons to appear? I'm using the add to any plugin and they script is <script type="text/javascript" src="http://static.addtoany.com/menu/page.js"> </script> How do i reload this script so that the buttons appear? I added this code but only the facebook and twitter buttons appeared after ajax loaded new results not the google plus and pinterest...
jQuery('body').trigger( 'post-load');
How do i solve this?
You can use the .ajaxComplete(function().
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
See more here.
Or you can use the jQuery.GetScript()
$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
See more here.
$( document ).ajaxComplete(function() {
a2a.dom.ready(function(){a2a.init_all();a()});
});
or
$( document ).ajaxComplete(function() {
if(document.body){a2a.init();a()} a2a.dom.ready(function(){a2a.init_all();a()});
});
So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});
I'm using .load() and .show() to dynamically load some HTML.
//load the html
$('#mydiv').load('some_url');
// Display
$('#mydiv').show();
But here I need to call a JavaScript function that only exist in the dynamic content, how can I tell if the .load() is complete ?
Use the callback for .load:
$('#mydiv').load('some_url', function() {
// This gets executed when the content is loaded
$(this).show();
});
The load function get a callback function for complete
('#mydiv').load('some_url', function() {
alert( "Load completed." );
});
http://api.jquery.com/load/
$( "#mydiv" ).load( "url", function() {
alert( "Load was performed." );
});
reference load
$('#mydiv').load('some_url', function(responseText, textStatus, XMLHttpRequest){
console.log("Content Loaded!");
});
Look at this