This is a migrated thread and some comments may be shown as answers.

[Solved] Problem Ajax binding -Jquery

1 Answer 37 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Ahmed asked on 26 Jan 2012, 08:27 PM

Hello
Hello, i am new in telerik
i have a page that contains a grid and a map (google map)
for the google map i use google map api v3 --> i need two scripts

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>

in my _Layout.cshml, i make Jquery to false

<!DOCTYPE html>

<html>

<head runat="server">

<title>@ViewBag.Title</title>

@(Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("Site.css")

.Add("telerik.common.css")

.Add("telerik.vista.css")

.Combined(true)

.Compress(true)))

@RenderSection("HeadContent", required:false)

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>

</head>

<body>

<div class="page">

<header>

<div id="title">

<h1>Meteo Reseau</h1>

</div>

@(Html.Telerik().Menu()

.Name("menu")

.Items(menu => {

menu.Add().Text("Home").Action("Index", "Home");

menu.Add().Text("About").Action("About", "Home");

menu.Add().Text("Derniers Emplacements connus").Action("Index", "ListeDernierEmplacementConnu");

}))

</header>

<section id="main">

@RenderBody()

</section>

<footer>

</footer>

</div>

@(Html.Telerik().ScriptRegistrar().jQuery(false))</body>

</html>

my controller

private IQueryable<LocalisationTemporaire> LocModel()

{

return new GpsContext().LocalisationTemporaires;

}

[GridAction]

public ActionResult IndexAjax()

{

return View(new GridModel(LocModel()));

}

My view

@model IEnumerable<Model.LocalisationTemporaire>

@using System.Threading;

@using System.Globalization;

@{

ViewBag.Title = "Liste Derniers Emplacements connus";

Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");

}

@(Html.Telerik().Grid(Model)

.Name("Grid")

.Resizable(resizing => resizing.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Columns(columns =>

{

columns.Bound(o => o.Date).Format("{0:MM/dd/yyyy}").Width(140);

columns.Bound(o => o.LatitudeDecimal).Width(140);

columns.Bound(o => o.LongitudeDecimal).Width(140);

columns.Bound(o => o.Vitesse);

columns.Bound(o => o.Heading);

columns.Bound(o => o.Odometer);

columns.Bound(o => o.Idle_time);

columns.Bound(o => o.Event_id);

columns.Bound(o => o.input_status);

columns.Bound(o => o.BoitierGps.UnitId).Title("Id Boitier");

}).DataBinding(dataBinding => dataBinding.Ajax().Select("IndexAjax", "ListeDernierEmplacementConnu"))

.Filterable()

.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))

.Pageable()

.Scrollable(scrolling => scrolling.Height(250))

.Groupable()

.Scrollable()

)

<script language="javascript" type="text/javascript">

$(document).ready(function () {

var bounds = new google.maps.LatLngBounds();

var options = {

zoom : 14,

mapTypeId: google.maps.MapTypeId.TERRAIN

};

var googleMap = new google.maps.Map($("#map")[0],options);

var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });

@foreach (var marker in Model)

{

<text>

var point = new google.maps.LatLng(@marker.LatitudeDecimal, @marker.LongitudeDecimal);

bounds.extend(point);

var marker = new google.maps.Marker({

position: point,

map: googleMap,

icon:'/Content/images/default_marker.png',

html: 'lat:'+'@marker.LatitudeDecimal'+' '+'long:'+'@marker.LongitudeDecimal'+'<p>'+'Id Boitier:'+'@marker.BoitierGps.UnitId'+'</p>'

});

google.maps.event.addListener(marker, "click", function () {

infoWindow.setContent(this.html);

infoWindow.open(googleMap, this);

});

</text>

}

googleMap.fitBounds(bounds);

});

</script>

<h2>Google Map</h2>

<div id="map" style="width: 1200px; height: 650px;">

</div>

My problem is that I can either view the map and I get error 500 for ajax data binding in the grid

when i delete this two lines from the _layout --> the ajax data binding works fine but the google map doesn't work anymore

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>

any help please

[Solved] Problem Ajax binding -Jquery

1 Answer, 1 is accepted