I'm trying to build an extension that scrapes email IDs from a webpage. The problem is that...
The popup.html view is not updating the new values of $scope.emailList and $scope.count in the controller in popup.js. However, when I do Inspect Popup it displays the new values attached to the $scope variables but I see no errors that I can look into and work on.
popup.js
var app = angular.module('emailScraper',[]);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
//Fetch URL of current Tab open in Chrome
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
// and use that tab to fill in out title and url
var tab = tabs[0];
$scope.cpUrl = tab.url;
console.log($scope.cpUrl); //I SEE ONLY THIS LINE WHEN I INSPECT POPUP
});
$scope.appLoaded = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Message received: ", request); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.emailList = request;
$scope.count = Object.keys($scope.emailList).length;
console.log("Emails found: " + $scope.count); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.appLoaded = true;
sendResponse({status: "Received JSON data!"});
});
}]);
content script - relevant portion
var jsonData = scrape(); // scrape() is included in the Content Script which I've chosen to leave out here.
console.log(jsonData);
chrome.runtime.sendMessage(jsonData, function(response) {
console.log(response);
});
background.js
var background = {
injectScript: function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "myscript.js"});
});
}
};
background.injectScript();
popup.html
<!DOCTYPE html>
<html ng-app="emailScraper">
<head>
<!--
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" href="css/lib/concise-v3.4.0-UI-dist/concise.min.css">
-->
<link rel="stylesheet" href="css/lib/materialize/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/app/popup.css">
</head>
<body ng-controller="AppCtrl">
<div id="popWindow">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<h5 class="brand-logo">Email Scraper</h5>
<span class="badge">
<a># found </a>
<a>{{count}}</a>
</span>
</div>
</nav>
</div>
<div class="progress" ng-hide="appLoaded">
<div class="indeterminate"></div>
</div>
<div class="progress" ng-show="appLoaded">
<div class="determinate" style="width: 100%"></div>
</div>
<div class="collection" ng-if="count > 0">
<h6>{{email}}</h6>
</div>
<div ng-if="count === 0">
<p class="flow-text"> Sorry, No Email IDs found.</p>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/angular_1.5.6/angular.min.js"></script>
<script type="text/javascript" src="js/lib/materialize/materialize.min.js"></script>
<script type="text/javascript" src="js/app/popup.js"></script>
</body>
</html>
Related
This is just a simple html file using pdfmake .
I click a button and then open a pdf file .
using :
pdfMake.createPdf(docDefinition).open();
it's ok , but now i want to see a specific language (ex:Bangla) in my pdfpage . how it is possible . please help or suggest me .
header part:
<head>
<!-- <meta charset="utf-8" />-->
<meta http-equiv="Content-Type" content="text/html" meta charset="utf-8" />
<title>html to pdf</title>
<link href="css/main.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='pdfmake/build/pdfmake.min.js'></script>
<script src='pdfmake/build/vfs_fonts.js'></script>
<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
body part :
<body>
<h1>Hello World</h1>
<div class="btn-group">
<div class="btn btn-success buttin_click_1" type="button">download</div>
<div class="btn btn-danger button_click_2" type="button">open</div>
</div>
</body>
Script :
<script>
$(document).ready(function () {
var docDefinition = {
content: 'This is an sample PDF printed with pdfMake ami '
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
</script>
Thank you .
Import the Font in pdfMake.
Afterwards update the vfs_fonts.js as described on github
assign pdfMake.fonts in your javascript
$(document).ready(function () {
pdfMake.fonts = {
'SolaimanLipi': {
normal: 'SolaimanLipi-Regular.ttf',
bold: 'SolaimanLipi-Medium.ttf'
}
};
var docDefinition = {
content: 'হ্যালো',
defaultStyle:{
font: 'SolaimanLipi'
}
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
i have signed up at inmobi,have made a banner ad and tried my best to get it working to no avail,seems like the ad div appears,but not the ad itself
here is my code.as yoU CAN see my property id provided by inmobi for ad has been entered.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="components/loader.css">
<script src="js/cssua.min.js"></script>
<script src="js/inmobi.js"></script>
<script>
var inmobi_conf = {
siteid : "48a58302dd214f5ea5483a3f9d95a28e", // your Property ID
slot: 15,
test: true,
manual: true,
autoRefresh: 20,
targetWindow : "_top", // default "_top"
onError : function(code){
if(code == "nfr"){
console.log("Error getting the ads!");
}
if(code!=="nfr"){
console.log("getting the ads!");
}
}
};
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
console.log('device is ready');
showAds();
}
function showAds(){
var adsElement = document.getElementById('ads');
_inmobi.getNewAd(adsElement);
}
</script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-position="fixed" data-theme="c">
<h1>Inmobi Client</h1>
</header>
<div data-role="content">
<img src="images/logo.png" width="300px">
</div>
<div data-role="header" data-position="fixed">
<div id="ads"></div>
</div>
</div>
</body>
</html>
I cant figure out how you detect the user changing a ratchet toggle element in javascript. In the code below I have got it to detect clicking on the toggle but it doesn't work if the user slides the toggle. Is there a standard correct way of detecting toggle state change? (A documentation link would be fine here - I couldn't find anything).
(BTW, I am currently just running in the firefox browser to evaluate Ratchet, before I add to a Cordova project.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet.css" rel="stylesheet">
<link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet-theme-ios.css" rel="stylesheet">
<script src="/My_Webs/experiments/cordova/ratchet-example/js/ratchet.js"></script>
<script src="/My_Webs/experiments/cordova/ratchet-example/js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("body").on(
"click",
"#toggle1",
function(e){
console.log("toggle1 clicked " + $("#toggle1 .toggle").hasClass("active"));
});
});
</script>
</head>
<body>
<div class="content">
<ul class="table-view">
<li class="table-view-cell" id="toggle1">
Item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</li>
</ul>
</div>
</body>
This works...
document
.addEventListener(
'toggle',
function( e ){
console.log(
$(e.target).parent().attr("id") + ", " +
$(e.target).hasClass("active")
);
}
);
If you want to post a toggle as a checkbox input type, you may link the toggle and a hidden input into your form.
The link is done by the id of the input and the data-matcher property of the toggle.
The script will link all your toggles to inputs given that you have correctly set the id and data-matcher tags.
Following script will do the state copy of the toggle to the input.
<input style="visibility: hidden" type="checkbox" value="" id="accept_cgu">
<ul class="table-view">
<li class="table-view-cell">
Accepter les termes des CGU *
<div class="toggle" data-matcher="accept_cgu">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<script>
$( document ).ready(function() {
$('.toggle').on('toggle', function (event) {
var inactive_ids = [];
var active_ids = [];
$('.toggle').each(function () {
if ($(this).hasClass("active")) {
active_ids.push($(this).attr("data-matcher"))
} else {
inactive_ids.push($(this).attr("data-matcher"))
}
});
$.each(active_ids, function (key, value) {
$('#' + value).prop('checked', true);
});
$.each(inactive_ids, function (key, value) {
$('#' + value).prop('checked', false);
});
});
});
</script>
I am using JQuery Mobile and setting up the dialog box link dynamically. Upon user clicking the link, the dialog opens in a separate page, NOT in a dialog box popup. I have the working code below. Can somebody please tell me what I am doing wrong?
Thanks in advance,
Vish
Here is a link to this sample on jsfiddle
http://jsfiddle.net/vishr/ekLWd/
When user clicks on Add Item, I dynamically change the text to Remove Item and when user clicks Remove Item, I put up a dialog box, which in this case opens in a separate page, not a dialog pop-up
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
$.mobile.changePage($('#del-dialog'), 'pop');
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="dialog" role="dialog" id="del-dialog">
<div data-role="content">
<div style="text-align:center;"><strong>Remove Item?</strong></div>
<form id="myForm">
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">OK</div>
</fieldset>
</div>
</form>
</div>
</div>
</body>
</html>
If you want the dialog box to open in the same page then you should use SimpleDialog plugin available for jquery mobile.
Below is your code which i have customized using SimpleDialog plugin so that the dialog box appears in the same page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
//$.mobile.changePage($('#del-dialog'), 'pop');
$(this).simpledialog({
'prompt' : 'What do you say?',
'cleanOnClose': true,
'buttons' : {
'OK': {
click: function () {
$('#simplestringout').text($('#simplestring').attr('data-string'));
}
},
'Cancel': {
click: function () { console.log(this); },
icon: "delete",
theme: "c"
}
}
})
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
I'm using YUI3 TabView component, and I'd like to be able to get the index of the currently selected tab. I've been looking through the api docs, but can't seem to find the relevant way to do this.
http://developer.yahoo.com/yui/3/api/module_tabview.html
Thanks!
"indexOf" actually works if you use the "tabview.get('selection')" as the argument.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
</script>
</head>
<body>
<body class="yui3-skin-sam">
<p id="msg"></p>
<input type='button' value='Button' id='button'/>
<div id="demo">
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<div>
<div id="foo">foo content</div>
<div id="bar">bar content</div>
<div id="baz">baz content</div>
</div>
</div>
<script>
var YUI;
YUI().use('event', 'node', 'tabview', function (Y) {
Y.one('#msg').set('innerHTML', 'message area');
var tabview = new Y.TabView({srcNode: '#demo'});
tabview.render();
var displayIndex = function (tabview) {
var sel = tabview.get('selection');
var idx = tabview.indexOf(sel);
Y.one('#msg').set('innerHTML', 'Selected Tab Index = ' + idx);
}
displayIndex(tabview);
Y.after('click', function(e) {
displayIndex(this);
},'body',tabview);
});
</script>
</body>
</html>