I need a little help on finishing my script that allows the User to confirm their bus reservation. I am using jQuery/Ajax:
allow the User to input a date and location to search the database of available buses
display each result(each bus) in its own div that has the bus info and a button that will send the User to the confirmation page which is in a modal box called ColorBOx
What I want to accomplish:
When the User clicks on the RSVP button, have jquery collect the bus number, date, and location so that I can display the info in the modal box along with a seat selector before they decide to confirm their booking
Once they click on the confirmation button in the modal box, gather the bus info again along with the seat selected and update a bus database
this is index.php:
<script type="text/javascript">
$(document).ready(function() {
$("a, input:submit").button();
$("#date").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth:true,
changeYear:true,
numberOfMonths:1,
showButtonPanel:true,
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat:'yy-mm-dd'
});
$('#search1').submit(function(){
var date = $('#date').val();
var location = $('#location').val();
var datastring = 'date=' + date + '&location=' + location;
$.ajax({
type: "POST",
cache: "true",
url: "search.php",
dataType:"json",
data: datastring,
success: function(data){
$('#main').html('')
for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
if (data.bus[$i].seats > 20)
{
var price = 50
}
else if (data.bus[$i].seats <= 20 && data.bus[$i].seats > 10)
{
var price = 45
}
else
{
var price = 40
}
var html = '<div id="' + data.bus[$i].number + '">';
html += '<div id="bus_num">' + '<b>BUS #</b>' + data.bus[$i].number + '</div>';
html += '<div id="bus_graphic"></div>';
html += '<div id="capacity">' + '<h1>Capacity</h1>' + data.bus[$i].capacity + '</div>';
html += '<div id="time">' + '<h1>Departure</h1>' + data.bus[$i].time + '</div>';
html += '<div id="seats">' + '<h1>Open Seats</h1>' + data.bus[$i].seats + '</div>';
html += '<div id="price">$' + price + '</div>';
html += '<a class="rsvp" href="#rsvp">RSVP</a>';
html += '</div>';
$('#main').append(html);
}
$("a.rsvp").button();
$(".rsvp").colorbox({width:"640px", inline:true, href:"#rsvp"});
}
});
return false;
});
});
</script>
<body>
<div style='display:none'>
<div id='rsvp'>
<?php include("colorbox.php");?>
</div>
</div>
</body>
colorbox.js:
$(document).ready(function() {
// Add click listener to seats
$('#airplane a').click(function()
{
// Asign value of the link target
var thisTarget = $(this).attr('href');
$(thisTarget).addClass('selected');
// Assign the value of the parent <li class="*">
var thisSeat = $(this).parent('li').attr('class');
// Toggle selected class on/off
$(this).toggleClass('selected');
return false;
});
$('#book').click(function ()
{
//collect user and bus information to store in database
});
});
colorbox.php:
<ul id="airplane">
<li class="seat_01 A">01A</li>
<li class="seat_01 B">01B</li>
<li class="seat_01 C">01C</li>
<li class="seat_01 D">01D</li>
<li class="seat_02 A">02A</li>
<li class="seat_02 B">02B</li>
<li class="seat_02 C">02C</li>
<li class="seat_02 D">02D</li>
<li class="seat_03 A">03A</li>
<li class="seat_03 B">03B</li>
<li class="seat_03 C">03C</li>
<li class="seat_03 D">03D</li>
<li class="seat_04 A">04A</li>
<li class="seat_04 B">04B</li>
<li class="seat_04 C">04C</li>
<li class="seat_04 D">04D</li>
<li class="seat_05 A">05A</li>
<li class="seat_05 B">05B</li>
<li class="seat_05 C">05C</li>
<li class="seat_05 D">05D</li>
<li class="seat_06 A">06A</li>
<li class="seat_06 B">06B</li>
<li class="seat_06 C">06C</li>
<li class="seat_06 D">06D</li>
<li class="seat_07 A">07A</li>
<li class="seat_07 B">07B</li>
<li class="seat_07 C">07C</li>
<li class="seat_07 D">07D</li>
<li class="seat_08 A">08A</li>
<li class="seat_08 B">08B</li>
<li class="seat_08 C">08C</li>
<li class="seat_08 D">08D</li>
<li class="seat_09 A">09A</li>
<li class="seat_09 B">09B</li>
<li class="seat_09 C">09C</li>
<li class="seat_09 D">09D</li>
<li class="seat_10 A">10A</li>
<li class="seat_10 B">10B</li>
<li class="seat_10 C">10C</li>
<li class="seat_10 D">10D</li>
<li class="seat_11 A">11A</li>
<li class="seat_11 B">11B</li>
<li class="seat_11 C">11C</li>
<li class="seat_11 D">11D</li>
<li class="seat_12 A">12A</li>
<li class="seat_12 B">12B</li>
<li class="seat_12 C">12C</li>
<li class="seat_12 D">12D</li>
<li class="seat_13 A">13A</li>
<li class="seat_13 B">13B</li>
<li class="seat_13 C">13C</li>
<li class="seat_13 D">13D</li>
<li class="seat_14 A">14A</li>
<li class="seat_14 B">14B</li>
<li class="seat_14 C">14C</li>
<li class="seat_14 D">14D</li>
<li class="seat_15 A">15A</li>
<li class="seat_15 B">15B</li>
<li class="seat_15 C">15C</li>
<li class="seat_15 D">15D</li>
<li class="seat_16 A">16A</li>
<li class="seat_16 B">16B</li>
<li class="seat_16 C">16C</li>
<li class="seat_16 D">16D</li>
<li class="seat_17 A">17A</li>
<li class="seat_17 B">17B</li>
<li class="seat_17 C">17C</li>
<li class="seat_17 D">17D</li>
<li class="seat_18 A">18A</li>
<li class="seat_18 B">18B</li>
<li class="seat_18 C">18C</li>
<li class="seat_18 D">18D</li>
<li class="seat_19 A">19A</li>
<li class="seat_19 B">19B</li>
<li class="seat_19 C">19C</li>
<li class="seat_19 D">19D</li>
<li class="seat_20 A">20A</li>
<li class="seat_20 B">20B</li>
<li class="seat_20 C">20C</li>
<li class="seat_20 D">20D</li>
<li class="seat_21 A">21A</li>
<li class="seat_21 B">21B</li>
<li class="seat_21 C">21C</li>
<li class="seat_21 D">21D</li>
<li class="seat_22 A">22A</li>
<li class="seat_22 B">22B</li>
<li class="seat_22 C">22C</li>
<li class="seat_22 D">22D</li>
<li class="seat_23 A">23A</li>
<li class="seat_23 B">23B</li>
<li class="seat_23 C">23C</li>
<li class="seat_23 D">23D</li>
<li class="seat_24 A">24A</li>
<li class="seat_24 B">24B</li>
<li class="seat_24 C">24C</li>
<li class="seat_24 D">24D</li>
<li class="seat_25 A">25A</li>
<li class="seat_25 B">25B</li>
<li class="seat_25 C">25C</li>
<li class="seat_25 D">25D</li>
</ul>
<!-- end #airplane -->
<p>
<input type="submit" value="Save" class="button" id="book" />
</p>
</div>
I think that I need to create a function that assigns an id or class to each successful search result and then create another function that will handle passing the variables to the confirmation page. Please help! this is crucial. Thanks ahead of time.
You can collect the information just using simple ID selectors like so:
$('#bus_num')
$('#time')
$('#seats')
//etc
Then you can utilise the .text or .html methods to put this information into a modal box, possibly boxy plugin is an option here.
Then when you go to submit the values to pass onto your database for updating, again using the information from the selectors, format this into an object and pass onto your ajax function. jQuery will automatically sanitize and convert to a query string:
var post_details = {
'bus_num': $('#bus_num').text(),
'time': $('#time').text()
};
$.post('/confirm_booking', post_details, [....]);
Related
Please help me. this code is amcharts4 i want to custom button my chart but i am using amchart5 please this code convert to amchart5.
Thank You
HTML:
<ul id="chart-selector">
<li class="dropdown-item" data-click="JPG">JPG</li>
<li class="dropdown-item" data-click="PNG">PNG</li>
<li class="dropdown-item" data-click="SVG">SVG</li>
<li class="dropdown-item" data-click="CSV">CSV</li>
<li class="dropdown-item" data-click="JSON">JSON</li>
<li class="dropdown-item" data-click="PDF">PDF</li>
<li class="dropdown-item" data-click="XLSX">XLSX</li>
<li class="dropdown-item" data-click="PRINT">Print</li>
</ul>
<div id="chartdiv"></div>
JS:
$('#chart-selector .dropdown-item').on('click', function(e) {
var format = $(this).data('click');
switch (format) {
case 'CSV':
case 'XLSX':
case 'JSON':
chart.export['to' + format]({}, function(data) {
this.download(data, this.defaults.formats[format].mimeType, "amCharts." + format.toLowerCase());
});
break;
case 'JPG':
case 'PNG':
case 'SVG':
case 'PDF':
chart.export.capture({}, function() {
this['to' + format]({}, function(data) {
this.download(data, this.defaults.formats[format].mimeType, "amCharts." + format.toLowerCase());
});
});
break;
case 'PRINT':
default:
chart.export.capture({}, function() {
this.toPRINT();
});
}
});
please help this code convert to amchart4 to amchart5
<ul>
<li repeat.for="row of router.navigation" > ${row.title}
</li>
</ul>
infact i want to style one of the router button that generate with repeat.for method
want to make left border radius for navigation bar like the right of the navigation bar
As a one-liner option, you could bind your class attribute with ...
<li repeat.for="row of router.navigation" class="${myBool ? 'a-class' : 'another-class'}">${row.title}</li>
You can bind class with string interpolation or with .bind syntax. See https://aurelia.io/docs/binding/class-and-style#class
UPDATE: Sorry...should have read your other comment further down. If it's just for the first , why not just use CSS?
#myUl>li:first-child{
// my CSS here
}
You can identify the first repeated element with the $index context variable.
This would lead to something like this:
<ul>
<li repeat.for="row of router.navigation" >
<a if.bind="$index === 0" class="blah"> ${row.title} </a>
<a else class="another class"> ${row.title} </a>
</li>
</ul>
If you need to do the styling on the <li> tag, the solution could be like this:
<ul>
<template repeat.for="row of router.navigation" >
<li if.bind="$index === 0" class="blah"> ${row.title} </li>
<li else class="another class"> ${row.title} </li>
</template>
</ul>
I have a menu in a PHP page:
<li data-target='MA'><span>M.A.</span></li>
<li data-target='MBA'><span>M.Com.</span></li>
<li data-target='MBA'><span>B.E.</span></li>
and I have content:
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
I have to selectively show the content. How do I do it?
You need to search for javascript solution.
For example look on the answer to this question:
Responsive menu show and hide on click
Solution:
function switchContent(id) {
var content = $(('#' + id));
$('.content').not(content).hide();
content.show();
}
function handleHash() {
switchContent(location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li data-target='MA'><a class='link' href="#MA"><span>M.A.</span></a></li>
<li data-target='MCOM'><a class='link' href="#MCOM"><span>M.Com.</span></a></li>
<li data-target='BE'><a class='link' href="#BE"><span>B.E.</span></a></li>
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
I'm working with the new jqwidgets-angular version, released just last month in September.
The gridtree is working great, but having trouble with the tree widget.
FYI: This is based on the angular-tree demo here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm#demos/jqxangular/tree.htm
Here's the jsfiddle I'm working on, but cannot get tree to render here: tree widget
So two things:
1) Can someone help me get this jsfiddle working ?
2) Can someone help me get the jqx-tree to render using ng-repeat
Here's the code from that jsfiddle.
Just a straight ng-repeat inside a div (no tree widget). This is just for testing purposes:
<div ng-app="App" ng-controller="myController">
<div>
<ul>
<li ng-repeat="kriGroup in kriData">{{kriGroup.group}}</li>
</ul>
</div>
</div>
And here's the jqx-tree directive, which is NOT working in jsfiddle example :
<div ng-controller="myController">
<jqx-tree jqx-width="'300px'" jqx-height="'300px'">
<ul>
<li id='home'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>Communities
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Educators and students</li>
<li>Partners</li>
<li>By resource
<ul>
<li>Labs</li>
<li>TV</li>
<li>Forums</li>
<li>Exchange</li>
<li>Blogs</li>
<li>Experience Design</li>
</ul>
</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</jqx-tree>
</div>
and finally the js controller code :
angular.module('App', ['jqwidgets'])
.controller('myController', function ($scope) {
$scope.kriData = [
{
"group": "99_HSVaR",
"kris": [
{
"kri": "1D"
},
{
"kri": "1D CR"
},
{
"kri": "1D EQ"
},
{
"kri": "1D EUR/USD"
}
]
},
{
"group": "Additive",
"kris": [
{
"kri": "MCS"
}
]
},
{
"group": "AsianCrisis",
"kris": [
{
"kri": "Stressed"
}
]
}
];
})
I found the solution, posted in this jsfiddle: http://jsfiddle.net/robertmazzo/s9snLu9m/3/
My ng-repeat was in the wrong scope. And in addition, there were some key attributes missing such as the jqx-data directive.
For example, as shown in the jsfiddle :
<div ng-app="App" ng-controller="myController">
<jqx-tree jqx-data="kriData" jqx-height="300">
<ul>
<li ng-repeat="kriGroup in data">{{kriGroup.group}}</li>
</ul>
</jqx-tree>
</div>
This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?
Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a
square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()