Does Select2 now have a prerequisite requirement for require.js or something as from the 4.0.0-rc.2 version from cdnjs.cloudfare.com I keep getting an error in select2.js on line 4582-
Uncaught ReferenceError: require is not defined.
My code is fairly straightforward:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Test Select2</title>
<link href="/css/normalize.css" rel="stylesheet">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css">
</head>
<body>
<!-- Main content -->
<section class="content">
<form method="POST" action="http://test.local/test" accept-charset="UTF-8" role="form">
<div class="form-group minimal">
<span class="col-xs-3 control-label minimal"><label for="Test">Test:</label></span>
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<input type="hidden"
id="test_select2"
class="input-xlarge form-control minimal select2"
data-placeholder="Search ACME"
data-minimumInputLength=3
data-width="copy"
data-containterCssClass="form-control minimal"
data-dropdownCssClass="alert-danger"
data-allowClear="true"
data-delay=250>
</div>
</div>
</section>
<!-- scripts -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery/2.1.3.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#test_select2").select2({
ajax: {
url: "/admin/test",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
}
});
});
</script>
<//body>
</html>
This is a known issue in Select2 4.0.0-rc.2 that only affects people using Select2 with an <input /> element.
https://github.com/select2/select2/pull/3192
The problem is that the internal require calls were moved to a namespace in 4.0.0-rc.2 and we missed one call.
You can either stick with 4.0.0-rc.1 until Select2 4.0.0 is released (soon) or start converting your pages to use a <select> instead.
Related
I installed LazyLoading jquery plugin and try to use it in my bootstrap mvc project. In examples that I saw, address of just one image is set to tag. I don't know how does it work.
How can I show all images by scrolling page. This is my Code.
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/scripts/js/modernizr.custom.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<!--Custom-Theme-files-->
<!--theme-style-->
<link href="~/Content/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/products.css" rel="stylesheet" type="text/css" media="all" />
<div class="LazyImage">
<div class="container">
<div>
<div class="col-md-9 ">
<div>
<div class="col-md-4 product-left p-left">
<div class="product-main simpleCart_shelfItem">
<img class="lazy" src="~/Content/images/grey.gif" data-original="../Content/images/LazyLoad/example.jpg" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
//threshold = 100,
//event = "sporty",
placeholder : "/Content/images/grey.gif",
event : "lazyload",
effect : "fadeIn",
effectspeed : 2000
});
});
$(window).bind("load", function () {
var timeout = setTimeout(function () {
$("img.lazy").trigger("lazyload")
}, 6000);
});
$(window).load(function () {
$("html,body").trigger("scroll");
});
</script>
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="reviewsPage">
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
});
});
</script>
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("mobileinit", function() {
});
$(document).bind('pageshow', '#twitterPage', function(event, ui) {
$(document).on('click', '[data-rel=back]', function() {
$.mobile.changePage('index.html');
});
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
Home
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
Here I have link when the link is clicked tweet.html file will be called. But when I clicked the back button I will be directed to the previous page without any error. But second time onwards when I click the back button I will be directed to the previous page and comes to the current page again.
$("#mybtn").unbind();`
unbind event will prevent this
I am using jquery mobile and html5.
when i redirect from one page to another page , getting a white screen (flickering).
So how to get out of this problem.
Here is my code..
--Page1--
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<link href="css/Global.css" rel="stylesheet" />
<script>
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
$("#login").unbind("click").click(function () {
Login();
});
});
/*********Page bind evnet --Ends--********/
var Type;
var Data;
var Url;
var DataType;
var ContentType;
var ProcessData;
var Method;
jQuery.support.cors = true
function Login() {
Type = "POST";
Url = "/login";
Data = '{}';
DataType = "JSON";
ContentType = "application/json; charset=UTF-8";
ProcessData = true;
CallLoginService();
}
function CallLoginService() {
$.ajax({
type: Type,
data: Data,
dataType: DataType,
processData: ProcessData,
url: Url,
contentType: ContentType,
crossDomain: true,
success: function (jsonObj) {
if (jsonObj.GetLoginResult[0].Status == "true") {
$(location).attr('href', 'City.html');
}
else if (jsonObj.GetLoginResult[0].Status == "Invalid username") {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
else {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
},
error: function (response) {
CheckNetwork();
}
});
</script>
</head>
<body>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<p style="color:#13a5db;"> Login</p>
</div>
<div data-role="content">
<div id="alertcontainer1" >
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" id="login" data-theme="b">Login</a>
<a data-role="button" href="Registration.html" data-transition="slide" data-theme="b">Register</a>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<p> CopyRight ® 2013</p>
</div>
</div>
</body>
</html>
page2--(city.html) second page
<html>
<head>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
//code
});
/*********Page bind evnet --Ends--********/
</head>
<body>
//code
</body>
</html>
I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><div><img src="img/home-icon-white.png" /></div>Home</li>
<li class="where"><div><img src="img/where-icon-gray.png" /></div>Where</li>
<li class="series"><div><img src="img/watch-icon-gray.png" /></div>Series</li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>
I am working on creating a html page with three tabs, each one of which pulls data from three different html pages through jquery ajax. I am passing 2 parameters , method and mode ( to set read only or edit for all the html elements in the page ) while calling the ajax function.
The problem I have is, when i set the parameters with method=somemethod&mode=ro, the first renders the proper method and in readonly mode, whereas the second tab's html is rendered in edit mode. I debugged the page using firebug but couldnot find the actual problem. All the three tab htmls are all the similar, so i have no idea why this is happening. I have attached the code. Kindly help.
Main html/php page.
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<html>
<head>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<link type="text/css" href="./methodeditor.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function loadtabs() {
$( ".tabs" ).tabs({cache:false});
//$( ".tabs" ).tabs();
method = "<? echo $method; ?>";
mode = "<? echo $mode; ?>";
$.ajax({
type: "GET",
url: "oven.php",
data: "method=" +method+"&mode="+mode,
cache: false,
async: true,
success: function(data){
htdata = data;
$("#oven").html(data);
},
});
$.ajax({
type: "GET",
url: "detectors.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data1){
htdata = data1;
$("#detectors").html(data1);
},
});
$.ajax({
type: "GET",
url: "inlets.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data){
$("#inlets").html(data);
},
});
}
</script>
</head>
<body>
<form id="editor" action="method.php" method="POST" >
<div class="editor">
<div class="tabs">
<ul>
<li>Oven</li>
<li>Detectors</li>
<li>Inlets</li>
</ul>
<div id="oven" ></div>
<div id="detectors" ></div>
<div id="inlets"> </div>
</div>
<script>
loadtabs();
</script>
</form>
</div>
</body>
</html>
tab1 php
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Oven</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
//file = window.method;
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
etimenode = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[1];
etime = etimenode.textContent;
document.getElementById("etime").value = etime;
maxovtp = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[5].childNodes[0].data;
document.getElementById("maxovtp").value = maxovtp;
}
</script>
</head>
<body>
<div id="elements">
<input type="checkbox" id="oventemp" value="ON" />Oven Temperature<br />
Equilibrium time <input type="text" id="etime" /><br />
Maximum Oven Temperature <input type="text" id="maxovtp" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
tab2 php/html page
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Detectors</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
heater = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[1].childNodes[0].data;
document.getElementById("heater").value = heater;
h2flow = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[3].childNodes[0].data;
document.getElementById("h2flow").value = h2flow;
}
</script>
</head>
<body>
<div id="elements">
Heater Status <input type="checkbox" id="heaterstat" value="ON" /><br />
Heater <input type="text" id="heater" /><br />
H2 Flow <input type="text" id="h2flow" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
I figured out the solution by chance.
Both the tabs had elements wrapped under the same div called . So when toggle status was called , only the first div with id "element" was getting changed. I gave different names to the divs and solved the problem.