I defined a bootstrap 5 carousel using javascript.
When I take the pure generated html from the browser, it works fine. When I generate html using java script is does not start rotating by default.
Only after I clicked on the next or prev arrow to rotate slide manually it starts rotating. Ideas why?
Below code should work in fiddle etc per copy and paste.
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="fontawesome\css\all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
class FeaturedContentComponent {
constructor(componentId) {
this.componentId = componentId;
this.service_data;
this.carouselId = componentId + "_carousel"
this.carouselContentId = componentId + "_carousel_content";
this.carouselIndicatorId = componentId + "_carousel_inidcators";
}
render_component(){
// create the static layout
this.make_layout();
var self = this;
// mock service used
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/1",
method: 'GET',
success: function(data, status){
//mock data
self.service_data = [
{
"link": "https://example.com",
"description": "Description A",
"headline": "Headline A"
},
{
"link": "https://example.com",
"description": "Description B",
"headline": "Headline B"
},
{
"link": "https://example.com",
"description": "Description C",
"headline": "Headline C"
},
{
"link": "https://example.com",
"description": "Description D",
"headline": "Headline D"
}
];
var active = " active";
var indicatorStatus = "class='active' aria-current='true'";
for (var i = 0; i < self.service_data.length; i++){
if(i>0){
active = "";
indicatorStatus = "";
}
let x = "<div class='carousel-item" + active + "'> \
<div class='carousel-caption'> \
<h3>" + self.service_data[i].headline + "</h3> \
<p>" + self.service_data[i].description + "</p> \
<a class='btn btn-primary btn-sm' href='" + self.service_data[i].link + "' role='button' target='_blank'>Take a look <i class='fas fa-external-link-alt'></i></a> \
</div> \
</div>";
$("#" + self.carouselContentId).append(x);
let y = "<button type='button' data-bs-target='#" + self.carouselId + "' data-bs-slide-to='"+ i + "'" + indicatorStatus + "aria-label='Slide 1'></button>"
$("#" + self.carouselIndicatorId).append(y);
}
}
});
}
make_layout(){
let static_html = "\
<div> \
<div> \
<style> \
#" + this.carouselId + "{ \
background-color: #000; \
} \
.carousel{ \
margin-top: 1px; \
} \
.carousel-inner{ \
height: 200px; \
} \
.carousel-caption{ \
color: #fff; \
top: 50%; \
} \
</style> \
<div> \
<div id='"+ this.carouselId + "' class='carousel slide' data-bs-ride='carousel'> \
<div id='" + this.carouselIndicatorId + "' class='carousel-indicators'></div> \
<div id='" + this.carouselContentId + "' class='carousel-inner'></div> \
<a class='carousel-control-prev' href='#"+ this.carouselId + "' role='button' data-bs-slide='prev'> \
<span class='carousel-control-prev-icon' aria-hidden='true'></span> \
<span class='visually-hidden'>Previous</span> \
</a> \
<a id='test' class='carousel-control-next' href='#"+ this.carouselId + "' role='button' data-bs-slide='next'> \
<span class='carousel-control-next-icon' aria-hidden='true'></span> \
<span class='visually-hidden'>Next</span> \
</a> \
</div> \
</div> \
</div> \
</div> \
";
$('#' + this.componentId).append(static_html);
}
}
var fcc = new FeaturedContentComponent('featured');
$(document).ready(function() {
fcc.render_component();
});
</script>
</head>
<body class="m-5">
<div id='featured'></div>
</body>
The bootstrap.js initializes elements according to data-bs-* attributes when it loads. That is why the correct place to include it is just before the closing </body> tag after all the content has loaded. (https://getbootstrap.com/docs/5.0/getting-started/introduction/#js)
When you add BS elements after the page loads, you must initialize the JavaScript behaviors manually. (https://getbootstrap.com/docs/5.0/components/carousel/#usage)
So you need another method in your object to initialize and start cycling the carousel.
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="fontawesome\css\all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
class FeaturedContentComponent {
constructor(componentId) {
this.componentId = componentId;
this.service_data;
this.carouselId = componentId + "_carousel"
this.carouselContentId = componentId + "_carousel_content";
this.carouselIndicatorId = componentId + "_carousel_inidcators";
}
render_component() {
// create the static layout
this.make_layout();
var self = this;
// mock service used
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/1",
method: 'GET',
success: function(data, status) {
//mock data
self.service_data = [{
"link": "https://example.com",
"description": "Description A",
"headline": "Headline A"
},
{
"link": "https://example.com",
"description": "Description B",
"headline": "Headline B"
},
{
"link": "https://example.com",
"description": "Description C",
"headline": "Headline C"
},
{
"link": "https://example.com",
"description": "Description D",
"headline": "Headline D"
}
];
var active = " active";
var indicatorStatus = "class='active' aria-current='true'";
for (var i = 0; i < self.service_data.length; i++) {
if (i > 0) {
active = "";
indicatorStatus = "";
}
let x = "<div class='carousel-item" + active + "'> \
<div class='carousel-caption'> \
<h3>" + self.service_data[i].headline + "</h3> \
<p>" + self.service_data[i].description + "</p> \
<a class='btn btn-primary btn-sm' href='" + self.service_data[i].link + "' role='button' target='_blank'>Take a look <i class='fas fa-external-link-alt'></i></a> \
</div> \
</div>";
$("#" + self.carouselContentId).append(x);
let y = "<button type='button' data-bs-target='#" + self.carouselId + "' data-bs-slide-to='" + i + "'" + indicatorStatus + "aria-label='Slide 1'></button>"
$("#" + self.carouselIndicatorId).append(y);
}
}
});
}
make_layout() {
let static_html = "\
<div> \
<div> \
<style> \
#" + this.carouselId + "{ \
background-color: #000; \
} \
.carousel{ \
margin-top: 1px; \
} \
.carousel-inner{ \
height: 200px; \
} \
.carousel-caption{ \
color: #fff; \
top: 50%; \
} \
</style> \
<div> \
<div id='" + this.carouselId + "' class='carousel slide' data-bs-ride='carousel'> \
<div id='" + this.carouselIndicatorId + "' class='carousel-indicators'></div> \
<div id='" + this.carouselContentId + "' class='carousel-inner'></div> \
<a class='carousel-control-prev' href='#" + this.carouselId + "' role='button' data-bs-slide='prev'> \
<span class='carousel-control-prev-icon' aria-hidden='true'></span> \
<span class='visually-hidden'>Previous</span> \
</a> \
<a id='test' class='carousel-control-next' href='#" + this.carouselId + "' role='button' data-bs-slide='next'> \
<span class='carousel-control-next-icon' aria-hidden='true'></span> \
<span class='visually-hidden'>Next</span> \
</a> \
</div> \
</div> \
</div> \
</div> \
";
$('#' + this.componentId).append(static_html);
}
init_carousel() {
// select the element
let myCarousel = document.querySelector('#' + this.carouselId)
// initialize Carousel
let carousel = new bootstrap.Carousel(myCarousel)
// start animation
carousel.cycle()
}
}
var fcc = new FeaturedContentComponent('featured');
$(document).ready(function() {
fcc.render_component();
fcc.init_carousel();
});
</script>
</head>
<body class="m-5">
<div id='featured'></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Set attribute data-bs-ride="carousel" on your tag that contains class carousel. This will make the carousel play automatically once it is loaded. Read more in the documentation: https://getbootstrap.com/docs/5.2/components/carousel/#options.
Related
We are seeking to create a snapshot of all our FogBugz data however the GUI only seems to allow to export the top level list of cases, not their detail/attachments. Searching around the only solutions I can find relate to apps that are now out of date.
I found this very hard to find any help on but eventually I figured out how to write a script to do this and wanted to share it. Please note I'm not a Python programmer nor a HTML/CSS guy so no flaming please!
It started as a sample script from their help site and I adapted it to include attachments and to be stand alone.
First download and install Python3. Then pip install fogbugz and jinja2. Place these two files in your python directory, fillin the variables (including the token half way down the script) and then run backit.
1- backit.py
from fogbugz import FogBugz
import sys
from jinja2 import Template
import os
import urllib
def main():
S_FOGBUGZ_URL = 'https://whatever.fogbugz.com/'
S_EMAIL = 'email'
S_PASSWORD = 'pass'
MAX_BUGS = 9999
TEMPLATE_FILE = 'C:\\Users\\zzz\\AppData\\Local\\Programs\\Python\\Python36\\fbBackupTemplate.html'
fb = FogBugz(S_FOGBUGZ_URL)
fb.logon(S_EMAIL, S_PASSWORD)
resp = fb.search(q='type:"Cases"',
cols='ixBug',
max=MAX_BUGS)
tmpl = Template(open(TEMPLATE_FILE,'r').read())
for case in resp.cases.findAll('case'):
ixBug = int(case['ixBug'])
print(ixBug)
respBug = fb.search(q='%s' % ixBug,cols ='sTitle,sPersonAssignedTo,sProject,sArea,sCategory,sPriority,events')
xmlBug = respBug.cases.findAll('case')[0]
bug = {}
bug['ixBug'] = int(xmlBug['ixBug'])
bug['sTitle'] = xmlBug.sTitle.string if xmlBug.sTitle.string else ''
bug['sPersonAssignedTo'] = xmlBug.sPersonAssignedTo.string if xmlBug.sPersonAssignedTo.string else ''
bug['sProject'] = xmlBug.sProject.string if xmlBug.sProject.string else ''
bug['sArea'] = xmlBug.sArea.string if xmlBug.sArea.string else ''
bug['sCategory'] = xmlBug.sCategory.string if xmlBug.sCategory.string else ''
bug['sPriority'] = xmlBug.sPriority.string if xmlBug.sPriority.string else ''
bug['events'] = []
BACKUP_DIR = 'C:\\Temp\\FBBack'
BACKUP_DIR += '\\' + xmlBug.sProject.string if xmlBug.sProject.string else ''
if not os.path.exists(BACKUP_DIR):
os.makedirs(BACKUP_DIR)
BACKUP_DIR += '\\' + str(xmlBug['ixBug'])
if not os.path.exists(BACKUP_DIR):
os.makedirs(BACKUP_DIR)
for event in xmlBug.events.findAll('event'):
bugEvent = {}
bugEvent['ixBugEvent'] = int(event['ixBugEvent'])
bugEvent['sVerb'] = event.sVerb.string if event.sVerb.string else ''
bugEvent['dt'] = event.dt.string if event.dt.string else ''
bugEvent['s'] = event.s.string if event.s.string else ''
bugEvent['sChanges'] = event.sChanges.string if event.sChanges.string else ''
bugEvent['evtDescription'] = event.evtDescription.string if event.evtDescription.string else ''
bugEvent['sPerson'] = event.sPerson.string if event.sPerson.string else ''
bugEvent['s'] = event.s.string.encode('ascii', 'ignore').decode('utf-8') if event.s.string else ''
theAttachments = ''
for att in event.rgAttachments:
theAttachments += 'Attachment: ' +att.sFileName.string + '\n'
print('Downloading attachment: ' + att.sFileName.string)
str1 = att.sURL.string
str2 = 'ixAttachment='
loc1 = str1.find(str2) + len(str2)
loc2 = str1.find('&sFileName')
str3 = ';sFileName='
loc3 = str1.find(str3) + len(str3)
loc4 = str1.find('&sTicket')
theURL = S_FOGBUGZ_URL #+ att.sURL.string
theURL += 'default.asp?'
theURL += 'ixAttachment=' + str1[loc1:loc2]
theURL += '&pg=pgDownload&pgType=pgFile&sFilename=' + str1[loc3:loc4]
theURL += '&token=123456sometoken'
#fix the replace
newFileName = att.sFileName.string.replace('\\','')
newFileName = newFileName.replace(':','')
newFileName = BACKUP_DIR+'\\'+newFileName
#print(newFileName)
urllib.request.urlretrieve(theURL, newFileName)
bugEvent['attachment'] = theAttachments
bug['events'].append(bugEvent)
f = open('%s\\%s.html' % (BACKUP_DIR,bug['ixBug']),'w')
f.write(tmpl.render(bug=bug))
f.close()
fb.view(ixBug=ixBug)
main()
2- fbBackupTemplate.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{bug.ixBug|e}} | {{bug.sTitle|e}}</title>
<style type="text/css">
.bugHeader {
outline-width: 2px;
outline-style: solid;
width: 90%;
padding: 5px;
background: #B8DDFF;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.bugEvent {
outline-width: 2px;
outline-style: solid;
outline-color: blue;
width: 90%;
padding: 5px;
background: #D2E9FF;
font: 12px Arial, Helvetica, sans-serif;
}
pre.s {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="bugHeader">
<span class="ixBug">Bug ID: {{bug.ixBug|e}}</span><br>
<span class="sTitle">Title: {{bug.sTitle|e}}</span><br>
<span class="sPersonAssignedTo">Assigned To: {{bug.sPersonAssignedTo|e}}</span><br>
<span class="sProject">Project: {{bug.sProject|e}}</span><br>
<span class="sArea">Area: {{bug.sArea|e}}</span><br>
<span class="sCategory">Category: {{bug.sCategory|e}}</span><br>
<span class="sPriority">Title: {{bug.sPriority|e}}</span><br>
</div>
<div class="bugEvents">
{% for event in bug.events %}
<div class="bugEvent">
<span class="ixBugEvent">BugEvent ID: {{event.ixBugEvent|e}}</span><br>
<span class="dt">Date/Time: {{event.dt|e}}</span><br>
<span class="sVerb">Verb: {{event.sVerb|e}}</span><br>
<span class="evtDescription">Event Description: {{event.evtDescription|e}}</span><br>
<span class="sChanges">Changes: {{event.sChanges|e}}</span><br>
<span class="sPerson">Person: {{event.sPerson|e}}</span><br>
<span class="Text">Text: </span><br>
<pre class="s">{{event.s|e}}</pre><br>
<pre class="s">{{event.attachment|e}}</pre><br>
</div>
{% endfor %}
</div>
</body>
</html>
Original URL for the backup script:
https://developers.fogbugz.com/?W211
Get a token for the API call:
https://support.fogbugz.com/hc/en-us/articles/360011255754-Generating-a-FogBugz-XML-API-Token
This question already has answers here:
Using Address Instead Of Longitude And Latitude With Google Maps API
(5 answers)
Closed 7 years ago.
I have data in database like this:
Database table
Name : Jack
mob_number : 445452454
address : al saada street
country : dubai
In my view
#item.Name
#item.address
#item.country
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
initialize();
</script>
How do I pass #item.address to google maps for search location ?
http://prntscr.com/8a6m4r click to view
MY view:
#if (Model != null)
{
if (Model.Count() != 0)
{
<div class="">
#foreach (var item in Model)
{
<div class="tiptext">
<b style="margin-left: 0px; font-size: large;color: #1A0DB2;">#item.BusinessName</b>
<h3 style="margin: 5px 0px 5px 0px;color: rgb(0, 145, 0);"> #item.FirstName</h3>
<h3 style="margin: 8px; color:black">#item.BusinessCategory </h3>
<div class="description">
<div class="description_image">
<img src="~/Images/popup_pointer.jpg" />
<div class="POP_UP_outer">
<div class="description_background">
<div class="description_map">
<b>Map</b>
</div><hr />
<div class="description_body">
<b>Description </b><h4 class="des">#item.BusinessDescription</h4>
<b>Address2 </b><h4 class="des">#item.Address1</h4>
<b>Email </b><h4 style="color:blue; margin: 5px 0px 5px 0px;">#item.EmailID </h4>
<b>WorkNumber </b><h4 class="des">#item.WorkNumber</h4>
<b>MobileNumber </b><h4 class="des">#item.MobileNumber</h4>
<b>City </b><h4 class="des">#item.City</h4>
<b>State </b><h4 class="des">#item.State</h4>
<b>ZipCode </b><h4 class="des">#item.ZipCode</h4>
#Html.ActionLink("Book An Appointment", "CalendarView", "Appt", new { id = #item.UserID }, null)
#*#Html.ActionLink("Book An Appointment", "Popup", "Search", new { #class = "openDialog", data_dialog_id = "aboutlDialog", data_dialog_title = "Additinal Customer" })*#
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
}
else
{
<label id="lblErrorMsg" title="Record not fount...!" style="color:red;">Record not found...!</label>
}
Hover script
<script type="text/javascript">
$(".tiptext").mouseover(function () {
$(this).children(".description").show();
}).mouseout(function () {
$(this).children(".description").hide();
});
</script>
u can see map on my view i want to load map there
You need to use it like this it work for me
function initialize() {
// Change the latitude and longitude to your location. You can also get the coordinates here: http://itouchmap.com/latlong.html
var myLatlng = new google.maps.LatLng(25.548710, 82.084777);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
var infowindow = new google.maps.InfoWindow({
content:
'<div class="map-wrap">' +
// Company name
'<div class="b-title">' + 'Company Name' + '</div>' +
// Company street
'<p>' + 'Company Street' + '</p>' +
// Company city and state
'<p>' + 'Company City and State' + '</p>' +
// Clearfix with border
'<div class="clrfx map-div">' + '</div>' +
// Row 1
'<div class="row">' +
// Phone
'<div class="b-info cell w-49">' + '<span class="entypo-phone">' + '</span>' + '+91-879-902-1616' + '</div>' +
// Email
'<div class="b-info cell w-49">' + '<span class="entypo-paper-plane">' + '</span>' + 'example#example.com' + '</div>' +
'</div>' +
// Row 2
'<div class="row">' +
// Mobile
'<div class="b-info cell w-49">' + '<span class="entypo-mobile">' + '</span>' + '+91-879-902-1616' + '</div>' +
// Website
'<div class="b-info cell w-49">' + '<span class="entypo-monitor">' + '</span>' + 'www.example.com' + '</div>' +
'</div>' +
// Bottom margin clearfix
'<div class="clrfx mt-10">' + '</div>' +
'</div>'
});
makeInfoWindowEvent(map, infowindow, marker);
}
function makeInfoWindowEvent(map, infowindow, marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
i try to create table in mvc with webgrid, when i click remove button, data in table will change with data from Json Response in ajax jquery. i try to show json response in table but u can't. i try using $.each and still not working for me. i try to followingthis answer but still not work for me.. can some one tell me and help me, how to show data from json result in jquery and change data in my webgrid table??
this my code
my webgrid
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("HotelID", "HotelID", #<text><label id="hotelIDMap
">#item.HotelID</label></text>),
grid.Column("RKI Hotel", "Hotel", #<text>
<div style='width: auto; margin-right: 25px;'>
<div style="width: 65px; float: left;">Hotel Name </div>
: #item.HotelName
<br />
<div style="width: 65px; float: left;">Address </div>
: #item.Address
<br />
<div style="width: 65px; float: left;">Phone </div>
: #item.Telephone
<br />
<div style="width: 65px; float: left;">Fax </div>
: #item.Fax
</div></text>),
grid.Column("Mapping Hotel", "Mapping Hotel", format: (item) =>
{
string tmp = "<div style='text-align: left;color: grey;height:auto;" +
"width: auto;padding: 10px; overflow: auto; overflow-x:hidden;'>";
var sub = new WebGrid(Model.SearchResult.Where(r => r.SearchFromHotel == item.HotelName), canSort: false);
tmp += sub.GetHtml(
tableStyle: "Subgrid",
rowStyle: *"Subrow-" + #item.HotelID*, (i want to change this row)
headerStyle: "Subhead",
alternatingRowStyle: "alt",
columns: sub.Columns(
sub.Column("HotelID", "HotelID", format: (subitem) =>
{
string temp3 = "<div class='idHOtel-" + subitem.HotelID.ToString() + "'style='text-align: left;color: grey;height:auto;" +
"width: auto; overflow: auto; overflow-x:hidden;'>";
temp3 = temp3 + item.HotelID.ToString();
temp3 += "</div>";
return new HtmlString(temp3);
}
),
sub.Column("HotelName", "Hotel", format: (subitem) =>
{
string tmp2 = "<div style='text-align: left;color: grey;height:auto;" +
"width: 175px; padding-right: 1em; overflow: auto; overflow-x:hidden;'>";
tmp2 = tmp2 + "Hotel Name : ";
foreach (var test in subitem.HotelName)
{
tmp2 += test;
}
tmp2 = tmp2 + "<br />";
tmp2 = tmp2 + "Alamat : ";
foreach (var address in subitem.Address)
{
tmp2 += address;
}
tmp2 = tmp2 + "<br />";
tmp2 = tmp2 + "Phone Number : ";
foreach (var Telephone in subitem.Telephone)
{
tmp2 += Telephone;
}
tmp2 = tmp2 + "<br />";
tmp2 = tmp2 + "Fax Number : ";
foreach (var Fax in subitem.Fax)
{
tmp2 += Fax;
}
tmp2 += "</div>";
return new HtmlString(tmp2);
}),
sub.Column("Action", "Action", format: (subitem) =>
{
string tmp3 = "<div style='text-align: left;color: grey;height:auto;" +
"width: auto; overflow: auto; overflow-x:hidden;'>";
tmp3 = tmp3 + "<input id='" + subitem.HotelID + "' class='Mapping-Save' type='button' value='Select' />";
tmp3 = tmp3 + " ";
tmp3 = tmp3 + "<input id='" + subitem.HotelID + "' class='Mapping-Remove' type='button' value='Remove' />";
return new HtmlString(tmp3);
})
));
tmp += "</div>";
return new HtmlString(tmp);
})
)
)
and this my jquery code
$('.Mapping-Remove').on("click", function () {
var tr = $(this).parents('tr:first');
tr.find('.Mapping-Remove, .Mapping-Save').toggle();
var HotelID = $('.idHOtel-' + $(this).attr('id')).text();
$.ajax({
url: '#Url.Action("RemoveMappingHotel", "Mapping")',
type: "Post",
data: {
HotelID: HotelID
},
dataType: 'json',
success: function () {
alert("Success Remove Data");
$.ajax({
url: '#Url.Action("HotelForMapping", "Json")',
type: "Post",
data: {
HotelID: HotelID
},
dataType: 'json',
success: function (data) {
// $('.Subrow-' + HotelID).replaceWith('<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>' + ""
//+ '<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>' + ""
//+ '<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>');
}
});
},
error: function (data) {
alert("Error Mapping Data");
tr.find('.Mapping-Remove, .Mapping-Save').toggle();
}
});
});
please, i need help.. thanks...
Try this after success: function (data) {
$('#NAME OF YOUR Grid content').html(LISTVALUES FROM CONTROLER);
I am facing an problem in phonegap while integrating native EmailComposer.
MailComposer should open up on button click, but it does not shows the mailComposer for IOS, same code for android is working,
My Code is as follow:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", deviceready, true);
function deviceready() {
console.log("Device ready");
}.
//function to send mail using mail composer
function composeText(){
var vehiclemileage = document.getElementById('vehiclemileage').value;
var vehiclemodel = document.getElementById('vehiclemodel').value;
var message1 = document.getElementById('message_body').value;
var vechicleyear = document.getElementById("yeardropdown");
var strUser = vechicleyear.options[vechicleyear.selectedIndex].value;
var vehiclemake = document.getElementById("vehiclemake");
var makevehicle = vehiclemake.options[vehiclemake.selectedIndex].value;
var deviceName = device.platform;
var devicemodel = device.model;
if(vehiclemodel == '' || makevehicle == ''){
alert("Please Enter all the Value");
navigator.notification.alert(
'Please Enter all the Value', // message
alertDismissed, // callback
'Vehicle and Model', // title
'Ok' // buttonName
);
}
else
{
//function to check folder named "RepairMyCar" and extract picture from folder to attach it to mail
var attachPath;
var attachFile= new Array();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("RepairMyCar", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
var dated, fnamed, phoned, emailed;
if(typeof(Storage)!=="undefined")
{
dated = localStorage.date;
fnamed = localStorage.fname;
phoned = localStorage.phone;
emailed= localStorage.email;
}
console.log(attachFile);
var newattachment = attachFile.toString();
//Open mail composer with all datas
setTimeout(function(){window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Date: " + dated + '<br>' + "First Name: " + fnamed + '<br>' + "Phone Number: " + phoned + '<br>' + "Email Address: " + emailed + '<br>' + "Year of Vehicle: " + strUser + '<br>' + "Make of Vehicle: " + makevehicle + '<br>' + "Model of Vehicle: " + " " + vehiclemodel + '<br>' +
"Mileage of Vehicle: " + " " + vehiclemileage + '<br>' + message1 + '<br>' + "Sent from My:" + deviceName + devicemodel,
[sth#sth.com],
[],
[],
true,
attachFile
);},100);
//Clear LoccalStorage
localStorage.clear();
//exit the app after clicking this button
navigator.app.exitApp();
// navigator.camera.cleanup(onSuccess,fail);
// function onSuccess(){
// }
// function fail(){
// }
}
}
function onFail(message) {
alert('Failed because: ' + message);
}
/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
//function to load year in drodown. Default selected year : Current Year
function populatedropdown(yearfield){
var today=new Date()
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
//Select Year
var thisyear=today.getFullYear()
for (var y=0; y<25; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Get a Repair Estimate</h1>
<div class="main-content">
<p>
Please Enter the Year, Make, Model and Mileage of Your Vehicle and any other information we should know.
</p>
<form class="vehicle-detail-form">
<ul>
<li>
<label>Year of Vehicle: </label>
<form action="" name="someform">
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("yeardropdown")
}
</script>
</li>
<!-- Vehicle Year Selection -->
<li><label>Model of Vehicle:</label>
<input type="text" name="vehiclemodel" id = "vehiclemodel">
</li>
<li><label>Mileage of Vehicle:</label>
<input type="number" name="vehiclemileage" id = "vehiclemileage"></li>
<li>
<textarea name="message_body" id = 'message_body' placeholder="Add Notes here(if any)"></textarea>
</li>
</form>
<div style="clear:both;"></div>
<div class="large-button-wrapper">
<button onclick="composeText();">Get Your Estimate</button>
</div>
</div>
</div>
</body>
</html>
I have kept EmailComposer.h and EmailComposer.m in plugin folder as stated in this link
I found a workaround if you work on an iOS project. I have the same issue.
After view change in backbone router console.log stops working in Xcode you can use Safari Web Inspector on your Mac. Every console.log is visible there.
I'm having a bit of a problem with putting a jQuery UI tab menu inside a Google Map InfoWindow.
The infowindows are created from a Fusion Table which is layered on the base map. I've got an example using the Maps infowindows that works perfectly (still has styling to be done and the data is incomplete, though)
However, the infowindows are a bit too restrictive and I need more flexibility in styling, so I switched over to using InfoBox.js. Thankfully, it fits in pretty well, and all I had to do was change a few selectors so it all matched up. The boxes work perfectly BUT the jquery tabs now don't work at all. The class attributes that should be created in the HTML, aren't.
Here's the original script using infowindows:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {other_params:'sensor=false'});
google.load('jquery', '1');
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col2>>1",
from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
},
styleId: 2,
map: map,
suppressInfoWindows: true
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function(e) {
var childpoverty = e.row['Child poverty rate'].value;
if (childpoverty > 22) {
pcolour = '<p style="color: red; font-weight: bold;">';
}
else if (childpoverty > 13) {
pcolour = '<p style="color: orange; font-weight: bold;">';
}
else {
pcolour = '<p style="color: green; font-weight: bold;">';
};
var sponsored = e.row['Sponsorship'].value;
if (sponsored == 1) {
contentString = [
'<div class="tabs">',
'<ul>',
'<li><span>Sponsor</span></li>',
'<li><span>Information</span></li>',
'</ul>',
'<div id="tab-1">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<img src="' + e.row['Logo'].value + '" width="100"></img>',
'</div>',
'<div id="tab-2">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>',
'</div>'
].join('')}
else {
contentString = [
'<div class="tabs">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>'
].join('')};
infowindow.setContent(contentString);
infowindow.setPosition(e.latLng);
infowindow.open(map);
$(".tabs").tabs({ selected: 0 });
});
}
</script>
And here's the script with the infowboxes
<link type="text/css" href="http://code.jquery.com/ui/1.8.12/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {other_params:'sensor=false'});
google.load('jquery', '1');
google.load("jqueryui", '1');
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col2>>1",
from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
},
styleId: 2,
map: map,
suppressInfoWindows: true
});
var ib = new InfoBox();
google.maps.event.addListener(layer, 'click', function(e) {
var childpoverty = e.row['Child poverty rate'].value;
if (childpoverty > 22) {
pcolour = '<p style="color: red; font-weight: bold;">';
}
else if (childpoverty > 13) {
pcolour = '<p style="color: orange; font-weight: bold;">';
}
else {
pcolour = '<p style="color: green; font-weight: bold;">';
};
var sponsored = e.row['Sponsorship'].value;
if (sponsored == 1) {
iboxText = [
'<div class="tabs">',
'<ul>',
'<li><span>Sponsor</span></li>',
'<li><span>Information</span></li>',
'</ul>',
'<div id="tab-1">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<img src="' + e.row['Logo'].value + '" width="100"></img>',
'</div>',
'<div id="tab-2">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>',
'</div>'
].join('')}
else {
iboxText = [
'<div class="tabs">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>'
].join('')};
var myOptions = {
disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "white"
,opacity: 0.75
,width: "280px"
,padding: "5px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
ib.setOptions(myOptions);
ib.setContent(iboxText);
ib.setPosition(e.latLng);
ib.open(map);
$(".tabs").tabs({ selected: 0 })
});
}
</script>
Like I say, virtually completely the same, except the second one, no tabs.
I am SO stuck, any help would be so appreciated.
call $.tabs() when the domready-event of the infobox fires(the infobox has been attached to the DOM at this time, when you call $.tabs() earlier the infobox-content cannot be found by jQuery):
google.maps.event.addListener(ib,'domready',function(){
$(".tabs").tabs({ selected: 0 })
});
This worked for me:
google.maps.event.addListener(infoWindow, 'domready', function() {
jQuery("#tabs").tabs();
});