We Keep Coding

jQuery: Controller function not being executed correctly with ajax

I am programming a web application in C# MVC which dynamically loads information from a server in order to improve the speed.
Currently I have some errors and I am unable to diagnose why these are causing issues so I'll try my best to explain what's happening:
This div is created many times and grabs the ID for each project.
<div>
Open:
#{string JiraKey = item.JiraProjectKey;}
<span id="JiraOpen" onload="GetOpenJira"></span>
</div>
Then in the span, the script GetOpenJira is initiated:
<script id="GetOpenJira">
var url = "/HicVault/Projects/GetNumJiraOpenByKey";
var key = $('#JiraKey').val();
$.get(url, { input: key }, function (data) { $("#JiraOpen").html(data) });
</script>
This script SHOULD asynconously ask the controller to complete the function GetNumJiraOpenByKey with the JiraKey being used as a parameter. The function in the controller is:
[HttpGet]
public ActionResult GetNumJiraOpenByKey(string JiraProjectKey)
{
var sJql = "project = \"" + JiraProjectKey + "\" and status = \"Open\"";
var resultFieldNames = new List<string> { "resolution" };
Issues issues = new JiraClient(new JiraAccount()).GetIssuesByJql(sJql, 0, 1000, resultFieldNames);
return PartialView(issues.total);
}
Essentially this function returns an int once it has counted all of the issues for that particular project. I would like this to be done with AJAX using jQuery to load these values after the page has been loaded to vastly increase speed. (Currently without AJAX, pages take >30 sec to load).
Thanks if anyone can help.
EDIT: I suppose I should ask a question, currently with this code the page loads and after around 5 seconds, a server 500 error appears in the console stating there is an Internal Server Error. I know this is a general error, going in deeper points to the line:
"$.get(url, { input: key }, function (data) { $("#JiraOpen").html(data) ".
I am guessing either the logic of my work isn't possible in Razor MVC + JS, or I am getting the fundamentals of jQuery ajax get wrong?

rewrite your script as following...
<script id="GetOpenJira">
var url = "/HicVault/Projects/GetNumJiraOpenByKey";
var key = $('#JiraKey').val();
$.get(url, { JiraProjectKey: key }, function (data) { $("#JiraOpen").html(data) });
</script>

Get hidden content from Website using PhantomJS

I am trying to scrape all the content of a specific page of TripAdvisor. Using the code bellow I am getting all the .html code with all the content to scrape. What I would like to do with PhantomJS is manipulate the page to select 3 things before downloading all the html:
Select sorting by 'Date'
Select 'Any' language
Expand all the 'More' button for all the reviews to display them all.
I attached a screenshot to make it more clear.
http://www.tripadvisor.com/Restaurant_Review-g187234-d2631590-Reviews-Le_Bedouin_Chez_Michel-Nice_French_Riviera_Cote_d_Azur_Provence.html#REVIEWS
// scrape_techstars.js
var webPage = require('webpage');
var page = webPage.create();
var fs = require('fs');
var path = 'reviews.html'
page.open('http://www.tripadvisor.com/Restaurant_Review-g187234-d2631590-Reviews-Le_Bedouin_Chez_Michel-Nice_French_Riviera_Cote_d_Azur_Provence.html#REVIEWS', function (status) {
var content = page.content;
fs.write(path,content,'w')
phantom.exit();
});
Can anyone with experience with this JS library tell me how to execute these actions?
Thanks!

You'll want to add an onLoadFinished function. If it were me I would inject jquery and use that to interact with the dom.
page.onLoadFinished = function() {
page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
page.evaluate(function() {
// do dom stuff here
});
});
};

Access data from HTML file (Ionic Framework)

I'm new to JavaScript and Ionic Framework and I have following problem.
I'm trying to access data from an external HTML file using getElementsByTagName(), because I want to get some text from the HTML file and show it in the App's list-view but it's not working.
I'm using following code in my controllers.js file:
//General
.controller('generalCtrl', function($scope) {
//Create Arrays
$scope.items = {};
$scope.item_names = {};
$scope.siteDiv = $('<div>');
$scope.siteDiv.load('website.php #somediv', function(){
$scope.item_names = $(this).document.getElementsByTagName("a");
//create list view
for(i=0; i<$scope.item_names.length; i++) {
$scope.items[i] = { title: $scope.item_names[i], id: i };
}
});
})
It seems like the array $scope.items is empty because everything worked when I defined it manually. But I'm not sure how to fix this problem.
I hope someone can help me with that problem. Thanks for your attention.
Edit 1:
I've added a try-catch function which returned following error: 'ReferenceError: Can't find variable:$'. Also it says that the %scope.item_names variable is undefined, so it seems to be unable to load the site. I would be grateful for any help. Thanks.

Parse a HTML structure, what JS tools are available

I have to get out information from a HTML table from a website. I want to do a HTML request from a Node.ja server to that website and parse the HTML table. Are there any libraries or techniques for JS except regular expression to parse the data from the table cells?
Sorry I'm very new in programming.

Look at the excellent Cheerio library:
https://github.com/MatthewMueller/cheerio
Examples are on the Git.

var doc = document.implementation.createDocument(null, your_downloaded_html_page_as_string, null);
You can use normal DOM function like getElementByTagName,firstChild,..etc to get your actual data from the HTML page you downloaded.
Refer Parse a HTML String with JS for more methods.

jsdom is a great module for this
// Count all of the links from the Node.js build page
var jsdom = require("jsdom");
jsdom.env(
"http://nodejs.org/dist/",
["http://code.jquery.com/jquery.js"],
function (errors, window) {
console.log("there have been", window.$("a").length, "nodejs releases!");
}
);

I would use JQuery. You could iterate through all table datas like so: (this will alert the html inside every table data)
$('td').each( function () { alert( $(this).html() } );
or for a specific table:
$('#specific_table_id.td').each( function () { alert( $(this).html() } );

Get HTML source code as a string

I want the source code of an HTML page (1.html) to be used in another page (2.html). Furthermore, I want to perform operations on it in 2.html.
Is there a way to do this?
EDIT: 1.html is a separate public webpage and I do not have access to make changes to its source code. I have to do whatever I need only by using 2.html.

To get the DOM converted to a string:
document.getElementsByTagName('html')[0].innerHTML
Question: what do you mean by "use it"? Do you need to include 1.html inside 2.html? Or do you just need to process it?

Its very simple
On 2.html use this jQuery snippet
$.get("1.html", function(response) {
alert(response)
//do you operations
});

jQuery:
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});

I don't understand whatyou mean that you must make modifications, but you could simply load the second page through AJAX
var url ="1.html";
$.ajax({
url: url,
dataType: 'html'
success: function(data){
//do something with data, which is the page 1.html
}
});

Use can use .html method alternatively to get the entire html data of the page.
$(function(){
var a = ($('html').html())
})​

A realy simple and modern way is the follow:
fetch('1.html').then(function(response) {
/* when the page is loaded convert it to plain text */
return response.text()
}).then(function(html) {
/* initialize the DOM parser */
var initParser = new DOMParser();
/* parse the text */
var parse = initParser.parseFromString(html, 'text/html');
/* you can now even select part of that html as you would in the regular DOM */
/* example */
var docOutput = parse.querySelector('html').outerHTML;
console.log(docOutput);
}).catch(function(error) {
console.log('Error fetch page: ', error);
});