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>
Related
I am trying to use Xtext (2.14.0) together with the Orion web editor, but even with a simple example the Content Assist is not triggered by CTRL+SPACE inside the Orion editor.
From what I know, CTRL+SPACE is used by default to trigger the Content Assist inside the Orion editor.
I also want to mention that if I add a character to the "contentAssistCharTriggers" option (as described in the Xtext documentation), than the specified character triggers the Content Assist, but CTRL+SPACE still doesn't work.
Does anyone know what could be the problem?
Update:
I am using the basic xtext state machine example.
Below is the html file used to embed the Orion Editor:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="dependencies/orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["dependencies/orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mylang-syntax",
contentAssistCharTriggers: " "
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Demo</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mylang"></div>
</div>
</div>
</body>
</html>
here is the index html that works fine for me (content assist with crtl+space)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mydsl-syntax"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example MyDsl Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mydsl">
</div>
</div>
</div>
</body>
</html>
and here is how your stuff looks like
Updating requirejs to 2.3.6 and jquery to 3.3.1-1 make codeEdit with you version work.
We updated everything in Xtext 2.17 that will come in spring 2019.
I am using the below code to display menu in a native popup form, when user clicks on menu icon on header part, but it simply the shows a blank page with a loader. Please anyone see what is the wrong in the below code
<!DOCTYPE HTML>
<html>
<head>
<title>IRetail</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Toast-Plugin.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ScanditSDK.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.3.2.min.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0rc1.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript">
/*function success(result) {
var barcode = result[0];
//var symbology = result[1];
document.getElementById("product_id").value = barcode;
$('#product_id').keyup();
}
function failure(error) {
alert("Failed: " + error);
}
function scanBarcode() {
cordova.exec(success, failure, "ScanditSDK", "scan",
["y5TRWAxOEeKeEGfJ+mo2k17YexeY5gnQXlsZD8bHHPY",
{"beep": true,
"1DScanning": true,
"2DScanning": true,
"scanningHotspot": "0.5/0.5",
"vibrate": true}]);
}*/
/*function showHint() {
//alert("Please meet the cash counter to know about offer");
Toast.longshow("Please meet the cash counter to know about offer");
}*/
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<header data-role="header">
<h1>Xlogix</h1>
Menu
<div data-role='popup' id='mainMenu' data-theme='d'>
<ul data-role='listview' data-inset='true' style='min-width:210px;' data-theme='d'>
<li data-role='divider' data-theme='a'>Choose an action</li>
<li data-icon='false'><a href='#' onclick='addQty()'>Add Quantity</a></li>
<li data-icon='false'>Delete</li>
</ul>
</div>
</header>
<article data-role="content" id="product_list">
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Scan</li>
<li>Manual</li>
<li>Checkout</li>
<li>Cancel</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
I am using the instagram ruby gem. If i do more than 2 requests below is what the error i get.
Now, for the first two request it shows this
Processing by HomesController#index as JS
Processing by HomesController#index as */*
So when the third request happens now, it erros into (as said above) this
Completed 500 Internal Server Error in 4525ms
JSON::ParserError (757: unexpected token at '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" class="hl-en not-logged-in ">
<head>
<meta charset="UTF-8" />
<title>Page Not Found • Instagram</title>
<meta name="robots" content="noimageindex" />
<link rel="Shortcut Icon" type="image/x-icon" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-144x144-precomposed.png" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/jquery.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/bluebar.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/strings/strings_en.js"></script>
<script>
window._csrf_token = 'NOTPROVIDED';
window._jscalls = [
];
</script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/polyfills/polyfill_old.js"></script>
<script data-main="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/modules/main.js" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/require.js"></script>
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/bluebar/bluebar_new.css" />
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/distillery/dialog-main.css"/>
</head>
<body class=" p-error dialog-404">
<div class="root">
<div class="page">
<header class="top-bar top-bar-new">
<div class="top-bar-wrapper">
<h1 class="logo">Instagram</h1>
<div class="top-bar-left">
<ul class="top-bar-actions">
<li>
<a class="top-bar-home" href="/" label=Home><i></i></a>
</li>
</ul>
<div class="top-bar-search" id="top-bar-search">
</div>
</div>
<div class="top-bar-right account-state" id="top_bar_right">
<ul class="top-bar-actions">
<li id="link_profile" class="link-signin">
<a href="javascript:;" class="loginLink">
<i></i>
<strong>Log in</strong>
</a>
</li>
</ul>
</div>
</div>
</header> <!-- .top-bar -->
<div class="main">
<div class="error-container">
<h2>Page Not Found</h2>
<p>This page could not be found.<br />You might have followed an incorrect link.</p>
</div>
</div> <!-- .main -->
</div> <!-- .page -->
<footer class="page-footer" role="contentinfo">
<div class="wrapper">
<nav>
<ul>
<li>About us</li>
<li>Support</li>
<li>Blog</li>
<li>API</li>
<li>Jobs</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</nav>
<p class="copyright">© 2013 Instagram</p>
</div>
</footer>
<div id="reactModalMountPoint"></div>
</div> <!-- .root -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18105282-1']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>'
I think something is wrong with the header? Since I am doing the process via ajax, how can I force it to process it through JS? since thats what seems to work here I believe.
Here is my ajax code
{
$.ajax({
url: /home,
method: "post",
data: {
// data goes here
},
success: function(html)
{
if(html)
{
// html goes here
}else
{
// html goes here</center>');
}
}
I think instagram is blocking your request if you do to many request in a specific time
Instagram is serving up an error page instead of the JSON you expect. You need to check the response's status code (in this case it would be 404 instead of 200) to find out if the payload is JSON or HTML in the case of the error page.
After so much work on this, I found out for my case that it is because something in the content of the JSON data is screwing things around. That was my situation (and I hate how 500 status is so vague about the error, too)
At first thanks to all that read my question.
I'm quite new to jquery JQM and knockoutJS and have some problems with a dynamic generated html code.
So I have the following example: I start my app with startPage.html where i load all the scripts(jquery, jqm, knockout) and with a link i go to secondPage.html where i want to load a dynamically generated array of checkboxes.
Now the problem is that i get the checkboxes but i don't have the jqm style for them.
My Code looks like this:
startPage.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" `"http://www.w3.org/TR/html4/loose.dtd">`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>start Page</title>
<link href="jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.structure-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.theme-1.3.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/WelcomeVM.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/CheckboxVM.js"></script>
<script type="text/javascript">
//javascript code
var master = null;
var masterVM = function(){
var startVM = new welcomeVM();
var checkBoxHandler = new checkBoxVM();
return{
startVM:startVM,
checkBoxHandler:checkBoxHandler
}
}
$(document).ready(function(){
master = new masterVM();
ko.applyBindings(master);
});
$(document).bind("pageload",function(event,data){
ko.applyBindings(master);
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content" id="content">
<div>
<a href="secondPage.html" data-role="button" >
</div>
</div>
</div>
</body>
</html>
My View Model for Knockout looks like this, here i generate the HTML code and fill the array of checkboxes:
var checkBoxVM = function() {
var cbArray = [ "One", "Two", "Three", "Four", "Five"];
var htmlexampleCB = ko.observable();
init();
function init() {
$.each(cbArray, function(index, item) {
var htmlCB = "<input type=\"checkbox\" name=\"exampleCB\" id=\""
+ item + "\" value=\"" + item + "\"> ";
var htmlLabel = "<label for=\""+item+"\">"+item+"</label>";
var html = htmlCB + htmlLabel + "<br />";
var all = "";
if (htmlCompanyCB() != null) {
all = htmlCompanyCB();
}
all = all + html;
htmlCompanyCB(all);
});
alert(htmlexampleCB());
};
return {
htmlexampleCB:htmlexampleCB
};
};
secondPage.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-role="page" id="gasPage">
<div data-role="content">
<!-- <div data-bind="html:companiesHandler.htmlexampleCB"> </div> -->
<script type="text/javascript">
$(document).ready(function(){
var newSet = '<fieldset data-role="controlgroup" class="cbGroup"></fieldset>';
$('.cbDiv').append(newSet);
var newBox = '<div data-bind="html:checkBoxHandler.htmlexampleCB">';
$(".cbGroup").append(newBox);
});
</script>
<div data-role ="fieldcontain" class="cbDiv">
<fieldset data-role="controlgroup" class="cbGroup">
</fieldset>
</div>
</div>
</div>
</body>
</html>
I tried several other solutions that i saw here but unfortunately non of them worked for me.
Could someone please give me a hint or tell me what i should do, i don't have any other ideas.
Thanks in advance and i hope that someone can help me.
This code after creating the checkboxes dynamically should do it,
$("input[type='checkbox']").checkboxradio("refresh");
Please check the following link to a similar question.
Dynamic controlgroup and checkboxes unstyled
Trying to implement a simple slider menu. jQuery Mobile renders fine on the main page but on the menu div, no jQuery Mobile is being applied. Read all related examples but none of them solve the problem I'm having. Any feedback is much appreciated.
test.html.erb
<head>
<title>FB Style Menu</title>
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" />
<link rel="stylesheet" href="css/main.css?v=31" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<div data-role="page" class="pages" id="home">
<div data-role="header">
Menu
<h1>FB Style Menu</h1>
</div><!-- /header -->
<div data-role="content">
<p><strong>Note: You can swipe right/left to show/close menu.</strong></p>
</div>
</div>
<div id = "menu">
<h3>Menu</h3>
<ul>
<li class="active">Home </li>
<li>About </li>
<li>Portfolio </li>
<li>Contact </li>
</ul>
</div>
test.js
$(function(){
var menuStatus;
$("a.showMenu").click(function(){
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "250px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
$('.pages').live("swipeleft", function(){
if (menuStatus){
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
}
});
$('.pages').live("swiperight", function(){
if (!menuStatus){
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function(){menuStatus = true});
}
});
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>fuseGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">if (window.location.hash == '#_=_')window.location.hash = '';</script>
<link rel="stylesheet" href="arc2theme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
You do not need to place the var p inside the jQuery selector syntax.
p.hasClass(....
Should be good enough.
regarding the mobile, I believe jQuery mobile looks for divs with data-role = page, your menu div is outside of that.
Try adding data-role = page to your menu div .