Get html from site that is rendered with Js - c#

This link leads to a document from an open nutrition database:
http://www.dabas.com/ProductSheet/Detail.ashx/124494
Im trying to fetch some information from this page with the help from xpath.
The problem is this, when i choose "view source", in order to find out what tags I am after, all I get is this:
<!DOCTYPE html>
<html>
<head>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<title>ProductSheetLoader</title>
</head>
<body>
<div style="position:absolute; left:50%; top:50%; width:500px; height:200px; margin-top:-100px; margin-left:-266px; padding:15px; color:#666;">
<h1><img src="../../images/ajax-loader.gif" /> Produktbladet laddas...</h1>
</div>
<input id="hiddenARIDENT" name="ARIDENT" type="hidden" value="124494" />
</body>
<script type="text/javascript">
$(document).ready(function () {
var url2 = "/ProductSheet/Details.ashx/" + $('#hiddenARIDENT').val()
$.ajax({
url: url2,
cache: false,
success: function (respones) {
with (window.document) {
write(respones);
close();
}
}
});
});
</script>
</html>
It seems to me that all the info is getting loaded from somewhere else.
If i press f12, I can see all the info I want but how can I Acess this info? Is it possible?
Any help appreciated.

The original page just loads the actual content with ajax, and replaces the document contents with it. The actual information in this case is available at /ProductSheet/Details.ashx/124494, (note the s in Details.ashx, which contains the actual page contents.
Generally, the server might check whether the request also contains the X-Requested-With: XMLHttpRequest header, but it does not seem to be the case here.

Related

Mvc Create button pop up need help C#.net

I am creating a Create,Edit,Delete application for simple one table.
I have Create get method and create post method views ready as i created my project using entity framework.
now in my current application it is opening a new page to create new data and what i want is to open a pop up in which I add required fields and than when I click on ADD it will add those data in database.
FloorFactorsController.cs
public PartialViewResult Create()
{
return PartialView();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "FloorFactorPercentage,FromDate,ToDate")] FloorFactor floorFactor)
{
if (ModelState.IsValid)
{
db.FloorFactors.Add(floorFactor);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(floorFactor);
}
Index view.cshtml required part of full code.`
Here, I have add ajax.actionlink for adding an CREATE NEW link which redirect to my get method createin controller class. I have added all required .css and js files i.e. jquery.js, dialog.js,dialog.css etc.
<p>
#Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "Get" ,UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" }) <br />
</p>
<div id="result" style="display:none;">
<button type="button">success</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
});
function openPopup() {
$("#result").dialog("open");
}
</script>
`
It Gives error
Object doesn't support property or method 'dialog'
I don't know what to do i have referred this QUESTION but this is not working for me.
EDIT _layout.cshtml File
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="~/Content/jquery-2.2.3.js"></script>
<link type="text/css" href="~/Content/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="~/Content/jquery-ui.js"></script>
<script src="~/Content/dialog.js"></script>
<link href="~/Content/dialog.css" rel="stylesheet" />
Sorry, I can't add a comment because my reputation lower than 50. Did you ever read this:
Object doesn't support property or method 'dialog'
? I think that you didn't include jquery file properly.
My guess is that you're importing a CDN or downloaded version of jQuery UI that doesn't include the dialog widget.
To test this theory, replace the script reference for jQuery UI with the following:
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
I have other questions about what you're actually trying to achieve here, since your controller has ActionResult methods instead of JsonResult and why you're GETting a request to a method that is decorated with [HttpPost], but that's not what you're asking about in this question.
Well after so much surfing on new i found few useful links and got solution to my question.
In order to use jquery-ui files i required to put those files in #Scripts.render(""); as it is best practice to add all script and style files in it for better performance.
I was unable to add #Script & #Styles in my project. It was giving me error that it is not in the context. so this Question solved my that problem. than i just pasted link in it and my dialog start working fine. still i am trying to open dialog box using ajax but i did open dialog box using javascript.
Code to open pop up with javascript :
<div>
<input type="text" id="Name" />
<input type="text" id="Address" />
<button onclick="OpenDialog()">
Open Dialog</button>
</div>
<div id="Dialog-Box">
<input type="text" id="Dialog-Name" />
<input type="text" id="Dialog-Address" />
<input type="submit" onclick="onsave()" value="save" />
</div>
<script>
$('#Dialog-Box').dialog({
autoOpen: false,
height: 500,
width: 700,
modal: false
});
function OpenDialog() {
var name = $('#Name').val();
var address = $('#Address').val();
$('#Dialog-Name').val(name);
$('#Dialog-Address').val(address);
$('#Dialog-Box').dialog('open');
}
function onsave() {
$.ajax({
url: '#Url.Action("ActionName", "ControllerName")',
type: 'POST',
data: {
name: $('#Dialog-Name').val(),
address: $('#Dialog-Address').val()
},
success: function (msg) {
},
error: function (msg) {
}
});
}
</script>
Thank you everyone for efforts.

Javascript not working from masterpage

I have a masterpage and a JS file, I added a link to the javascript file in the master page but on any page that uses the master page the JS isnt working.
I have tried the code on its own in a separate page and it works.
<head runat="server">
<title></title>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="../Scripts/Menu.js"></script>
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
</head>
Menu.JS:
$(function () {
//When opening the page all level 2 and level 3 items must be hidden.
$(function () {
hideitems();
})
function hideitems() {
$('h10').hide();
$('h11').hide();
$('h12').hide();
$('h13').hide();
}
//Financial Click
$('h7').click(function () {
hideitems();
$('h10').slideToggle();
$('h11').slideToggle();
$('h12').slideToggle();
});
//Container Click
$('h8').click(function () {
hideitems();;
$('h13').slideToggle();
});
})
I think it's file path issue.Can you follow the steps given here
ASP.Net Master Page and File path issues
Is a path issue as said before.
Are you sure the folder is Scripts and not scripts?
open the inspector and get the link is refering, also probably you will get an error in the console

Valums file uploader giving an "Origin null is not allowed by Access-Control-Allow-Origin." error

I want to use Valums file upload javascript. However, when I run the demo or the tests provided by them I get an Origin null is not allowed by Access-Control-Allow-Origin. in Chrome. It doesn't work on firefox either, but it seems to work on Internet Explorer.
The code is too long to post and I don't know where it goes wrong, if you need a part of the code I can add it in.
The html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="fileuploader.css" rel="stylesheet" type="text/css">
<style>
body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
</style>
</head>
<body>
<p>Back to project page</p>
<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
<div id="file-uploader-demo1">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: 'do-nothing.htm',
debug: true
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
</script>
</body>
</html>
There's probably nothing wrong with your code, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.

jQuery code not working with MVC3 site

I want to highlight my elements and add a link with jquery.
My Code:
#model IEnumerable<Mvc3Demo.Products>
#{
ViewBag.Title = "List";
}
<h2>List</h2>
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
<script type="text/javascript">
$(document).ready(function () {
$('#productList li').hover(
function () {
$(this).css({ 'background': 'green', 'cursor': 'pointer' });
},
function () {
$(this).css('background', '');
}
).click(function () {
window.location = 'Product/Edit/' + $(this).attr('productid');
});
});
</script>
<ul id="productList">
#foreach (Mvc3Demo.Products p in Model)
{
<li productid="#p.ProductsID">
#p.Name
<!--#Html.ActionLink("Bearbeiten", "Edit", "Product", p, null)-->
</li>
}
</ul>
Layout page:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The JQuery will be found so that couldn't be the error ( i proofed it with firebug)
Error:
No Error occurs in Firebug and no highlighting and no link
Please help
I've put the HTML which would be output from your example above into a fiddle. As you can see, it appears to work correctly.
Is the URL in your reference to jQuery correct?
Don't you have something in your Layout page that broke the jQuery functionality?
Try to unbind your page from the Layout and test it indipendently.
Or post your Layout page to let us see what could be wrong with it...
Edited after seeing the Layout page:
There's the error. you already have the jquery reference in the layout page. This cause the error. Simply delete the reference from you page leaving the one in the layout) and everything is going to work.
I created a littel project to test it.
PS: I still don't understand why 2 references to the same javascritp file cause the error :/
try to type
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
instead of
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />

Saving js file with c# commands

<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Areas/CMS/Content/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/Areas/CMS/Content/js/jquery.jeditable.js"></script>
<script type="text/javascript" src="/Areas/CMS/Content/js/jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".naslov_vijesti").editable('<%=Url.Action("UpdateSettings","Article") %>', {
submit: 'ok',
submitdata: {field: "Title"},
cancel: 'cancel',
cssclass: 'editable',
width: '99%',
placeholder: 'emtpy',
indicator: "<img src='../../Content/img/indicator.gif'/>"
});
});
</script>
</head>
This is head tag of site.master file. I would like to remove this multiline part from head and place it in jeditable.js file, which is now empty. If I do copy/paste, then <% %> part won't be executed. In PHP I would save js file as jeditable.js.php and server would compile code that is in <?php ?> tag. Any ideas how to solve this problem?
Thanks in advance,
Ile
In PHP I would save js file as jeditable.js.php and server would compile code that is in tag.
One thing to keep in mind here is that php is now forced to process that entire javascript file on every request. This is generally a "Bad Thing"TM, and it uses up server resources that could be spend elsewhere.
As Raj Kimal's answer already mentioned, what we do in ASP.Net to handle this in the most efficient way possible is have a short script defined inline with the page that does nothing but assign result of server code to variables. Do this before declaring other scripts, and you can then use these variables in those scripts directly. That way, you don't have to do any extra server work for your external javascript files.
I'll make one addition to Mr Kimal's answer. It's often best to enclose these variables in an object, to help avoid naming collisions. Something like this:
<head runat="server">
<script language="javascript">
var ServerCreated = {
ArticleAction:'<%=Url.Action("UpdateSettings","Article") %>',
OtherVar:'some server data'
}
</script>
</head>
Then your jeditable.js file would look like this:
$(document).ready(function() {
$(".naslov_vijesti").editable(ServerCreated.ArticleAction, {
submit: 'ok',
submitdata: {field: "Title"},
cancel: 'cancel',
cssclass: 'editable',
width: '99%',
placeholder: 'emtpy',
indicator: "<img src='../../Content/img/indicator.gif'/>"
});
});
Define your variable part as a js variable.
var foo = '<%=Url.Action("UpdateSettings","Article") %>';
and place it before the js reference. Then use the varible in your js file.
You can put the script inside an .aspx file and set the content type to text/javascript in the #page directive. You will still be able to use the code tags.
The cost of processing the entire javascript file every request can easily be mitigated by applying server side caching so that shouldn't be a problem. This can be configured in the #page directive as well.
You have a few options, but the key here is that if you need to use the <% %> syntax to get information you need to be in the context of an ASP.NET page.
You "could" move the actual function to an external file, and reference the JS, then add a small inline script block that called the function with two parameters, but that defeats the purpose of what you want.
The real question here, why have the overhead of an additional HTTP request for a single method?

Categories