Bootstrap carousel slide is not working in ajax success call. Ajax call is completed without any issue but $("#myCarousel").carousel(); is not working & the next slide is not shown.
<head>
....
<link rel="stylesheet" href="resources/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/bootstrap-theme.min.css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myId').click(function(event) {
$.ajax({
url: $("#myId").attr( "action"),
type: 'GET',
dataType: 'json',
contentType : 'application/json',
success: function(data) {
$("#myCarousel").carousel();
}
});
event.preventDefault();
});
});
</script>
</head>
<body>
.....
<div class="container">
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<div class="carousel-inner">
<div class="active item">
...
<button id="myId" action="${pageContext.request.contextPath}/create" type="submit" class="btn btn-primary">Login</button>
</div>
<div class="item">
<h2>Slide 2</h2>
....
</div>
</div>
</div>
</div>
</body>
</html>
The proper syntax to move to the next slide is $('#myCarousel').carousel('next');
Related
I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>
I have downloaded a JQuery-plugin for a searchable drop down list. Here is the source
I fill the list using D3.js. It works well for few elements, but when I want to load all elements (around 1200) the design is crashed and the list is displayed in the top so that I can't see the items and there is no scroll-bar.
Here how it looks like when I load the whole elements:
Here we can see from the developer tool in the browser that the data is loaded correctly:
The console shows these violations:
Here is my D3.js code:
d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
if (error) throw error;
d3.select("#my-select").selectAll(".option")
.data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
.enter().append("option")
.text(function (d) { return d; })
.attr("value", function (d) { return d; });
});
Html script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Crypto Trading Project</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sol.css">
</head>
<body>
<header>
<div class="collapse bg-light" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-6 py-4">
<select id="my-select" name="Cryptos" multiple="multiple"></select>
</div>
<div class="col-sm-6 py-4">
From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
</div>
<div class="col-sm-3 py-4">
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Cryptos VA
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/date-time-picker.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sol.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/loadsol.js"></script>
<script type="text/javascript">
$(function() {
// initialize sol
$('#my-select').searchableOptionList({
showSelectAll: true
});
//dateTimePicker
$('#J-demo-04').dateTimePicker({
limitMax: $('#J-demo-05')
});
$('#J-demo-05').dateTimePicker({
limitMin: $('#J-demo-04')
});
});
</script>
</body>
</html>
How can I have it work?
I could finally figure it out. The idea is simply to fix the height of the active container and add a scroll bar. So I add in the sol.css file to the .sol-container.sol-active .sol-selection-container class these two css attributes:
height: 300px;
overflow-y: auto;
I am new to AJAX/Jquery, what is the best way to put a loading img while the page is is still on load ?
here is my code:
<div class="container">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-info btn-lg">Load More Page...</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#box").load("page2.php");
});
});
</script>
Please check below link
There is example
How can I create a "Please Wait, Loading..." animation using jQuery?
You can simply use ajax- methods like ajaxStart, ajaxStop
Javascript code:
$(document).ready(function(){
$(document).ajaxStop(function(){
$('#loadingIndicator').hide(500);
});
$( document ).ajaxStart(function() {
$('#loadingIndicator').show();
});
}
HTML code:
<div id="loadingIndicator" style="display:none;z-index:100;">
<img src="loading-big.gif" alt="" />
</div>
I am using phonegap and jquery mobile to build a web app, django on the server side. First, i start out from index.html page,and inject a login form from server into index.html and change page to the jquery mobile page containing the sign in form. But the problem is that the form is getting submitted but not in ajax, but if i test it in web browser,it works. I have already white listed the domain name in config.xml file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div class="app" style="display:none;">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div data-role="header">
<h1>DOCTORSLOG</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
$(function(){
$.ajax({
url: 'http://doctorslog.net/mobile/login-test/',
success: function(data){
//append the response(sign-in.html) to the body
$('body').append(data);
}
});
});
</script>
</body>
</html>
sign-in.html
<div data-role="page" data-fullscreen="true" id="login">
<div data-role="header" data-theme="b">
<h1 id="title">DOCTORSLOG</h1>
</div>
<div data-role="content">
<form id="sign_in_form" method="post" action="http://doctorslog.net/mobile/login/">{% csrf_token %}
<div data-role="fieldcontain">
<label for="id_username" style="font-size: 1.3em;line-height: 350%;">Username</label>
<input id="id_username" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="text" maxlength="30" name="username" autocomplete="off">
</div>
<div data-role="fieldcontain">
<label for="id_password" style="font-size: 1.3em;line-height: 350%;">Password</label>
<input id="id_password" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="password" name="password">
</div>
<div style="width: 100%;text-align: center;font-size: 1.6em;">
<input id="sign-in-btn" type="submit" data-inline="true" value="Sign me in" />
</div>
<input type="hidden" name="next" value="{% firstof next '/home/' %}"/>
<input id="hiddenID" type="hidden" name="regID" value=""/>
</form>
</div>
<script>
$(function(){
//change active page to this page and since it is a jquery mobile page with data-role=page,i expect automatic ajax submission on clicking submit button
$(':mobile-pagecontainer').pagecontainer('change','#login');
$('#sign_in_form').trigger('create');
});
</script>
</div>
The question is, if i can make Ajax GET request,why can not i make POST request. Any help is appreciated. Thanks.
Ok, i have solved this issue by disabling jquery mobile default form hijacking by setting data-ajax="false" on the form tag and submitting the form by $.ajax . Nothing like $.mobile.allowCrossDomainPages worked. And i also have set Access-Control-Allow-Origin response headers on the server side , really did not know if this is required.
Here is the script to submitform -
$(function(){
$('#sign_in_form').submit(function(e){
e.preventDefault();
$.mobile.loading('show');
var url = $(this).attr('action');
var data = $(this).serializeArray();
$.ajax({
beforeSend:function(jqXHR,settings){
jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
url:url,
type:'POST',
data:data,
crossDomain:false,
success: function(data){
$.mobile.loading('hide');
$('body').append(data);
}
});
});
});
I want to catch the event if a specific jQuery mobile page changes. For example, I used the code which I indicated below:
$(document).on("pagechange", function () {
alert("page changed");
});
But, how can I make this function run only for a specific page, for example: the page which has id="myPage"? I want to make it give alert only when myPage is changed.
(* I use multiple page structure in jquery mobile)
I think you could register events on page instead of document:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>Page 1</p>
<div data-role="navbar">
<ul>
<li><a href="#pagetwo" >TWO</a></li>
<li>ONE</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<p>Page 2</p>
<div data-role="navbar">
<ul>
<li>TWO</li>
<li><a href="#pageone" >ONE</a></li>
</ul>
</div>
</div>
</div>
<script>
$("#pageone").on("pageshow", function() {
alert("cambio a pagina 1");
});
$("#pagetwo").on("pageshow", function() {
alert("cambio a pagina 2");
});
</script>
</body>
</html>
If you prefer pagechange event, you could get the page URL:
$(document).on("pagechange", function(toPage) {
alert(toPage.currentTarget.URL);
});
$(document).on('pagechange', '#myPage', function (event) {
alert("I alert only on #myPage");
});