Hey i want to download my private paste via a batch/cmd file with using curl as it is privat i have to login with my api dev key but this does not work output is some html code
I already tried but it did not worked i dont know why.
curl -s -o sdggsd.txt -d "api_dev_key=key" https://pastebin.com/raw/link
Edit : Now I also tried this but it says no url specified.
curl -d 'api_dev_key=key' -d 'api_user_name=name' -d 'api_user_password=pass' -o sdggsd.txt "https://pastebin.com/raw/url"
Edit : So this code works but it outputs in the file only html code :( not the code that is on the website
curl -o st.txt -d 'api_dev_key=key' -d 'api_user_name=user' -d 'api_user_password=pass' https://pastebin.com/raw/url
st.txt file result for command :
curl -o st.txt -d 'api_dev_key=key' -d 'api_user_name=user' -d 'api_user_password=pass' "https://pastebin.com/raw/url"
result in st.txt :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=yes" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S72LBY47R8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', "G-S72LBY47R8");
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pastebin.com - Bad Request (#400)</title>
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="description" content="Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time." />
<meta property="og:description" content="Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time." />
<meta property="fb:app_id" content="231493360234820" />
<meta property="og:title" content="Pastebin.com - Bad Request (#400)" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://pastebin.com/raw/url" />
<meta property="og:image" content="https://pastebin.com/i/facebook.png" />
<meta property="og:site_name" content="Pastebin" />
<meta name="google-site-verification" content="jkUAIOE8owUXu8UXIhRLB9oHJsWBfOgJbZzncqHoF4A" />
<link rel="canonical" href="https://pastebin.com/raw/url" />
<meta name="csrf-param" content="_csrf-frontend">
<meta name="csrf-token" content="BBCH6PRTqsfFEJnQk2n_8j6Jfe7FUMIOP34snpj8SidSQe69sD_JiapZzZX5G8eHDucP24MfqHx7HXWt_pQhRQ==">
<link href="/assets/c80611c4/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/a25015e7/dist/bootstrap-tagsinput.css" rel="stylesheet">
<link href="/themes/pastebin/css/vendors.bundle.css?d9b75a0225d98a07f54f" rel="stylesheet">
<link href="/themes/pastebin/css/app.bundle.css?d9b75a0225d98a07f54f" rel="stylesheet">
</head>
<body class="night-auto " data-pr="x2xy94pJ" data-pa="" data-sar="1" data-abd="1" data-bd="1">
<svg style="height: 0; width: 0; position: absolute; visibility: hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="add" viewBox="0 0 1024 1024"><path fill="#ccc" d="M512 16C238 16 16 238 16 512s222 496 496 496 496-222 496-496S786 16 512 16z m288 552c0 13.2-10.8 24-24 24h-184v184c0 13.2-10.8 24-24 24h-112c-13.2 0-24-10.8-24-24v-184h-184c-13.2 0-24-10.8-24-24v-112c0-13.2 10.8-24 24-24h184v-184c0-13.2 10.8-24 24-24h112c13.2 0 24 10.8 24 24v184h184c13.2 0 24 10.8 24 24v112z"/></symbol>
<symbol id="search" viewBox="0 0 512 512"><path fill="#ccc" d="M354.2,216c0-38.2-13-70.7-40-97.7c-27-27-59.6-40-97.7-40s-70.7,13-97.7,40s-40,59.6-40,97.7 s13,70.7,40,97.7s59.6,40,97.7,40s70.7-13,97.7-40C340.2,285.8,354.2,253.2,354.2,216z M511.5,472c0,10.2-3.7,19.5-12.1,27.9 c-8.4,8.4-16.8,12.1-27.9,12.1c-11.2,0-20.5-3.7-27.9-12.1L339.3,393.8c-37.2,26.1-78.2,38.2-122.9,38.2 c-29.8,0-57.7-5.6-83.8-16.8c-27-11.2-50.3-27-68.9-46.5s-34.4-42.8-46.5-68.9C6.1,272.8,0.5,244.8,0.5,216s5.6-57.7,16.8-83.8 c11.2-27,27-50.3,46.5-68.9s42.8-34.4,68.9-46.5C159.7,5.6,187.6,0,216.4,0s57.7,5.6,83.8,16.8c27,11.2,50.3,27,68.9,46.5 c18.6,19.5,34.4,42.8,46.5,68.9c11.2,27,16.8,54.9,16.8,83.8c0,44.7-13,85.6-38.2,122.9L499.4,444 C507.8,451.5,511.5,460.8,511.5,472z"/></g></symbol>
</svg>
<div class="wrap">
<div class="header">
<div class="container">
<div class="header__container">
<div class="header__left">
<a class="header__logo" href="/">
Pastebin </a>
<div class="header__links h_1024">
API
tools
faq
</div>
<a class="header__btn" href="/">
paste </a>
<div class="header__search">
<form id="w0" class="search_form" action="https://pastebin.com/search" method="get">
<input type="text" id="q" class="search_input" name="q" maxlength="128" placeholder="Search...">
<button type="submit" class="search_btn"><svg class="icon search"><use xlink:href="#search"></use></svg></button>
</form> </div>
</div>
<div class="header__right">
<div class="header_sign">
Login
Sign up
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="page -top -right">
<div class="content__title">Bad Request (#400)</div>
<div class="content__text">
<div class="notice -no-margin">
Unable to verify your data submission. </div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="sidebar h_1024">
<div class="sidebar__title">
Public Pastes
</div>
<ul class="sidebar__menu">
<li>
BTC Wallet Credentials have been reset
<div class="details">
GetText |
3 min ago
| 0.24 KB </div>
</li>
<li>
Link crash
<div class="details">
Java |
22 min ago
| 2.37 KB </div>
</li>
<li>
Untitled
<div class="details">
Lua |
44 min ago
| 3.51 KB </div>
</li>
<li>
Untitled
<div class="details">
Python |
47 min ago
| 2.60 KB </div>
</li>
<li>
Dig
<div class="details">
Lua |
1 hour ago
| 2.28 KB </div>
</li>
<li>
bot.lua
<div class="details">
Lua |
1 hour ago
| 1.27 KB </div>
</li>
<li>
Quirk Command
<div class="details">
JavaScript |
1 hour ago
| 3.30 KB </div>
</li>
<li>
bot.lua
<div class="details">
Lua |
1 hour ago
| 1.25 KB </div>
</li>
</ul>
<div class="sidebar__sticky -on">
</div>
</div>
</div>
</div>
<div class="top-footer">
<a class="icon-link -size-24-24 -chrome" href="/tools#chrome" title="Google Chrome Extension"></a>
<a class="icon-link -size-24-24 -firefox" href="/tools#firefox" title="Firefox Extension"></a>
<a class="icon-link -size-24-24 -iphone" href="/tools#iphone" title="iPhone/iPad Application"></a>
<a class="icon-link -size-24-24 -windows" href="/tools#windows" title="Windows Desktop Application"></a>
<a class="icon-link -size-24-24 -android" href="/tools#android" title="Android Application"></a>
<a class="icon-link -size-24-24 -macos" href="/tools#macos" title="MacOS X Widget"></a>
<a class="icon-link -size-24-24 -opera" href="/tools#opera" title="Opera Extension"></a>
<a class="icon-link -size-24-24 -unix" href="/tools#pastebincl" title="Linux Application"></a>
</div>
<footer class="footer">
<div class="container">
<div class="footer__container">
<div class="footer__left">
create new paste <span class="footer__devider"> / </span>
syntax languages <span class="footer__devider"> / </span>
archive <span class="footer__devider"> / </span>
faq <span class="footer__devider"> / </span>
tools <span class="footer__devider"> / </span>
night mode <span class="footer__devider"> / </span>
api <span class="footer__devider"> / </span>
scraping api <span class="footer__devider"> / </span>
news <span class="footer__devider"> / </span>
pro
<br>
privacy statement <span class="footer__devider"> / </span>
cookies policy <span class="footer__devider"> / </span>
terms of service<sup style="color:#999">updated</sup> <span class="footer__devider"> / </span>
security disclosure <span class="footer__devider"> / </span>
dmca <span class="footer__devider"> / </span>
report abuse <span class="footer__devider"> / </span>
contact
<br>
<br>
<span class="footer__bottom h_800">
By using Pastebin.com you agree to our cookies policy to enhance your experience.
<br>
Site design & logo © 2023 Pastebin</span>
</div>
<div class="footer__right h_1024">
<a class="icon-link -size-40-40 -facebook-circle" href="https://facebook.com/pastebin" rel="nofollow" title="Like us on Facebook" target="_blank"></a>
<a class="icon-link -size-40-40 -twitter-circle" href="https://twitter.com/pastebin" rel="nofollow" title="Follow us on Twitter" target="_blank"></a>
</div>
</div>
</div>
</footer>
<div class="popup-container">
<div class="popup-box -cookies" data-name="l2c_1">
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. <span class="cookie-button js-close-cookies">OK, I Understand</span>
</div>
<div class="popup-box -pro" data-name="l2c_2_pg">
<div class="pro-promo-img">
<a href="/signup">
<img src="/themes/pastebin/img/hello.png" alt=""/>
</a>
</div>
<div class="pro-promo-text">
Not a member of Pastebin yet?<br/>
<b>Sign Up</b>, it unlocks many cool features! </div>
<div class="close js-close-pro-guest" title="Close Me"> </div>
</div>
</div>
<span class="cd-top"></span>
<script src="/assets/9ce1885/jquery.min.js"></script>
<script src="/assets/f04f76b8/yii.js"></script>
<script src="/assets/a25015e7/dist/bootstrap-tagsinput.js"></script>
<script>
const POST_EXPIRATION_NEVER = 'N';
const POST_EXPIRATION_BURN = 'B';
const POST_STATUS_PUBLIC = '0';
const POST_STATUS_UNLISTED = '1';
</script>
<script src="/themes/pastebin/js/vendors.bundle.js?d9b75a0225d98a07f54f"></script>
<script src="/themes/pastebin/js/app.bundle.js?d9b75a0225d98a07f54f"></script>
You need to curl the raw text, not the site. A raw paste (or github file) will be only the text, no tags.
Related
I am trying to do three things:
prevent auto focus of input on mobile
prevent the webpage from moving on mobile
allow touch movement on <ul>
To prevent auto focus of input on mobile:
a) add readonly to input tags
b) add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
To prevent the webpage from moving on mobile:
a) function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
To allow touch movement on <ul> on mobile:
a) function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('ui-timepicker-viewport')
tp[0].addEventListener("touchmove", allowBehavior);
This all seems to work most of the time. Occasionally, when scrolling the the <li> elements the entire screen moves. How do I stop that behavior?
NOTE: inputs with class='timepicker' are used by the js timepicker library that places a dropdown with li elements. See link and use on a mobile device to duplicate behavior.
Here's a link to the page https://sailwbob.com/lagin/views/test_form.html
<head>
<title>Reservation</title>
<link rel="stylesheet" href="../public/css/header.css">
<link rel="icon" type="image/png" href="../favicon.png">
<script src="../public/js/header.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:45%;-webkit-width:35vw; }
</style>
</head>
<body style="margin-top:0px;">
<div class='container'>
<img id='swb' src="../public/images/swb.png" alt="SwB">
<div class='img-container'>
<img class='lround small' src="../public/images/img-1.png" alt="img-1">
<img class='small' src="../public/images/img-2.png" alt="img-2">
<img class='small' src="../public/images/img-3.png" alt="img-3">
<img class='small' src="../public/images/img-4.png" alt="img-4">
<img class='small' src="../public/images/img-5.png" alt="img-5">
<img class='rround small' src="../public/images/img-6.png" alt="img-6">
</div>
<link rel="stylesheet" href="../public/css/test.css">
<div id='res'>
<div id='left' class='cols'>
<p class='narrow'>Date</p>
<p class='bold'>May 11</p>
<p class='narrow'> </p>
<p class='narrow'>Reservation</p>
<p class='narrow'>Sail Time</p>
<p class='narrow'>Crew Time</p>
</div>
<div id='center' class='cols'>
<p class='narrow'>Skipper</p>
<p class='bold'>Bob Smith</p>
<p class='narrow'>Start Time</p>
<p class='narrow bold'>09:00 AM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeStart' class='timepicker' type='text' name='startTime' readonly>
<p id='w0' class='warning'>enter availability</p>
</div>
</div>
<div id='right' class='cols'>
<p class='narrow'>Boat</p>
<p class='bold'>Syrena 40</p>
<p class='narrow'>End Time</p>
<p class='narrow bold'>09:00 PM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeEnd' class='timepicker' type='text' name='startTime' readonly>
<p id='w1' class='warning'>end time > start time</p>
</div>
</div>
</div>
<div id='bottom'>
<p id='bottomLeft' class='narrow'>Crew Status</p>
<p id="bottomRight" class='narrow bold'>OUT</p>
</div>
<div id='submit'>
<div id='spacer'> </div>
<div id='update'>
<a style="text-decoration:none;" href="#" onclick="window.location='mailto:rslotpole#gmail.com ?subject=Note to Skipper'; return false;">
<img src="../public/images/email-48.png" style="width:48px;height:48px;border:0;">
</a>
<input type='submit' value='update' />
<a style="text-decoration:none" href="tel:(617) 943-5119">
<img src="../public/images/phone-48.png" style="width:48px;height:48px;border:0;">
</a>
</div>
</div>
</div>
<link rel="stylesheet" href="../public/css/timepicker/jquery.timepicker133.min.css">
<script src="../public/js/timepicker/jquery-3.6.0.js"></script>
<script src="../public/js/timepicker/jquery.timepicker134.min.js"></script>
<script src="../public/js/test.js"></script>
<script>
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
function allowBehavior(e){
console.log(e.target)
e.stopPropagation()
}
let tp = document.getElementsByClassName('ui-timepicker-viewport')
tp[0].addEventListener("touchmove", allowBehavior);
</script>
</body>
Try using the css:
.ui-timepicker-viewport {
overscroll-behavior: none
}
body {
overscroll-behavior: none
}
or the javascript:
[...document.getElementsByClassName('ui-timepicker-viewport')].forEach(element => element.style.overscrollBehavior = "none");
document.body.style.overscrollBehavior = "none";
for some reason bootstrap isnt making my website (https://dylantn.github.io/Dusic/) automatically mobile compatible because i checked this website on my phone and it is just a zoomed out version of the desktop version
some one pls help
im frustrated
and need help
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="ind.css">
<title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only"><font face="arial"></font>Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<font face="arial"><span class="navimg"><img src="dusic4.gif" width="80" length="80" alt=""></span></font>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><font face="arial">About</font></li>
<li><font face="arial">Contact</font></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><font face="arial">Sign Up</font></li>
<li><font face="arial">Login</font></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1><b><img src="dusic4.gif" width="250" length="250"></b></h1>
<h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>What is the purpose of Dusic?</h1>
<p>Our Society already has many music players, but i thought we need another one to clutter your life, plus it is Free!!</p>
<br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Try to add the following tag <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8"> to you head section.
You can find more info about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- The above 3 lined is used to make the webpage responsive -->
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Ristorante Con Fusion</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="header">
Ristorante Con Fusion
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-control="navbar"> navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Menu</li>
<li>Contents</li>
</ul>
</div>
</nav>
<header class="jumbotron row-header">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row ">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best
cuisines, and create a unique fusion experience. Our lipsmacking
creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content ">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes,
Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p>More »</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3">
<p style="padding:20px;"></p>
<h3 align="center">This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of
five different salads, six enticing appetizers, six main entrees and
five choicest desserts. Free flowing bubbly and soft drinks. All for
just $19.99 per person </p>
<p>More »</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with whos-who in the
culinary world, he specializes in creating mouthwatering Indo-Italian
fusion experiences. </p>
<p>More »</p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row ">
<div class="col-xm-6 col-xs-offset-1 col-sm-3 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div>
<div style="padding: 40px 10px;">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jquery (necessery for bootstrap javascript plugin) -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
Can anyone tell me how Bootstrap recognize that span button code is for mobile or for desktop how program recognize that the nav bar only visible when it viewport is for desktop and run button code when viewport is for mobile .what the logic behind?
Please tell me how bootstrap recognize code to be run on desktop and for mobile .what is the logic behind recognition of code in bootstrap for mobile viewport and for desktop. This is my course project for Bootstrap but i am confused in logic how bootstrap recognized code even though i did't mention in code.
CSS3 Media Queries are how CSS in general (and Bootstrap in particular) display differently on different media/screen sizes. For example, the following lines in bootstrap.css
#media (min-width: 576px) {
.container {
width: 540px;
max-width: 100%;
}
}
say that on a screen size at least 576 pixels wide (Bootstrap's "small" device breakpoint), the .container style will have a width of 540 pixels.
I have a mean app running succesfully and I am at the stage of adding UIkit to style the application. Having some trouble with the ngFor and rendering the correct elements on the page.
So here is the code for the layout sans backend code.
<!DOCTYPE html>
<html>
<head>
<title>Home Automation | Adam Sackfield</title>
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body>
<nav class="uk-navbar-container" uk-navbar uk-sticky>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="34" viewBox="0 0 28 34" class="uk-margin-small-right uk-svg" ratio="1">
<polygon fill="#fff" points="19.1,4.1 13.75,1 8.17,4.45 13.6,7.44 "></polygon>
<path fill="#fff" d="M21.67,5.43l-5.53,3.34l6.26,3.63v9.52l-8.44,4.76L5.6,21.93v-7.38L0,11.7v13.51l13.75,8.08L28,25.21V9.07 L21.67,5.43z"></path>
</svg> Home Automation
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active">Control Centre</li>
<li class="uk-parent">About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="uk-container">
<h1 class="uk-h1 uk-text-center">Control Centre</h1>
<ul class="uk-tab uk-margin-auto" uk-switcher>
<li>Sensors</li>
<li>Devices</li>
<li>Admin</li>
</ul>
<ul class="uk-switcher animation: uk-animation-fade">
<li>
<hr class="uk-divider-icon">
<div class="uk-child-width-expand#s uk-text-center" uk-grid>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-transform-origin-bottom-right uk-animation-scale-up">
<h2 class="uk-h2">Lounge Light</h2>
<button class="uk-button uk-button-default">On</button> <!-- In final app add: ng-disabled="!device.onStatus" -->
<button class="uk-button uk-button-default switchOff" disabled>Off</button> <!-- In final app add: ng-disabled="device.onStatus" -->
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-transform-origin-bottom-right uk-animation-scale-up">
<h2 class="uk-h2">Kitchen Light</h2>
<button class="uk-button uk-button-default" disabled>On</button> <!-- In final app add: ng-disabled="!device.onStatus" -->
<button class="uk-button uk-button-default switchOff">Off</button> <!-- In final app add: ng-disabled="device.onStatus" -->
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-transform-origin-bottom-right uk-animation-scale-up">
<h2 class="uk-h2">Bedroom Light</h2>
<button class="uk-button uk-button-default">On</button> <!-- In final app add: ng-disabled="!device.onStatus" -->
<button class="uk-button uk-button-default switchOff" disabled>Off</button> <!-- In final app add: ng-disabled="device.onStatus" -->
</div>
</div>
</div>
</li>
<li>Hello again!</li>
<li>Bazinga!</li>
</ul>
</div>
</body>
</html>
Here is the code for the Mean app with the *ngFor
<div class="uk-container">
<h1 class="uk-h1 uk-text-center">Control Centre</h1>
<ul class="uk-tab uk-margin-auto" uk-switcher>
<li>Sensors</li>
<li>Devices</li>
<li>Admin</li>
</ul>
<ul class="uk-switcher animation: uk-animation-fade">
<li>
<hr class="uk-divider-icon">
<div *ngFor="let device of devices" class="uk-child-width-expand#s uk-text-center" uk-grid>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-transform-origin-bottom-right uk-animation-scale-up">
<h2 class="uk-h2">{{ device.name }}</h2>
<button class="uk-button uk-button-default">On</button> <!-- In final app add: ng-disabled="!device.onStatus" -->
<button class="uk-button uk-button-default switchOff" disabled>Off</button> <!-- In final app add: ng-disabled="device.onStatus" -->
</div>
</div>
</div>
</li>
<li>Hello again!</li>
<li>Bazinga!</li>
</ul>
</div>
Screenshot of rendered views imgur
Notice inside the views the class "uk-first-column" is added on each iteration (although not sure if this is the problem). Any pointers would be greatly appreciated. As you can see from the screenshots on the ngFor each device is full width whereas on the simple UIkit version they are split in to 3 columns.
I have been using Cloud9 to make an Ionic app.
So far, the frontend of the app is doing fine. I use the ionic-framework through Cloud9.
My backend is another Cloud9 project. It uses WordPress to make a specific custom post type with advanced custom fields. It then uses WP REST API to generate that data in a json format. I can access my custom post type and its fields when I run the WordPress on Cloud9 using its /wp-json/posts?type=[specific type].
The problem is, when using a $http.get request in my ionic app, it doesn't work at all. If I use $http.get on a json file I downloaded from my WordPress and added in the workspace of my ionic app, everything works fine.
So, I have a problem getting json data from a WordPress site hosted using Cloud9 through an ionic app, also in a Cloud9 workspace.
Both workspaces are separated and run at the same time.
My code to load the json file is the following :
var defer = $q.defer();
$http.get('LINK TO .../wp-json/posts?type=[post type]', { cache: 'true'})
.success(function(data) {
defer.resolve(data);
});
return defer.promise;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
As mentionned, when I replace the link with [name of json file].json, a file that was directly downloaded from the REST API generated json and so that is identical to the site I'm trying to get, it doesn't work.
When I console.log(data), instead of logging the data for each custom post (what happens with the download .json), it logs this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<!--C9LOCAL_CODE_INJECT_PLACEHOLDER-(login-head)-DO_NOT_REMOVE-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sign-in | Cloud9 IDE - Ajax.org</title>
<meta name="description" content="Meet Cloud9, development-as-a-service for Javascripters and other developers"/>
<meta name="keywords" content=""/>
<link rel="icon" type="image/gif" href="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/homepage/favicon.ico" />
<!--C9LOCAL_CODE_INJECT_PLACEHOLDER-(login-loadedDetectionScript)-DO_NOT_REMOVE-->
<link href="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/style/signin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/prefixfree.min.js"></script>
</head>
<body class="">
<script type="text/javascript">
// ClickTale Top part
var WRInitTime=(new Date()).getTime();
// ClickTale end of Top part
</script>
<div id="header">
<a class="logo" href="/"></a>
<div class="social">
<div class="socialMediaBlok">
Tweet
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="socialMediaBlok">
<iframe src="//www.facebook.com/plugins/like.php?href=c9.io&layout=button_count&show_faces=false&width=90&action=like&font=lucida+grande&colorscheme=light&height=21"
allowtransparency="true"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;height:20px"></iframe>
</div>
</div>
</div>
<div class="headerdivider"></div>
<div id="signin_window">
<div id="signinViewport">
<div class="pageContainer">
<div id="barForgetPass" class="page">
<form id="resetPasswordForm">
<div class="header">Reset password</div>
<div class="form-holder">
<div id="lbl_inpResetPassword" class="c9-label">
<label for="inpResetPassword">Username or email address</label>
</div>
<div class="c9-textbox">
<div class="c9-txt_fix">
<input type="text" id="inpResetPassword" name="inpResetPassword" disabled2="disabled" />
</div>
</div>
</div>
</form>
<div class="fbox">
<div id="btnRPCancel" class="cancel-button button">Go back</div>
<div id="btnRP" class="action-button button">Reset my password</div>
</div>
<div class="label3">Your password will be reset and you will receive an email with a new password.</div>
</div>
<div id="barSignIn" class="page">
<form id="signinForm">
<div class="header">Please sign in</div>
<div class="form-holder">
<div id="lbl_inpUsernameEmail" class="c9-label">
<label for="inpUsernameEmail">Username or email address</label>
</div>
<div id="txt_inpUsernameEmail" class="c9-textbox">
<div class="c9-txt_fix">
<input type="text" id="inpUsernameEmail" name="inpUsernameEmail" tabindex="1" />
</div>
</div>
<div id="lbl_inpPassword" class="c9-label">
<label for="inpPassword">Password</label>
<a id="forgetlink" class="forgetlink">Forgot?</a>
</div>
<div id="txt_inpPassword" class="c9-textbox">
<div class="c9-txt_fix">
<input type="password" id="inpPassword" name="inpPassword" tabindex="2" />
</div>
</div>
<div class="fbox">
<div id="cbRememberLogin" class="c9-checkbox" tabindex="3">
<div class="check"></div><span>Remember my login</span>
</div>
<div id="btnSignIn" class="action-button button" tabindex="4" accesskey="ENTER">Sign in</div>
</div>
</div>
<div id="barSignInStatusMsg" class="signinstatus-bar">
<div id="lblSignInHeader" class="errorboxContent"></div>
<div id="lblSignInStatus" class="errorboxContent"></div>
</div>
</form>
<!-- <div id="btnLoginViaGitHub" class="c9-button btn-github" style="margin: 13px 0 0 12px;" tabindex="5"></div>-->
<div class="signin_options">
<div class='info'>Or sign in with:</div>
<!--
-->
</div>
</div>
<div id="barActivationLink" class="page">
<form id="activationlinkForm">
<div class="header">Activation email</div>
<div class="form-holder">
<div id="lbl_inpResetPassword" class="c9-label">
<label for="inpResetPassword">Username or email address</label>
</div>
<div class="c9-textbox">
<div class="c9-txt_fix">
<input type="text" id="inpResendConfirmation" name="inpResendConfirmation" />
</div>
</div>
</div>
</form>
<div class="fbox">
<div id="btnALCancel" class="cancel-button button">Go back</div>
<div id="btnAL" class="action-button button">Resend activation email</div>
</div>
<!--div style="clear: both"></div-->
<!--div class="divider" style="margin:40px 5px 0 5px;"></div>
<div class="label3" style="margin:21px 17px 0 17px;">To receive the registration email again please click the button above.</div-->
</div>
</div>
</div>
</div>
<div id="signup_window">
<div class="no_account_yet"></div>
<div class="signuplink-bar">
<div class="bird"></div>
<div class="content">
<a id="btnSignUpUrl" href="/signup">SIGN UP</a> FOR YOUR ACCOUNT
</div>
</div>
</div>
<!-- <div id="terms_of_use">
Terms of use - © 2011 - Register here
</div>-->
<div class="sign_up_now">
<a id="resendactivation">Resend my activation email</a>
</div>
<ul class="bottom_menu">
<li>Home</li>
<li>|</li>
<li>Talk to us at Twitter and Facebook</li>
<!-- <li>|</li>-->
<!-- <li>Terms of use</li>-->
<li>|</li>
<li>Cloud9 IDE, Inc © 2011</li>
</ul>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/components.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/code.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/signin.js"></script>
<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
<script type='text/javascript'>
document.write(unescape("%3Cscript%20src=\"" + (document.location.protocol == "https:"
? "https://clicktale.pantherssl.com/"
: "http://s.clicktale.net/") + "WRc5.js\"%20type=\"text/javascript\"%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var ClickTaleSSL = 1;
if (typeof ClickTale == "function")
ClickTale(48230, 1, "www");
</script>
<!-- ClickTale end of Bottom part -->
</body>
</html>
Also, since I use chrome as a debugger for my app, I use an extension for Access-Control-Expose-Headers. Without this extension, I get another error for the header.
In order to allow services to make API calls to your app (or Wordpress) you'll need to open the Share menu in the top right and make your app public.
In this case, you can lock down your app with authentication in the API so the publicness of your app shouldn't be an issue.