Unable to hide a imag using .hide() - javascript

I have the following view inside my asp.net mvc , which display a ajax-loading imag, which i am trying to hide after starting a jquery function as follow:-
<div id= "geturl" data-url="#Url.Action("ListPackages", "Home")">
<h1>All Processes</h1>
<img id="tobehide" src="~/Content/ajax-loading2.gif" />
<ul id="products">
</ul>
Then the following JavaScript file:-
$(document).ready(function () {
$.ajax({
url: $('#geturl').data('url'),
type: 'GET',
cache: false,
success: function (result) {
$('#tobehide').hide();
$.each(result.data, function (key, val) {
var str = val.packageName;
$('<li/>', { text: str })
.appendTo($('#products'));
});
}
});
});
Currently the data will be filled in the but the loading-imag will not be hiden.so how i can force the imag to hide when the java script starts executing?.
Best Regards

Your code is correct, and should work fine!
Try using FireBug or Chrome developer tools to see what's the javascript error you are getting back from the ajax call.
If that still doesn't help, and you want the image to be hidden regardless, then use the 'complete' callback on the jquery ajax call you are using.
$(document).ready(function () {
$.ajax({
url: $('#geturl').data('url'),
type: 'GET',
cache: false,
complete: function (result) {
$('#tobehide').hide();
$.each(result.data, function (key, val) {
var str = val.packageName;
$('<li/>', { text: str })
.appendTo($('#products'));
});
}
});
});

It should work fine. No mistake in your code Brother.
try adding async option. Set it to false. and try again

Related

Including javascript file along with ajax response

I've got a dropdown that runs AJAX each time an option is selected. The ajax call returns HTML markup (buttons and text boxes) and a script tag, which the HTML(buttons) uses to submit to a database via ajax.
<html>
<head>........</head>
<body>........</body>
<select class="chooseOption">
...
...
</select>
<div class="ajaxResult">
<!-- after successful ajax -->
<!-- HTML Markup here -->
<!-- I'm having to include main.js here again so that HTML matkup can use AJAX -->
</div>
....
....
....
<footer> //include main.js </footer>
This arrangement seems to work fine only that, there's an exponential call to main.js each time an option is selected.
Doing something like this(below) doesn't seem to work, I'm guessing because AJAX is injected into the page and isn't aware of what scripts that are already available on the page?
<script>
var len = $('script').filter(function () {
return ($(this).attr('src') == 'main.js');
}).length;
//if there are no scripts that match, the load it
if (len === 0) {
var url = "main.js";
$.getScript(url);
}
</script>
Is there a simple way around this? To make sure that main.js works across all AJAX requests without having to include it with each request?
Sample main.js content.
Ajax snippet that populates the HTML Markup (buttons and textboxes)
$("#students").on("change", function (e) {
e.preventDefault();
var supervise = this.value;
var faculty = $("#faculty").val();
$.ajax({
method: "POST",
url: 'URL',
dataType: 'html',
data:
{
selectValue: supervise,
faculty: faculty
},
success: function (result) {
$("#ajaxResult").html(result);
}
})
});
When #statement_button from HTML markup returned from select dropdown is clicked
$('#statement_button').click(function (e) {
var student_statement = $("#student_statement").val();
if (student_statement == '') {
alert('Please enter your statement');
return false;
}
var student = $("#student").val();
var statement_button = $(this).attr("value");
$.ajax({
type: "POST",
url: formsUrl,
dataType: 'text',
data:
{
student_statement: student_statement,
student: studentusername,
statement_button: statement_button
},
success: function (result) {
$("#result").text(result);
$("textarea#student_statement").val('');
}
})
});
From the code you posted it looks like you can just delegate the button handling to the .ajaxResult element which is always present in the html (from the initial load).
So just changing how you bind your button handlers should be enough
$("#students").on("change", function (e) {
to
$('.ajaxResult').on('change', '#students', function (e) {
$('#statement_button').click(function (e) {
to
$('.ajaxResult').on('click', '#statement_button', function (e) {
etc..
So the script with the above code is run once in the initial load of the page (in a $(document).ready(..))

Passing parameters between html pages using jquery

I have one html page which contains a jquery function.
<script>
function loadCustomers() {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/cache/getCustomers',
dataType: 'json',
success: function(data) {
var rows = [];
$.each(data,function(id,value) {
rows.push('<tr><td><a href="clientSiteInfo.html?client=">'+id+'</td><td>'+value+'</td></tr>');
});
$('table').append(rows.join(''));
}
});
};
window.onload = loadCustomers;
</script>
I have linked another html page for each row. When each rows populated, the id values has to be passed to the clientSiteInfo.html page.
In the clientSiteInfo.html page i have another jquery function similar to above.
<script>
function loadSites() {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/cache/getSite?clientName='+${param.client},
dataType: 'json',
success: function(data) {
var rows = [];
$.each(data,function(id,value) {
rows.push('<tr><td>'+id+'</td><td>'+value.machine+'</td><td>'+value.state+'</td></tr>');
});
$('table').append(rows.join(''));
}
});
};
window.onload = loadSites;
</script>
in the GET url I try to read client parameter. But it is not passing from my initial page.
What Im doing wrong here? I look for simple solution
jQuery doesn't have a native way to read the url parameters. However, javascript works just fine:
function getParameterByName(name) {
const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' ') );
}
In your code you would just call it as getParameterByName('client')

unable to set result from ajax success to div html in mvc

I have the below code, I'm calling an action and getting a partialviewresult in ajax success.
But I'm unable to set the html to the div-Graph, but I'm getting undefined in alert; alert( $('#div-Graph').html()); The entire html is disappearing...
Any idea on this?
$(document).ready(function () {
$('#ChartTypes').change(function () {
var selectedID = $(this).val();
$.ajax({
url: '/charts/GetChart/4',
type: 'GET',
success: function (result) {
debugger ;
$('#div-Graph').html(result.toString());
alert( $('#div-Graph').html());
}
});
});
});
Kindly let me know if you need any more code parts. Tried a lot for a solution :(
Thanks
Ragesh
You can directly append it to the class/id like this. You can't display the whole div inside the alert box.
success: function (result) {
alert(result);
var res = JSON.stringify(result);
$('#div-Graph').append(res);
}

Ajax post request doesn't work (simple)

I am struggling to make a simple ajax request. I have no idea why it doesn't work.
<script>
function checkdata() {
var reqdata = "aha";
alert(reqdata);
$.ajax({
type: "POST",
url: "https://example.com/cs/test.php",
data: reqdata,
cache: false,
success: function(returnedata) {
alert(returnedata);
}
}); //end of ajax
return true;
}
</script>
<input type="button" value="CheckData" onclick="checkdata();">
The file https://example.com/cs/test.php has one: echo "done"; which works properly. When I navigate to the page with the browser I see just "Done"
What is the problem here? Thanks.
Don't forget to include https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
your code will not work without this
here is something that worked ,, change your function declaration to match this
checkdata = function () {
var reqdata = "aha";
....

Getting error on remove var data

I'm making hover card on click for every users so i did for one and its working but i want this to work on every user like i have given them unique title and based on that the server will get the data of that particular users but the problem is this is working on only 1 links not for all the links...maybe its because var data is kept store (please correct me if i'm wrong) so i tried to do this on ajax cache: false but didn't help then i tried return false;, return data; still not use.
So, here is the users links example :
<a class="hover" title="user101" href="#">John</a>
<a class="hover" title="user102" href="#">Tonya</a>
Ajax :
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$('.hover').click(function () {
var get_val = $('.hover').attr('title');
var data = 'vall=' + get_val + '';
$.ajax({
type: 'POST',
url: 'xx.php',
data: data,
success: function (data) {
box.dialog({
message: data
});
return false;
}
});
});
});
I would do it this way.
HTML
<div class='links'>
<a title="user101" href="#">John</a>
<a title="user102" href="#">Tonya</a>
</div>
JS
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$('.links').on('click', 'a', function (event) {
event.preventDefault();
var get_val = $(this).prop('title');
$.ajax({
type: 'POST',
url: 'xx.php',
data: {vall: get_val},
success: function (data) {
box.dialog({
message: data
});
}
});
});
});
the problem is this is working on only 1 links not for all the links...maybe its because var data is kept store (please correct me if i'm wrong)
you are wrong.. only 1 links is working beacuse you have same id for multiple elements.. each elements should have unique id.
use class instead
<a class="hover" title="user101" href="#">John</a>
<a class="hover" title="user102" href="#">Tonya</a>
and a class selector and return false after ajax success callback function , at the end
$('.hover').click(function () {
var get_val = $('.hover').attr('title');
....
$.ajax({
....
success:function(){
....
}
});
return false;
..
or simply use preventDefault() instead of return false
$('.hover').click(function (e) {
e.preventDefault();
var get_val = $('.hover').attr('title');
.....

Categories