I have the following JavaScript,
$(".refresh").on("click touch", function () {
$.get($("a.suggest-date").attr('href') + '#suggestedDate', null, function (result) {
console.log(result);
$("#ajax-loaded").html(result)
});
return false;
});
The $.get gets the response of,
<!DOCTYPE html>
<html class="">
<head>
<title>Suggest</title>
</head>
<body>
<div id="suggestedDate">
<script type="text/javascript">
var map;
var places;
var iw;
var markers = [];
function initialize() {
var options = {
zoom: 15,
center: new google.maps.LatLng(51.45390,-0.12246),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
var mapCanvas = document.getElementById('map_canvas');
map = new google.maps.Map(mapCanvas, options);
var myLatlng = new google.maps.LatLng(51.45390,-0.12246);
markers[0] = new google.maps.Marker({
position: myLatlng,
animation: google.maps.Animation.DROP,
icon: 'http://maps.gstatic.com/intl/en_us/mapfiles/marker.png'
});
google.maps.event.addListener( markers[0], 'click', '');
dropMarker(markers[0], 0 * 100);
//addResult(results[i], i);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
if (markers[i]) {
markers[i].setMap(null);
delete markers[i]
}
}
}
function dropMarker(marker, delay) {
window.setTimeout(function() {
marker.setMap(map);
}, delay);
}
function addResult(result, i) {
var results = document.getElementById('results');
var tr = document.createElement('tr');
tr.style.backgroundColor = i % 2 == 0 ? '#F0F0F0' : '#FFFFFF';
tr.onclick = function() {
google.maps.event.trigger(markers[i], 'click');
};
var iconTd = document.createElement('td');
var nameTd = document.createElement('td');
var icon = document.createElement('img');
icon.src = result.icon;
icon.className = 'placeIcon';
var name = document.createTextNode(result.name);
iconTd.appendChild(icon);
nameTd.appendChild(name);
tr.appendChild(iconTd);
tr.appendChild(nameTd);
results.appendChild(tr);
}
function clearResults() {
var results = document.getElementById('results');
while (results.childNodes[0]) {
results.removeChild(results.childNodes[0]);
}
}
function getDetails(result, i) {
return function() {
places.getDetails({
reference: result.reference
}, showInfoWindow(i));
}
}
function showInfoWindow(i) {
return function(place, status) {
if (iw) {
iw.close();
iw = null;
}
if (status == google.maps.places.PlacesServiceStatus.OK) {
iw = new google.maps.InfoWindow({
content: getIWContent(place)
});
iw.open(map, markers[i]);
}
}
}
function getIWContent(place) {
var content = '<table style="border:0"><tr><td style="border:0;">';
//content += '<img class="placeIcon" src="' + place.icon + '"></td>';
content += '<td style="border:0;"><b>';
content += 'PLACE NAME' + '</a></b>';
content += '</td></tr></table>';
return content;
}
//show_place();
</script>
<div class="date-wrapper">
<header>
<h3>Suggest A Date</h3>
<a href="#" class="close-date">
<img src="http://dev64238.loveflutter.com/assets/img/close-suggest-date.jpg" alt="close" />
</a>
</header>
<div class="date-details">
<strong> Windmill Brixton</strong><br />
22 Bleinheim Gdns.,Brixton,Greater London,SW2 5BZ <br>Tel: +442086710700<br/>
<span class="type">Music Venue</span>
</div>
<a href="" class="suggest-message">Suggest this date</a>
<div class="clear"></div>
<div id="map_canvas"></div>
<div class="suggestions">
<header>
<h3>Tips</h3>
</header>
<ul>
<li>
<div class="thumbnail">
<img src="https://irs2.4sqi.net/img/user/40x40/BX4LJ4AWOITAKFEP.png" alt="user"/>
</div>
<div class="content">
<strong>Time Out London</strong> <span class="date">Mar 28, 2012</span><br />
The Windmill?s been revelling in its rough-around-the-edges eccentricity for years, its unprepossessing exterior a cloak for its dedication to new leftfield music. </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs2.4sqi.net/img/user/40x40/CZ4LAAECPOPSLWFO.jpg" alt="user"/>
</div>
<div class="content">
<strong>lojinx</strong> <span class="date">Nov 14, 2011</span><br />
Quite possibly the best music venue in London. </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs0.4sqi.net/img/user/40x40/DSZOC3K4QKAPXSJR.jpg" alt="user"/>
</div>
<div class="content">
<strong>Sonja F.</strong> <span class="date">Sep 17, 2011</span><br />
Voted one of the best live music venues in London </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs3.4sqi.net/img/user/40x40/WA34MTKMKJO1KCHQ.jpg" alt="user"/>
</div>
<div class="content">
<strong>Thrash Hits</strong> <span class="date">Jan 26, 2011</span><br />
Famous for the rock 'n' roll all-dayers with the saltiest barbecues ever. It's a(nother) good excuse to drink more beer. Great gigs happen here. Plus there is a dog on the roof. A Roof Dog. </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs0.4sqi.net/img/user/40x40/EKEP42S0ULCMYI44.jpg" alt="user"/>
</div>
<div class="content">
<strong>Drowned in Sound</strong> <span class="date">Jan 26, 2011</span><br />
Home of some early DiS nights and alldayers. Great little venue. Usually a free bbq on Sundays, and yeah, DOG ON THE ROOF! Like, a real Dog. </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs2.4sqi.net/img/user/40x40/YHCPQIZ0W31MZBPM.jpg" alt="user"/>
</div>
<div class="content">
<strong>Jonathan D.</strong> <span class="date">Nov 24, 2010</span><br />
Mind the Rottweiler on the roof! That's a bit mental! </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs3.4sqi.net/img/user/40x40/1F3XOCML0ZKKQJOU.jpg" alt="user"/>
</div>
<div class="content">
<strong>aurora</strong> <span class="date">Sep 08, 2010</span><br />
Looking forward to the pine hill haints gig </div>
</li>
<li>
<div class="thumbnail">
<img src="https://irs1.4sqi.net/img/user/40x40/4N5O4KYF54WUYBCW.jpg" alt="user"/>
</div>
<div class="content">
<strong>Jack P.</strong> <span class="date">Jul 18, 2010</span><br />
Quite simply Brixton's finest venue... Hook up a summer BBQ/ roofdog spotting/ awesome gig for good times... </div>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="refresh">
<a href="" class="refresh-date"><img src="http://dev64238.loveflutter.com/assets/img/refresh-date.png" alt="refresh"/></a>
</div>
<div class="accreditation">
<img src="http://dev64238.loveflutter.com/assets/img/date-accreditation.png" alt="accreditation"/>
</div>
</div>
</div>
<script>
initialize();
</script>
<div id="send-date">
<header>
<h3>Suggest A Date</h3>
<a href="#" class="close-date">
<img src="http://dev64238.loveflutter.com/assets/img/close-suggest-date.jpg" alt="close" />
</a>
</header>
<form action="http://dev64238.loveflutter.com/ajax/suggestion" name="save_suggestion" id="save_suggestion" method="post">
<input type="hidden" name="id" id="id" value="4be57938bcef2d7fc3ce03e5" />
<input type="hidden" name="name" id="name" value="Windmill Brixton" />
<input type="hidden" name="phone" id="phone" value="+442086710700" />
<input type="hidden" name="address" id="address" value="22 Bleinheim Gdns." />
<input type="hidden" name="lat" id="lat" value="51.45390" />
<input type="hidden" name="lng" id="lng" value="-0.12246" />
<input type="hidden" name="postcode" id="postcode" value="SW2 5BZ" />
<input type="hidden" name="city" id="city" value="Brixton" />
<input type="hidden" name="state" id="state" value="Greater London" />
<input type="hidden" name="country" id="country" value="United Kingdom" />
<input type="hidden" name="cc" id="cc" value="GB" />
<input type="hidden" name="type" id="type" value="Music Venue" />
<input type="hidden" name="tips" id="tips" value="8" />
<input type="hidden" name="user_to" id="user_to" value="597" />
<fieldset>
<textarea name="message" class="wysiwyg" id="messages_message">How about we meet up at Windmill Brixton, 22 Bleinheim Gdns.,Brixton,Greater London,SW2 5BZ. Sound good? <a href="http://dev64238.loveflutter.com/dating_place/541" class="suggest-date-msg">See it on map</a></textarea>
</fieldset>
<div class="clear"></div>
<div id="bottom">
<table>
<tr>
<td><input name="username" id="messages_username" value="john_dig" type="hidden">
<input type="submit" class="button green rounded_5 small" value="Suggest This Date" id="senddate"/>
<em>or</em>
<a href="" id="hide-send">Back to Map</a></td>
</tr>
</table>
</div>
</form>
</div>
</body>
I cannot work out why the hell, the return data is getting inserted into the #ajax-loaded element. Can anyone tell me why this is not working? It works perfectly in FF/Chrome/Safari.
Make ajax cache false as IE has caching issues with ajax