I am having some trouble having my link function to execute javascript.
link:
<a class="glossyBtn" id="saveButton">Save</a>
Script:
<script type="text/javascript">
$(function (){
$('form').submit(function () {
$('#saveButton').attr('disabled', 'disabled');
});
});
</script>
$('form').submit() is fired when you submit a form (usually with <button type="submit">). Your button is not of submit type.
You may achieve it adding the following onclick to your <a> element: onclick="$('form').sumbit();" or add the following to your JS code
$('#saveButton').click(function{
$('#saveButton').attr('disabled', 'disabled');
$('form').submit();
})
Related
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"
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.
his question is asked earlier here, but I didn't get those answers to work. I work with a button:
<div data-role="popup" id="test_popup">
<p>this is a test</p>
</div>
test
And I tried putting
<script type="text/javascript">
$(document).on('popupafteropen', '.ui-popup', function() {
setTimeout(function () {
$(this).popup('close');
}, 2000);
});
</script>
in the head section, but that didn't work. What am I doing wrong?
(I have multiple popups/buttons on the page)
By the time setTimeout executes the function, $(this) doesn't return popup. Instead, you should retrieve popup before running setTimeout.
$(document).on('popupafteropen', '.ui-popup', function () {
var popup = $(this);
setTimeout(function () {
popup.popup('close');
}, 2000);
});
Demo
I'm trying to implement the solution provided in this question here:
How to pass Model Value through ActionLink
So in my view I have an action link
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new {#id="check"},null)
And in a Javascript file I have :
$(function ()
{
$("#check").click(function (e) {
e.preventDefault();
}
I've cut the function down to just preventing the default action of the action link.
In the view I've also referenced the java script files
<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/GetRegistrationPlate.js" type="text/javascript"></script>
However when I click on the action link the default method continues to fire.
What might I have missed?
For one there are many syntax errors. Try this
$(function () {
$("#check").click(function (e) {
e.preventDefault();
return false;
});
});
Edit: Also, change the ActionLink to
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new { #id = "check" }, new { #id = "check" })
The first id is for the route, the second id is for the html element.
I have the link below:
<a href='#Url.Action("MyAction","MyController", new SearchCriteriaAffaire { Page=3, PageSize=5 }, null)'>Test1</a>
This links works. I received my search criteria in my action page.
Now, I have the button with javascript below:
<button id="buttonTest2">Test2</button>
<script language="javascript">
$("#buttonTest2").click(function () {
document.location = '#Url.Action("MyAction","MyController", new SearchCriteriaAffaire { Page=3, PageSize=5 }, null)';
});
</script>
This button doest' work. I mean, I didn't receive my search criteria in my action page and I don't know why??
It drives me crazy!
Test1 and Test2 produces exactly the same url (I check in 'view source code' by right clicking on the html page):
/?SortBy=None&Page=3&PageSize=5'
Any help will be greatly appreciated.
try this :
<button id="buttonTest2">Test2</button>
<script language="javascript">
$("#buttonTest2").click(function () {
document.location = '#Html.Raw(Url.Action("MyAction","MyController", new SearchCriteriaAffaire { Page=3, PageSize=5 }, null))';
});
</script>