Jquery Ajax help point in right direction - asp.net

Hi I am using a third party plugin. That if I pass it a url manually it returns a value as expected, when I use AJAX in Jquery it returns nothing, I have no idea how to debug this or how to attempt to sort, any help much appreciated.
The url that works
http://192.168.0.34:81/tenHsServer/tenHsServer.aspx?t=ab&f=DeviceStatus&d=C5
The Jquery code that doesn't
$.ajax({type: 'Get', url: 'http://192.168.0.34:81/tenHsServer/tenHsServer.aspx',
data: {t: 'ab', f: 'DeviceStatus', d: 'C5'},
success: function(data) {
alert(data);
},
error: function (request, status, error) {
alert(request.responseText);
}
});

You might need something like JsonRequestBehavior.AllowGet
return Json(dataset, JsonRequestBehavior.AllowGet);//(C# MVC)
...
//Not your aspx page// try changing your get to a post to see if responds differently.

Open up your page that runs this code in Chrome, hit f12 to bring up chrome tools.
Click "Sources"
Set a break point on the lines your'd like to break on, I'd suggest where you put those "alerts()". You set a breakpoint by clicking the number for the line number in the Sources tab. You'll see a little blue icon where the break point is.
After you do the ajax request and break inspect your request and status objects. Check out the responseText, status and also poke around the other fields and see what you find.
Another Thing you can do:
Download http://fiddler2.com/
This is an HTTP debugging tool that is a critical tool for any dev.
HTH.

Related

Differences between the results in Browser and HTML-View in Development-tools

I am working on a webapplication in asp.net mvc 5. I call a View from a action.
But this view is not displayed. In the developer-tools ( FF and Chrome) I can see a correkt answer in the html-Tab. But not in the browser.
Can anybody explain that?
Thats what is displayed:
Displayed
thats the answer in html-Tab of the dev-tools:
Answer
Many thanks for your help
P
Are you calling this Action / View via an AJAX call? Since you are using a Grid I would be inclined to think that is likely.
If so, you'll want to ensure that you are actually setting the results of your contents within the callback function :
// Call a controller action via an AJAX call
$.ajax('controller/action', { id: 42 }, function(results){
// results should be your actual View HTML
$('#result-area').html(results);
});
If you are using some type of third-party components for performing this, there should be some documentation for how to handle your callbacks from your Controllers.

Same url, work like reference to style, but doesn't work like AJAX call

This is code work fine:
{html}
{head>
{**link rel="stylesheet" href="http://localhost:3000/CSS/mystyle.css"**}
{/head}
{body}
{/body}
{/html}
But this code with same url give me problem:
XMLHttpRequest cannot load "href="http://localhost:3000/CSS/mystyle.css". Origin null is not allowed by Access-Control-Allow-Origin.
$(document).ready(function() {
var href = 'http://localhost:3000/CSS/mystyle.css';
$.ajax({
url: href,
dataType: 'text/css',
success: function(data) {
$('\n' + data + '').appendTo("head");
}
});
});
Really don't understand what is problem, both call HttpRequest ?
Thanks, for any help.
The simplest answer will be to use a local web server like WAMP(or IIS) if you are not already.
the second answer is
Chrome and Safari has a restriction on using ajax with local resources. That's why it's throwing an error like
Origin null is not allowed by Access-Control-Allow-Origin.
Solution: Use firefox or upload your data to a temporary server. If you still want to use Chrome, start it with the below option;
--allow-file-access-from-files
More info how to add the above parameter to your Chrome: Right click the Chrome icon on your task bar, right click the Google Chrome on the pop-up window and click properties and add the above parameter inside the Target textbox under Shortcut tab. It will like as below;
C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Page auto reload without refresh

Hi
I want to know How to make the page reload asynchronous, for example if someone has received a message , the last message will appear without refreshing the page. just like facebook. thank you.
You would have to use something like JQuery & Javascript to poll the server for changes and display them on the page in a div.
setInterval('someFunc()', 1000)
function someFunc()
{
$.ajax({
async: true,
type: "GET",
url: "www.domain.com/url",
data: data,
success: function (html) {
$("#myDiv").html(html);
}
});
}
This will update the div with ID myDiv every second with the data from www.domain.com/url passing in data is a param (you will have to define 'data')
well there is alot of approaches
but the basics is that you call an ajax function every second or so that
checks with external php/asp or whatever file if any changes has been made to your
database/text if so
append it to the chatbox.
p.s. using libraries such as jquery simplifies things alot
Or you can use Comet model, it doesn't stress the network so much and does not fill the web servers access logs so much. The responses are also faster. Commet means that the HTTP server pushes the data to you immediately when they appear.

How do I POST to a web page using Firebug?

How do I POST to a web page using Firebug?
You can send POST request to any page by opening console (e.g. in FireFox ctrl + shift + k) and typing simple JS:
var formPost = document.createElement('form');
formPost.method = 'POST';
formPost.action = 'https://www.google.com'; //or any location you want
document.body.appendChild(formPost);
formPost.submit();
AFAIK Firebug can't do this. However, there is a very useful Firefox extension, in the spirit of Firebug, called Tamper Data. This should be able to do what you want.
It allows you to monitor each request made by the browser, and you can turn on an option that allows you to look at, and edit, every single request before it gets sent.
Firefox 27 (maybe earlier versions too, never checked) has built-in developer tools to modify and resend requests. If you don't have Firebug installed, the console is available by pressing the F12 key. If Firebug is installed, press Ctrl+Shift+K instead.
I know this is an old question, but I recently stumbled upon the same problem and wanted to share the method I am using.
Assuming the web site you want to POST to has a form with method="POST" (a very likely scenario), you can use Firebug's JavaScript command line to programmatically submit a POST request. Just click the "Show Command Line" icon in Firebug and enter something like this in the narrow text box at the very bottom of the window:
document.forms[0].submit()
Maybe this helps someone.
Another simple solution is to load any webpage that uses jQuery, and type up a $.post() in the console.
HTTP resource test is a firefox plugin that can do this.
Another powerful Firefox plugin to perform post request and some more features is the Hackbar.
Related:
To resend a POST already made, right click the POST request in the Net/XHR view and click "Resend".
Using Firebug 1.12.0:
Got here looking for a Firebug way of doing this. Then I realized that I could use Fiddler. This is the most powerful tool I know when it comes to debugging web requests.
Fiddler The free web debugging proxy for any browser, system or
platform
Click the Composer tab and write your request as desired - then click Execute.
NO NEED of plugins !!
Just drag any url in BOOKMARK BAR, then right click and EDIT, and insert javascript code:
javascript:var my_params=prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LINK=prompt("Enter destination", location.href); function post(path, params) { var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", path); for(var key in params) { if(params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); form.appendChild(hiddenField); } } document.body.appendChild(form); form.submit(); } parsed_params={}; my_params.substr(1).split("&").forEach(function(item) {var s = item.split("="), k=s[0], v=s[1]; parsed_params[k] = v;}); post(Target_LINK, parsed_params); void(0);
then enter the target site-link, and click that button in BOOKMARK BAR! That's all!
( source: https://stackoverflow.com/a/38643171/2377343 )

ASP.NET : Show progress information while saving data to DB

I have an ASP.NET 2.0 Web application.I want to show a progress indcator when user saves some data (Ex : Editing profile).I have already used jQuery in my application for some client side effects. How can i do this ? any jquery trusted stuff to use along with ASP.NET ? Thanks in advance
Do you want to show actual progress or just a busy indicator while the action is happening? If the former, you'll need to have some mechanism to record the save progress in the session and a method to check the state of the progress via AJAX. You'd submit the form via AJAX then periodically call the check method to get reports of the progress and update whatever client-side indicator (usually switch from one to another of a series of canned images or increase the width of some filled "bar"). This, of course, is complicated.
If you want to do the latter, just display an animated GIF that's a busy indicator while you submit the form via AJAX from jQuery using the beforeSend callback, then hide the indicator using the ajax method's complete handler.
$('form').ajax( {
url: '/updateprofile.aspx',
type: 'POST',
data: function() { return $('form').serialize(); },
beforeSend: function() { $('#indicator').show(); },
complete: function() { $('#indicator').hide(); },
success: function(data,status) { alert('Update complete'); }
});
The above code would be in the function invoked from whatever handler invokes the submission or hooked to the form's submit event -- though you'd have to prevent the default action from taking place, too.
An alternative to showing a meaningful progress indicator is to show an animated gif whilst the data is being saved, e.g. the spinning 'daisy' pattern used in Firefox.
This shows the user that something is happening and is usually well received.
Progress indicators which show % complete are often meaningless anyway unless they really have an idea how long the first '50%' will take compared to the last '50%'. Other progress indicators are more meaningful, e.g. those showing record count increments, etc.

Resources