I am using a loading div in my MVC application. so i am getting json result value and showing a kendo grid. Because of more data it is taking time so for that purpose i used this but unfortunately it's not working.
Below is my code
This is my script used in the view
<script type="text/javascript">
$(document).ready(function () {
var action = "#Url.Content("~/Dashboard/ChartInitialDataBinding/")";
$('#spinner').show()
$.getJSON(action, null, function(something)
{
$('#spinner').hide()
});
});
</script>
This is my loading div
<div id="spinner" style="display:none">
Loading...
</div>
Thanks
You should know from documentation, that getJSON() is just wrap above ajax jquery function.
So don't you want to put your spinner not only in this function, but with all ajax requests? I think it's better, becouse you can define this in onle place and don't thik anymoreabout this problem.
In your Layout View just add this script, after your jquery library loaded:
$(document).ready(function () {
$.ajaxSetup({
beforeSend: function () {
$('#spinner').show()
},
complete: function () {
$('#spinner').hide()
},
error: function () {
$('#spinner').hide()
}
});
});
You can read more about $.ajaxSetup here.
Here is a list of things to check/fix:
-add semicolons after $('#spinner').show() and $('#spinner').hide()
-make sure you have included jQuery
-check if spinner is in view when removing "display:none"
Related
fellows! I'm doing some frontend work using doT.js for generating content and jquery-ui for displaying tooltips.
{{##def.defboardtooltip:
<div class='tooltip'>
<!-- some html code -->
<a id='bdetails' href='#'>Click for details</a></div>
</div>
#}}
And how it is used:
<div class="participant" title="{{#def.defboardtooltip}}">
I'm trying to add the event to the a element with jquery as such ():
$(document).ready(function () {
// ...enter code here
$('#bdetails').click(function (e) {
// some code
console.log('fired');
});
});
And I never see the "fired". I'm confused.
jQuery Event delegates are your friend here.
Try:
$(function()
{
$(document).on('click', '#bdetails', function(e)
{
var a = $(this);
});
});
This will filter the event to just your #bdetails element, you can use any valid jQuery seletor here also; e.g., 'a' to delegate all anchor tag clicks.
The main page is an .aspx file. I'm trying to generate a popup. When user clicks the Send Email, a javascript on the page calls the openEmailPopup function, shown below.
function openEmailPopup(taskId, popupElementName, gridElementName) {
$("#" + popupElementName).dialog({
width: 1300,
height: 500,
draggable: false,
resizable: false,
modal: true,
open: function () {
$.get("/Resources/Sendmail", function (data) {
$('#masterPvlEmailGrid').html(data);
});
//more code here...
}
});
}
The problem is that the SendEmail.cshtml file depends on some javascript file.
<script language="javascript" src="../../Scripts/file1.js"></script>
<script language="javascript" src="../../Scripts/file2.js"></script>
<script language="javascript" src="../../Scripts/file3.js"></script>
<script language="javascript">
var sendEmailViewModel = new SendEmailViewModel();
var seUploadFilesViewModel = new UploadFilesViewModel();
$(function () {
sendEmailViewModel.Init();
});
</script>
When the response of the ajax call is returned, those above javascript don't execute. There are two solutions for that. Either I add javascript reference on the .aspx page. However, to do that, I also need to add a content placeholder element in the master page. The big problem with that is the actual aspx file has a master page that is nested 2 times deep in other master pages.
Many people relies on those master pages, I want to make sure that there are solutions to that before I touch them.
What about loading and executing those javascript file dynamically? I've done some researches but, I still don't understand how it work with jquery.
Any idea?
EDIT
This is how I'm calling those file.
$.getScript("/Scripts/file1.js", function () {
});
$.getScript("/Scripts/file2.js", function () {
});
$.getScript("/Scripts/file3.js", function () {
});
When I check google tools, I see that all the file being loaded.
You could use jQuery's getScript method, which allows you to load javascript over HTTP and then execute it:
http://api.jquery.com/jquery.getscript/
You might want to look at an AMD like RequireJS (http://requirejs.org/). RequireJS is designed to load JavaScript resources as needed, so you would not need to load them in the main page. In your example, all three files could be returned asynchronously for your popup form.
I am not sure if this will solve your problem because I cannot test it right now. Could you try this out?
function openEmailPopup(taskId, popupElementName, gridElementName) {
$("#" + popupElementName).dialog({
width: 1300,
height: 500,
draggable: false,
resizable: false,
modal: true,
open: function() {
var deferreds = [];
//Store a deferred into the array
function addDeferred(url) {
deferreds.push(
$.getScript(url)
.done(function() {
console.log("Module loaded: " + url);
})
.fail(function(ex) {
console.error(ex);
})
);
};
//Call the scripts
addDeferred("/Scripts/file1.js");
addDeferred("/Scripts/file2.js");
addDeferred("/Scripts/file3.js");
//When all the scripts has been loaded....
$.when.apply($, deferreds)
.done(function() {
$.get("/Resources/Sendmail", function(data) {
$('#masterPvlEmailGrid').html(data);
});
})
.fail(function(ex) {
console.log(ex);
});
//more code here...
}
});
}
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
I know this question might be repeated but my query is different let me explain, I have a drop down in page and by selecting value in drop down list,and I click on submit button.. I want by click on submit button I need to load partial view in tag that is list of records of selected drop down list value.
i tried this :
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Search/MDLNoDataList")',
data: mdlno,
success: function (data) { $("#viewlist").innerHtml = data; }
});
});
but not getting result And I m using these many jquery plugins
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
If i understand correctly, below is what you need to do.
HTML Example:
<div id="records">
</div>
<select id="ddlRecordType">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<input type="submit" value="Load Records" id="btn-submit" />
jQuery Code
$(document).ready(function(){
$('#btn-submit').click(function(){
var selectedRecVal=$('#ddlRecordType').val();
$('#records').load('/LoadRecords?Id='+selectedRecVal);
return false; // to prevent default form submit
});
});
Here ?Id= is the query string parameter passed to server to get
the selected item in dropdown.
Edit: The below answer was added, as the question content changed from initial post
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Action("MDLNoDataList","Search")',
data: mdlno,
success: function (data) {
// $("#viewlist")[0].innerHtml = data;
//or
$("#viewlist").html(data);
}
});
return false; //prevent default action(submit) for a button
});
Make sure you cancel the default action of form submission by returning false from your click handler:
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Action("MDLNoDataList", "Search")',
data: mdlno,
success: function (data) {
$("#viewlist").html(data);
}
});
return false; // <!-- This is the important part
});
And if you are using the WebForms view engine and not Razor make sure you use the correct syntax to specify the url:
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '<%= Url.Action("MDLNoDataList", "Search") %>',
data: mdlno,
success: function (data) {
$("#viewlist").html(data);
}
});
return false; // <!-- This is the important part
});
If you do not return false, the form is simply submitted to the server when you click on the submit button, the browser redirects away from the page and obviously your AJAX call never has time to execute.
You will also notice some improvements I made to your original code:
Using the Url.Action helper when pointing to a server side controller action in order to take into account routes defined in your application.
Using jQuery's .html() method instead of innerHTML to set the contents of a given element.
You need AJAX for this purpose.
$.get(url, data, function(data) { $(element).append(data) });
and Partial View that is vague.
element {
overflow:hidden;
}
I would like to prevent the default behaviour of a click on a link. I tried the return false; also javascript:void(0); in the href attribute but it doesn’t seem to work. It works fine in Firefox, but not in Chrome and IE.
I have a single tab that loads via AJAX the content which is a simple link.
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
},
success: function() {
alert('hello');
$('#lk').click(function(event) {
alert('Click Me');
event.preventDefault();
return false;
});
}
},
load: function(event, ui) {
$('a', ui.panel).click(function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
return false;
});
}
});
});
</script>
<body>
<div id="tabs">
<ul>
<li>Link</li>
</ul>
</div>
</body>
The content of linkChild.htm is
Click Me
So basically when the tab content is loaded with success, a click event is attached to the link “lk”. When I click on the link, the alert is displayed but then link disappears. I check the HTML and the element is actually removed from the DOM.
$('#selector').click(function(event) {
event.preventDefault();
});
The event object is passed to your click handler by default - you have to have something there to receive it. Once you have the event, you can use jQuery's .preventDefault() method to cancel the link's behavior.
Edit:
Here's the fragment of your code, corrected:
$('a', ui.panel).click(function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
return false;
});
Notice the addition of the word 'event' when creating the anon function (or you could use just e, or anything else - the name is unimportant, the fact there's a var there is.