Jquery.find() is not able to access elements - javascript

I am trying to access an element in an iframe and .find() is not able to select any element. If I access .contents[0] I do get the entire document but if I try .find( "*" ) or any other selector it returns an empty object. Both html file are in the same folder.
var iframe_all = $('#iframe_vote').contents().find( "*" )
var iframe_document = $('#iframe_vote').contents()[0]
console.log(iframe_all)
console.log(iframe_document)
Result:
Object { length: 0, prevObject: {…} }
HTMLDocument file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html
URL: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
activeElement: <body>
alinkColor: ""
all: HTMLAllCollection { 0: html.no-js, 1: head, 2: meta, … }
anchors: HTMLCollection []
applets: NodeList []
baseURI: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
bgColor: ""
body: <body>
characterSet: "UTF-8"
charset: "UTF-8"
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css\vote.css">
</head>
<body>
<a id = 'btnPlus' href="#plus">
<span class="bg" id="plus"></span>
<span class="symbol"></span>
</a>
<a class="button minus" id = 'btnMinus'href="#minus">
<span class="bg" id="minus"></span>
<span class="symbol"></span>
</a>
<span class="cancel">
Clear
</span>
</body>
</html>

you will need to setup a server environment to work with iframes, file:/// isnt a valid domain and will cause issues with cross domain validation
remember that both pages need to be hosted on the same domain/server
this is a security measure, here is some more information: https://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

Related

Show alert when link clicked

I am trying to show an alert when a link is clicked using jQuery like this..
$(document).ready(function() {
$(".nav_link").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
It isn't working for some reason, can anyone spot what I am doing wrong?
You don't have element with class name of nav_link. Use navlink instead:
$(document).ready(function() {
$(".navlink").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">Link 1</a>
<a class="navlink" id="navlink2" href="#">Link 2</a>
<a class="navlink" id="navlink3" href="#">Link 3</a>
try this
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
You are using .nav_link class selector in your jQuery selector while your tags have navlink class. you should change it to navlink like the following :
$(document).ready(function() {
$(".navlink").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
OR you should change your a tags classes from navlink to nav_link like :
$(document).ready(function() {
$(".nav_link").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="nav_link" id="navlink1" href="#">
Link 1
</a>
<a class="nav_link" id="navlink2" href="#">
Link 2
</a>
<a class="nav_link" id="navlink3" href="#">
Link 3
</a>
You are clicking on a link ie the anchor tag, which itself has a native handling whenever a click event is called upon the anchor tag. So, for making your click handling work you have to cancel the default handling by preventing the default behaviour of anchor tag for a click event.
As you need to prevent the default action , so pass the event as a parameter in the callback function of jquery click handler.
As.
(‘anchor-tag-class’).bind( ‘click’, function(event) {
event.preventDefault();
Do your processing
});
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
check fiddle:https://jsfiddle.net/e9Ljou4q/
hope that worked
Why don't you do this:
$('a').click(function() {
alert('clicked');
});

Can't get slick to work

This is the code
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="ISO-8859-15">
<meta name="viewport" content="initial-scale=1.0">
<title>NET2GRID Support Portal</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>
</head>
<body>
<div class="slider">
<div>
<img src="/images/appliances/freezer.png" />
</div>
<div>
<img src="/images/appliances/electric_shower.png" />
</div>
<div>
<img src="/images/appliances/computer.png" />
</div>
</div>
<script>
$('.slider').slick({});
</script>
With this stylesheet:
.slider {
width: 650px;
margin: 0 auto;
}
img {
width: 200px;
height: 200px;
}
But this is the only thing I see on the page:
Am I using the slick carrousel correctly or am I using it wrong? I tried to follow the example in a jsfiddle but that doens't seem to work on my end.

Include header.html to include multiple html pages

I have this bootstrap template: http://wrapbootstrap.com/preview/WB0412697
I have stripped out my header section in the index.html and placed it into it's own file named header.html.
I have tried using the techniques JQuery techniques located on these stack overflow pages and have no been able to get the page to render the header.html within the index.html:
- Make header and footer files to be included in multiple html pages, Common Header / Footer with static HTML and Include another HTML file in a HTML file
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="wrapper">
<!--=== Header ===-->
<!--=== End Header ===-->
In between header and end header I have tried:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
along with the other examples within the aforementioned links as well as. I have also tried:
<!--#include virtual="insertthisfile.html" -->
which would have been really nice if it worked, as it seems very simple and
<?php include("filename.html"); ?>
but after changing the .html files to .php, my browsers only render plain text.
Any suggestions? What am I doing wrong?
you can make a php file like this. I expect you want the <head> staying the same as well
<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
then you can choose between different main content files depending on the $_GET using a if statement
<?php
$header = file_get_contents('header.html');
if($_GET['page'] == 'home'){
$main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
$main = file_get_contents('contact.html');
}
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
First step : create div for footer and header
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<script type="text/javascript">
$(function () {
$.get("header.html", function (respons) {
var header1 = respons;
$("body").append(header1);
});
});
</script>
</head>
<body>
</body>
</html>
Use simply PHP code:
<?php
// Include file with header
include("./include/header.php");
// This bit always includs to the "center" Call page file via URL
if (isset($_GET['page'])){
$file=$_GET['page'];
$file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
if(file_exists($file2)){
if(substr_count($file,"../")>0){
echo "Warning!";
}elseif($file=="index" or $file=="/index"){
echo "Warning!";
}else{
include $file2;
}
}else{
include "./include/404.php";
}
}else{
include "uvod.php";
}
// Include file with footer
include("./include/footer.php");
?>

How can I call methods on Reactjs components in the browser console or from an outside script?

I am creating a leaflet map component, here is an example on plunker
http://plnkr.co/edit/LkghwOcby49XESdGb782?p=preview
here is the code
leaflet.jsx
/** #jsx React.DOM */
/*jshint indent: 2, node: true, nomen: true, browser: true*/
/*global React */
'use strict';
module.exports = React.createClass({
getInitialState: function () {
return {
map: {}
};
},
componentDidMount: function() {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
this.setState({map: map});
},
modifyMap: function (method, options) {
this.setState({
map : this.state.map[method](options.latLong, options.zoom, options.zoom_options)
});
},
render: function () {
return (
/* jshint ignore:start */
<div id="map"></div>
/* jshint ignore:end */
);
}
});
map.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Leafy</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<style>
#map {
height: 200px;
}
</style>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 9]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container">
<div id="leaflet"></div>
</div>
<!-- build:js scripts/vendor.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react-with-addons.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="leaflet.jsx"></script>
<!-- endbuild -->
</body>
</html>
I would like to try and call the modifyMap method directly from the browser console or from any script on the page. I have tried to use statics but I am unable to find the Object which contains the modifyMap method. Is there an easy way to find this method or is there a better way of doing this with Reactjs? I also know that this is possible if the React class was created on this page instead of using module.exports in a separate file, I am hoping there is another way! Please help!
If you want to call methods on the component instance, you need to make it available at some point during the component's lifecycle. For example, if you have only one such map on the page, you could do something like this:
componentDidMount: function() {
// ...
this.setState({map: map});
window.map = this;
}
Now, you can access the component from the global map variable:
Standard disclaimer: while this can be useful from time to time, especially when debugging, if you find yourself doing this very often, you should revisit your use of React—namely, you should generally pass properties into components, which the component would then use to update itself.
call component methods externally:
var app= React.renderComponent( <app/>, document.getElementById('app') );
app.modifyMap(arg1, arg2) //or anything else
or from another component:
componentDidMount: function(){
this.refs.myApp.modifyMap(arg1, arg2) // Etc.
},
render: function(){
return <div>
<App ref='myApp'/>
</div>
}
but your 'modifyMap' method is anti thinking in react!
use componentDidMount to affect map according to this.props only, and change them in Map parrent component. your Map instance should be something like
<Map center={[51.505, -0.09]} zoom={13} [...] />

error with angular view with node

I have a small node project that I'm trying to integrate angularjs into. I have a partial view which uses ng-controller and ng-repeat.
Here is my angular.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
<li>view3</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
<script src="filters.js"></script>
<script src="directives.js"></script>
</body>
</html>
partial3.html (this is the partial):
<div ng-controller="PersonCtrl">
<div ng-repeat="person in persons">
{{person.last}} , {{person.first}}
</div>
I just get 5 commas without the five records in the person controller.
.controller('PersonCtrl', ['$scope', function($scope) {
$scope.persons = [
{ first: "Henry", middle: "Jacob", last: "Mendocino", gender: "M" },
{ first: "Ann", middle: "Cecilia", last: "Negro", gender: "F" },
{ first: "Berta", middle: "Ann", last: "Sallyfield", gender: "F" },
{ first: "Rudolf", middle: "John", last: "Waters", gender: "M" },
{ first: "Ken", middle: "Adam", last: "Aundry", gender: "M" },
]
}])
Here is my app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/view3', {templateUrl: 'partials/partial3.html', controller: 'PersonCtrl'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Can someone please help me figure out why my data isn't being showed.
Thanks.
He/She needed to arrange his/her filesystem and express code to point to the right places...most importantly - he/she needed:
app.use(express.static(__dirname + '/views'));
so that the app knew where to serve the static content from (index.html).

Categories