I have a partial view in ASP.NET MVC 3, with a script:
<script type="text/javascript" >
$(function () {
$("#tagbox").autocomplete({
source: "/Tag/GetTags",
minLength: 1,
select: function (event, ui) {
$("tagbox").val(ui.item.value);
}
});
});
</script>
when I load the patial view in my content div, the auto complete won't work, unless I remove the '$(function () {... }) so the script looks like this:
<script type="text/javascript" >
$("#tagbox").autocomplete({
source: "/Tag/GetTags",
minLength: 1,
select: function (event, ui) {
$("tagbox").val(ui.item.value);
}
});
</script>
But when loading it as new view by accessing the URL, everything works just fine.
Also I have those references on my main view:
<script src="http://static.jsbin.com/js/prod/jsbin-3.4.4.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Second, when I change the order between the references, my ajax call opens as a new view and not as partial. Maybe one of them is unnecessary or something?
Please follow the below link it will clearly explain about the jquery $(function(){}.
$(function(){}
Related
I am trying to use ng-grid using the following tutorial.
http://angular-ui.github.io/ng-grid/
Here is my View
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/angular.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/angular-resource.js")"></script>
#*<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>*#
<script type="text/javascript" src="#Url.Content("~/Scripts/ng-grid-2.0.7.min.js")"></script>
<script src="~/Scripts/PostsController.js"></script>
<script src="~/Scripts/postreq.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/ng-grid.min.css" />
<div data-ng-controller="PostsController">
<div class="gridStyle" data-ng-grid="gridOptions"></div>
</div>
Here is my Angular code
function PostsController($scope, $http) {
$http({ method: 'GET', url: '/api/request' }).
success(function (data, status, headers, config) {
$scope.posts = data;
}).
error(function (data, status, headers, config) {
$scope.error = "An Error has occured while loading posts!";
$scope.loading = false;
});
$scope.gridOptions = { data: 'posts' };
}
However, when i run the application i see blank square in browser and there is no error showing in the console.
Please help me to fix this issue.
FYI: I checked API response directly in browser and it shows with data.
It seems to me that you are missing some steps of the tutorial you are following :
Where you declare your app module, add ngGrid:
angular.module('myApp',['ngGrid']);
I do not see your module declaration anywhere.
Do you have ng-app="myApp" defined at the top of your page?
I also noticed that you do not have a css class defined for "gridStyle". "gridStyle" is not part of the ng-grid css.
Sounds odd, but this worked for me by using a timeout. Try it like this:
setTimeout(function () {
$http.get('/api/request')
.success(function (data, status) {
$scope.posts = data;
})
.error(function (data, status) {
alert(status);
});
}, 100);
I am just beginning to learn AJAX and am trying to build a cascading dropdown that pulls information from a database. My AJAX.Updater code works, but not only for one of the dropdowns. How do I make multiple AJAX.Updater calls?
<script type="text/javascript" src="jQuery/jquery-latest.js"></script>
<script type="text/javascript" src="jQuery/prototypejs.js"></script>
<script language="javascript">
jQuery(document).ready(function()
{
jQuery('#regiondropdown').change(function() {
dropdowns(jQuery(this).val(),"foo");
});
jQuery('#foodropdown').change(function() {
dropdowns(jQuery(this).val(),"bar");
});
}
);
function dropdowns(str,type)
{
if (type=="foo") {
new Ajax.Updater('foo', 'foo_dropdown.php', { method: 'get', parameters: {foo: str} });
} else if (type=="bar") {
new Ajax.Updater('bar', 'bar_dropdown.php', { method: 'get', parameters: {bar: str} });
}
}
</script>
I can't see what it is so I suggest you fire up your debugger.
1) Check the value of jQuery(this).val() for both cases. "this" might not be what you believe in Javascript.
2) Check what happens if you switch the if.. and else... in dropdowns. Maybe there is a (, { or ; out of place.
HTH
i am working on an asp.net mvc3 application.
I am trying to load a google map inside a partial view but it is not working:
My partial view _Map.cshtml
<style type="text/css">
#map_canvas
{
position:absolute;
top:40px;
left:12px;
width:576px;
height: 450px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="sTitle">Name</div>
<div id="map_canvas"></div>
<script type="text/javascript">
var map;
$(document).ready(function () {
var map;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
The map is loaded Via an AJAX Call:
$.ajax({
type: 'GET',
url: '#Url.Action("GetMapById", "Map")',
data: { 'id': sId },
success: function (html) {
$("#content").html(html);
},
complete: function () {
},
error: function () {
alert("There was an error opening the Map. Please try again or contact an administrator");
}
});
The partial is loaded in a div named Content
And in the controller I just return the Partial View
return PartialView("_Map");
The View is loading but the map is not visible.
I used Firebug to track the problem and I got this error:
“google is not defined”
Any idea about the problem?
Thanks a lot
I solved this by putting this
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
in the Layout page nad not in the subview
You have to load google map in this way:
<script type="text/javascript">
var map;
google.load("maps", "3", { other_params:"sensor=false" });
$(document).ready(function () {
And you reinitialize "var map" two times.
I didn't want to load the maps in a Layout page... Doing that would mean that if the script was taking long to load, it would slow the whole page and besides, if it is not needed there, then why make the browser download it?
To get around that, I found that you can load the maps API in your partial view like this:
$.getScript('http://maps.googleapis.com/maps/api/js',function (){
google.maps.event.addDomListener(window, 'load', initialize);
});
i hope anybody can help me ...
index.php (http://jsbin.com/elocek)
<script type="text/javascript">
$(document).ready(function() {
$('.open').popupWindow({
windowURL:'popup.php',
windowName:'external'
});
});
</script>
popup.php (http://jsbin.com/agepog)
<script type="text/javascript">
$(document).ready(function() {
$('.close').click(function() {
window.close();
});
});
</script>
so you can see 2 files, the "index.php" is only a snippet from the whole one but you can see the jquery etc. my problem is i would open a popup/modal-box whatever - see the new window and would like to reload/refresh/replace the mainwindow (index.php) if i close the popup/modal-box ... is this possible?
the index.php has some additional vars e.q. index.php?site=news&text=....
(sorry for my bad english)
Try this
$(document).ready(function() {
$('.close').click(function() {
window.opener.location.reload(true);
window.close();
});
});
I have a JQuery function/script that I'm using for posts on a blog that upon hover of the post image shows the post title, excerpt, and link.
Additionally, I have an AJAX Fade Out/Fade In pagination script running and when I go to the next set of posts in the pagination, the first JQuery script doesn't run any longer. I know I need to be using the .live function somehow for jQuery, however I can't seem to figure it out. Here are the two scripts.
<script type="text/javascript">
$(function() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
});
</script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#postPagination a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#page-wrap').fadeIn(500); });
});
});
</script>
Thanks for your help.
you could put the capslide command into a function and call it after each ajax load:
function addCappslide() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
}
$(function() {
addCappslide(); // call it once the page has loaded
$('#postPagination a').live('click', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){
jQuery('#page-wrap').fadeIn(500, addCappslide() ); // call it after each ajax load again after it faded in
});
});
});