I used AJAX quite a lot. Take the following code as an example, it sometimes fails updating the designated content div. Instead, the whole page is update. It's odd that sometimes it's OK, but other times it's not. The problem seems to occur randomly, and it is very annoying. Can somebody shed some light on it? Thanks.
<div id="content"></div>
...
<a href="/admin?arg1=systemSetting" class="adminMenu">
<button class="adminButton">System settings</button>
</a>
<script>
$(document).ready(function() {
$('a.adminMenu').click(function() {
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
});
</script>
Related
I spotted a post ( Jquery click function only fires once ) from someone experiencing a similar issue but I haven't been clever enough to ascertain whether or not the fix that was discovered can be applied to my problem; so I'm hoping that someone might be able to provide some more specific help?
I am having no joy whatsoever in trying to get the goto page stuff to fire more than once. I have the following in the head...
<script type="text/javascript">
$(function() {
var mybook = $('#mybook').booklet();
var hash = $(".selector").booklet( "option", "hash" );
$(".selector").booklet( "option", "hash", true );
$(function() {
$('#mybook').booklet({
closed: true,
autoCenter: true
});
});
});
</script>
Then for Page 6 I have…
<div style="text-align: center" title="sixth page">
<h3>Go to page 3</h3>
</div>
Clicking on the link works the first time around but never again thereafter. If anyone can offer any insights or steer me in the right direction I'll be eternally grateful.
I'm relatively inexperienced; so do please let me know if I haven't given enough detail, here. Many thanks :) x
Hope this could help:
This is the Javascript:
$(function() {
$('#mybook').booklet({
closed: true,
});
$('#goto-page').click(function(e){
e.preventDefault();
$('#mybook').booklet("gotopage", "02");
return false;
});});
Change the number 02 to your desire page.
Here the html:
<div id="goto-page">
<h3>Jump to Page 2</h3>
</div>
I'd like to use bootstrap's carousel to dynamically scroll through content (for example, search results). So, I don't know how many pages of content there will be, and I don't want to fetch a subsequent page unless the user clicks on the next button.
I looked at this question: Carousel with dynamic content, but I don't think the answer applies because it appears to suggest loading all content (images in that case) from a DB server side and returns everything as static content.
My best guess is to intercept the click event on the button press, make the ajax call for the next page of search results, dynamically update the page when the ajax call returns, then generate a slide event for the carousel. But none of this is really discussed or documented on the bootstrap pages. Any ideas welcome.
If you (or anyone else) is still looking for a solution on this, I will share the solution I discovered for loading content via AJAX into the Bootstrap Carousel..
The solution turned out to be a little tricky since there is no way to easily determine the current slide of the carousel. With some data attributes I was able to handle the .slid event (as you suggested) and then load content from another url using jQuery $.load()..
$('#myCarousel').carousel({
interval:false // remove interval for manual sliding
});
// when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
var url = $('.item.active').data('url');
// ajax load from data-url
$('.item').html("wait...");
$('.item').load(url,function(result){
$('#myCarousel').carousel(idx);
});
});
// load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){
$('#myCarousel').carousel(0);
});
Demo on Bootply
I combined #Zim's answer with Bootstrap 4. I hope it will help someone.
First, load just the path of the images:
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" data-url="/image/1.png"></div>
<div class="carousel-item" data-url="/image/2.png"></div>
<div class="carousel-item" data-url="/image/3.png"></div>
</div>
</div>
Then in JavaScript:
$('document').ready(function () {
const loadCarouselImage = function ($el) {
let url = $el.data('url');
$el.html(function () {
let $img = $('<img />', {
'src': url
});
$img.addClass('d-block w-100');
return $img;
});
);
const init = function () {
let $firstCarousel = $('#carousel .carousel-item:first');
loadCarouselImage($firstCarousel);
$firstCarousel.addClass('active');
$('#productsCarousel').carousel({
interval: 5000
});
};
$('#carousel').on('slid.bs.carousel', function () {
loadCarouselImage($('#carousel .carousel-item.active'));
});
init();
});
EDIT italics = more detailed explanation added to the question. Thanks.
I'm building a jQuery Mobile site which has a Gallery section.
The gallery has a series of thumbnails on the top of the screen.
Users click on the thumbnail to load in new content, that being a larger image, text, and potentially audio on some of them.
It's at this point that I'm not sure what to do: the way jQuery Mobile works, it's geared towards loading new pages, or views. But I just want to inject new content in a container on the current page.
To be clear, when the user clicks on another thumbnail, a new image replaces the content of the container with new content.
I have two questions:
I'm not sure how to structure the dynamic content. I was thinking i'd create an html file for each item, which as a rule always contains a title, information and sometimes, audio.
I'm not sure how to script this functionality in jQuery Mobile. It's obviously Ajax, but I'm not familiar with it yet, especially since jQuery Mobile has it's own methods in place already which seems to redefine behaviors in a way that's contradictory to this approach described here.
Here is a code explanation of what i'm trying to do:
<!-- Galleries -->
<div data-role="page" id="galleries">
<div data-role="content" role="main">
This is the Selection UI, if i click on thumb2.jpg, it'd
fill #content-holder with the whatever html is in content2.php
<div id="thumb-carousel">
<img src="thumb1.jpg">
<img src="thumb2.jpg">
<img src="thumb3.jpg">
<img src="thumb4.jpg">
<img src="thumb5.jpg">
<img src="thumb6.jpg">
<img src="thumb7.jpg">
<img src="thumb8.jpg">
<img src="thumb9.jpg">
</div>
<!-- This is the container, currently it's filled
with the kinda stuff i need to put in it. -->
<div id="content-holder">
<img src="myimage1.jpg"/>
<p>Artwork Title</p>
<p>Caption</p>
<audio>//mp3</audio>
</div>
</div>
</div>
//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {
//bind a `click` event handler to each thumbnail link
$('#thumb-carousel').children().bind('click', function () {
$.ajax({
url : $(this).attr('href'),
success : function (serverResponse) {
//select the container,
//then fade it out,
//change it's HTML to the response from the AJAX request,
//and fade it back in
$('#content-holder').fadeOut(500, function () {
$(this).html(serverResponse).fadeIn(500);
});
},
error : function (jqXHR, textStatus, errorThrown) {
//remember to handle errors so your page doesn't seem broken to the user
}
});
//prevent the default behavior of the link, which is to navigate to the `href` attribute
return false;
});
});
This expects your server-response to be valid HTML markup that is ready to inject into the DOM, meaning no <html> or <body> tags, just what you want to add to the DOM:
<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>
Here are some docs for ya:
$.ajax(): http://api.jquery.com/jquery.ajax
.closest(): http://api.jquery.com/closest
.fadeIn(): http://api.jquery.com/fadein
I'm experiencing some strange behaviour with checkboxes on a Dojo page. In the code below I have created a search form which makes an Ajax/xhrGet request when the search text is changed - this all works as expected.
However I also have a checkbox on the same page which, when clicked, is also submitting an Ajax request. Since I have not connected the checkbox to the search I have no idea why this is happening.
Is this a bug or is there something more subtle going on here?
Any ideas/suggestions?
TIA,
BrendanC
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.Tooltip");
</script>
<div dojoType="dijit.layout.ContentPane" splitter="false" region="trailing"
style="width: 200px;">
<script type="text/javascript"> var srch = dojo.byId ("djsearch"); dojo.connect(srch, "onchange", "getbyname"); </script>
Search
<input dojoType="dijit.form.TextBox" name="dojosearch" value="Find"
trim="true" id="djsearch" propercase="true" style="width: 6em">
<p></p>
Tag Summary
<div id='tagsummary'></div>
</div>
I found the cause of my problem. Hopefully this will help someone else in the future.
Basically I did not issue the dojo.connect correctly - this needs to be done inside the 'addOnLoad' handler. In my initial code I was issuing the connect request on the page, but not in the required addOnLoad handler. The following code works correctly.
Hopefully this will help someone else in the future.
<script>
// Add the dojo.connect below
dojo.addOnLoad(function() {
// Connection s/b in 'addOnLoad' to work correctly
var srch = dojo.byId ("djsearch");
dojo.connect(srch, "onchange", "getbyname");
});
</script>
My html document looks like this:
<html>
<head> .. load jquery and other stuff </head>
<body>
<div id="cool_container">
<div class="cool">.. no script friendly markup ..</div>
</div>
<a id="cool_link">Link</a>
<script>
function installStuff(){
$('.cool').coolPlugin();
$('#cool_link').click(function(){
$('#cool_container').load('/anothercooldiv.html');
});
}
$(document).load(function(){ installStuff(); });
</script>
</body>
</html>
Of course, /anothercooldiv.html gives another <div class="cool"> .. etc ...</div> fragment.
So what's the best way to turn the fresh cool div into a coolPlugin without breaking everything (and writing some nasty hacks) ?
It'd would be great to be able to either:
Call installStuff with a default jQuery context '#cool_container', so I could call something like:
$.doThisInContext(function(){installStuff();}, $('#cool_container');
In the load callback.
Or, have an equivalent of 'live' (that would solve the problem of links if cool contains links), but on an element existence, that I could use like that in my function installStuff:
$('.cool').exists(function(what){ what.coolPlugin() };
Then the coolPlugin would be installed on all cool elements now and in the future.
I'd suggest the .livequery() plugin for this still:
$(function() {
$('.cool').livequery(function() {
$(this).coolPlugin();
});
$('#cool_link').click(function(){
$('#cool_container').load('/anothercooldiv.html');
});
});
The important bit:
$('.cool').livequery(function() {
$(this).coolPlugin();
});
Will run for every current and future .cool element as they're added, running the plugin on each.
Applying the plugin to the newly ajax loaded content shouldn't be too tricky:
$('#cool_container').load('/anothercooldiv.html', function() {
$(this).coolPlugin();
});