I have an asp.net mvc4 application, in which i'd like to add a treeview . So i used this Jquery library : graphdracula
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="~/Content/Scripts/jquery-1.4.2.min.js"></script>
<!-- The Raphael JavaScript library for vector graphics display -->
<script type="text/javascript" src="~/Content/Scripts/raphael-min.js"></script>
<!-- Dracula -->
<!-- An extension of Raphael for connecting shapes -->
<script type="text/javascript" src="~/Content/Scripts/dracula_graffle.js"></script>
<!-- Graphs -->
<script type="text/javascript" src="~/Content/Scripts/dracula_graph.js"></script>
<script type="text/javascript" src="~/Content/Scripts/dracula_algorithms.js"></script>
<script type="text/javascript">
//Show UCLA CS class dependencies (not complete)
$(document).ready(function () {
var width = $(document).width() -500;
var height = $(document).height();
var g = new Graph();
g.edgeFactory.template.style.directed = true;
g.addEdge("Projet", "Fonction1");
g.addEdge("Fonction1", "Sous Fonction 1.1");
g.addEdge("Fonction1", "Sous Fonction 1.2");
g.addEdge("Projet", "Fonction2");
g.addEdge("Fonction2", "Sous Fonction 2.1");
g.addEdge("Fonction2", "Sous Fonction 2.2");
g.addEdge("Fonction2", "Sous Fonction 2.3");
g.addEdge("Fonction2", "Sous Fonction 2.4");
var layouter = new Graph.Layout.Ordered(g, topological_sort(g));
var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
the result is a view like this :
it is good but i need to change each title to a link like this : #Html.ActionLink("Projet", "Modify_Project")
How can i modify my snippet to do this task?
If you are using jQuery.
// on page load
$(function(){
// You need to identify a selector that selects all the titles you want to change..
// Likely they all have a certain class
$('.titleSelector').changeElementType("a");
// Now you probably want to add an href
$('a.titleSelector').attr('href','http://youlinkhere');
});
Here is the plugin.. include it after jquery loads and before your script runs https://stackoverflow.com/a/8584217/602379
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
};
})(jQuery);
Related
Let me start out by saying that I am no pro at web scraping. I can do the basics on most platforms, but that's about it.
I am trying to create the foundation for a web application that can helps users reinforce their language learning by generating additional data, metrics, as well as create new tools for self-testing. The Duolingo website is not offering up any sort of API so my next thought for now is just to scrape https://www.duome.eu/. I wrote a quick little scraper but didn't realize that the site was java. In the following example, it is my wish to collect all of the words from the Words tab that contain anchors:
using System;
using HtmlAgilityPack;
using System.Net.Http;
using System.Text.RegularExpressions;
namespace DuolingoUpdate
{
class Program
{
static void Main(string[] args)
{
string userName = "Podus";
UpdateDuolingoUser(userName);
Console.ReadLine();
}
private static async void UpdateDuolingoUser(string userName)
{
string url = "https://www.duome.eu/" + userName + "/progress/";
// Create the http client connection
HttpClient httpClient = new HttpClient();
var html = await httpClient.GetStringAsync(url);
// Store the html client data in an object
HtmlDocument htmlDocument = new HtmlDocument();
htmlDocument.LoadHtml(html);
//var words = htmlDocument.DocumentNode.Descendants("div")
// .Where(node => node.GetAttributeValue("id", "")
// .Equals("words")).ToList();
//var wordList = words[0].Descendants("a")
// .Where(node => node.GetAttributeValue("class", "")
// .Contains("wA")).ToList();
Console.WriteLine(html);
}
}
}
The html object of the above code contains:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="google" value="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duolingo ยท Podus # duome.eu</title>
<link rel="stylesheet" href="/style.css?1548418871" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if("".length==0){
var visitortime = new Date();
var visitortimezone = "GMT " + -visitortime.getTimezoneOffset()/60;
//localStorage.tz = visitortimezone;
//timezone = Date.parse(localStorage.tz);
//timezone = localStorage.tz;
//console.log(timezone);
$.ajax({
type: "GET",
url: "/tz.php",
data: 'time='+ visitortimezone,
success: function(){
location.reload();
}
});
}
});
</script>
</head>
<body>
<noscript>Click here to adjsut XP charts to your local timezone. </noscript>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter47765476 = new Ya.Metrika({ id:47765476, clickmap:true, trackLinks:true, accurateTrackBounce:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/47765476" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
</body>
</html>
But if you go to the actual url https://www.duome.eu/Podus/progress/, the site contains a ton of script. So upon inspection the first problem is that I am not getting the html that I see in the browser. The second problem is that if you view source, its nothing like what is in inspect and I don't see anything in source that would lead me to isolate the data from div id="words".
Given my lackluster knowledge of java built web pages, how do I do this, or is it even possible?
You can access dualingo profile data in JSON format via https://www.duolingo.com/users/<username>
eg. https://www.duolingo.com/users/Podus
This should be much easier than trying to scrape the duome profile page manually.
How to populate dropdownlist using WCF Rest Service:
First, this is my code to get service:
service.js
(function (app) {
app.service("GetCategoryService", function ($http) {
this.GetCategory = function () {
return $http.get("http://localhost:51458/ServiceRequest.svc/GetCategory/");
};
});
})(angular.module('entry'));
Entry.Ctrl
(function (app) {
'use strict';
app.controller('entryCtrl', entryCtrl);
entryCtrl.$inject = ['$scope'];
function entryCtrl($scope) {
$scope.pageClass = 'page-entry';
//To Get Category
$scope.Category = function () {
var promiseGet = GetCategoryService.GetCategory();
promiseGet.then(function (pl) { $scope.GetCategory = pl.data },
function (errorPl) {
console.log('Some Error in Getting Records.', errorPl);
});
}
}
})(angular.module('entry'));
This is entry.html
<div class="dropdown">
<select ng-model="Category" ng-options="item.ITEM_TEXT for item in Category"></select>
</div>
WCF Output JSON like:
[{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}]
I don't know how to passing this to html, what I'm doing like this is not working. please help. thank
Make sure you have set ng-model different from the array name, also inject the service into your controller,
entryCtrl.$inject = ['$scope', 'GetCategoryService'];
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.Category = [{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select ng-model="selected" ng-init="selected = Category[0]" ng-options="item.ITEM_TEXT for item in Category"></select>
</body>
</html>
I have one html file like Map.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var address = "Ahmedabad, India" //change the address in order to search the google maps
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infoWindow = new google.maps.InfoWindow({
content: 'Hello'
});
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
then i load this html file in webbrowser control DocumentText using below code:
using (StreamReader reader = new StreamReader(System.Windows.Forms.Application.StartupPath + "\\Map.html"))
{
_mapHTML = reader.ReadToEnd();
}
webBrowser1.DocumentText = _mapHTML;
but map not load properly.
zoom in/out, Map/Satellite option, Marker are showing but one white layer on map display.
SOLVED -- for me at least.
For some reason, the Webbrowser control is defaulting to a bad version (experimental?). I changed my initialization script to specify the current 3.3 version and everything is back to normal.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.3"></script>
if you are not familiar with google's geo-autocomplete plugin let me just explain how mine works, i have a text-box, when you type a location inside the text-box the auto-complete plugin gives you a dropdown list of places with similar names. Upon selecting the place you want, the map is generated for you.
What i want is to get the full address of the returned location into a text-box.
During some research i did online i cam across the:
getPlace()
function and the property i want:
formatted_address
but my problem is this is my first time using google's 'geo-autocomplete' plugin so i have no idea how to use these functions correctly. Please help me if you have ever implemented something similar.
This is my code:
<!-- Google Maps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!--
jquery.autocomplete.js requires a minor modification for geo_autocomplete to work
the following script includes the required mod
-->
<script type="text/javascript" src="geo-autocomplete/lib/jquery.autocomplete_geomod.js"></script>
<script type="text/javascript" src="geo-autocomplete/geo_autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="geo-autocomplete/lib/jquery.autocomplete.css" />
<!-- Google Maps API -->
<script type=text/javascript">
$(document).ready(function () {
$('#dialog-form').hide();
$('#btnCancel').css('cursor', 'pointer');
$('#btnPostAlert').css('cursor', 'pointer');
$('#btnCancel').click(function () {
$('#dialog-form').hide();
alert(place.name)
});
$('#btnPostAlert').click(function () {
$('#dialog-form').show();
});
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#location").geo_autocomplete(new google.maps.Geocoder, {
mapkey: 'ABQIAAAAbnvDoAoYOSW2iqoXiGTpYBTIx7cuHpcaq3fYV4NM0BaZl8OxDxS9pQpgJkMv0RxjVl6cDGhDNERjaQ',
selectFirst: false,
minChars: 3,
cacheLength: 50,
width: 300,
scroll: true,
scrollHeight: 330,
details: $('#details'),
}).result(function (_event, _data) {
if (_data) map.fitBounds(_data.geometry.viewport);
)};
});
});
</script>
Can you please check it out.
I'm not sure what you mean by "geo-autocomplete plugin", but when you mean the places-autocomplete, you must observe the place_changed event of the autocomplete-instance (which fires when the user selects a place from the dropdown).
Inside the callback you may access the placesResult by using this.getPlace(), formatted_address is (when available) a property of the placeRsult, so you may retrieve it by using this.getPlace().formatted_address
Sample-code:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var address = this.getPlace().formatted_address||'';
alert(address);
});
I have a problem with the events in my fullCalendar object not showing when using ajax to fetch the data from my JSON feed. I believe the JSON format is proper though since the output from JSON.aspx is:
[{"id":1,"title":"TESTTITLE","info":"INFOINFOINFO","start":"2012-08-20T12:00:00","end":"2012-08-20T12:00:00","user":1}]
I used Firebug and it seems like the JSON feed is not getting fetched properly?
When I add the upper JSON-feed directly in the events it displays properly.
(Edit) The JSON response is now working, although the events are still not displayed in fullcalendar.
JSON.aspx
public partial class JSON : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Get events from db and add to list.
DataClassesDataContext db = new DataClassesDataContext();
List<calevent> eventList = db.calevents.ToList();
// Select events and return datetime as sortable XML Schema style.
var events = from ev in eventList
select new
{
id = ev.event_id,
title = ev.title,
info = ev.description,
start = ev.event_start.ToString("s"),
end = ev.event_end.ToString("s"),
user = ev.user_id
};
// Serialize to JSON string.
JavaScriptSerializer jss = new JavaScriptSerializer();
String json = jss.Serialize(events);
Response.Write(json);
Response.End();
}
}
And my Site.master
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' type='text/css' />
<script src='jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='fullcalendar/fullcalendar.js' type='text/javascript' ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullcal').fullCalendar({
eventClick: function() {
alert('a day has been clicked!');
},
events: 'JSON.aspx'
})
});
</script>
I've been scanning related questions for days but none of them seems to fix mine...
Why are your calls so complicated? Try this for now:
$('#fullcal').fullCalendar({
events: 'JSON.aspx',
eventClick: function (calEvent, jsEvent, view) {
alert('a day has been clicked!');
}
});