This object is in archive!
Trying to add check availability to my website
Answered
I am trying to follow your instructions on adding check avaiabiltiy process to my website. It has some links to //code.jquery.js etc. Does that need to point to http://www.inflatableoffice.com/code.jquery.js ?
The same question
No, the //code.jquery.com is the site it gets them from. The links are correct. Putting // at the start allows the browser to determine whether to add http: or https: automatically.
No, the //code.jquery.com is the site it gets them from. The links are correct. Putting // at the start allows the browser to determine whether to add http: or https: automatically.
No, the //code.jquery.com is the site it gets them from. The links are correct. Putting // at the start allows the browser to determine whether to add http: or https: automatically.
No, the //code.jquery.com is the site it gets them from. The links are correct. Putting // at the start allows the browser to determine whether to add http: or https: automatically.
ok why when I click the button doesn't it do anything. I have placed this in 2 places on a stub page
http://www.jumpnfunforkids.com/bouncers2.html
I updated the rentals names to match what I see in IO
and when I run this
http://www.inflatableoffice.com/quotes/check_availability.php?name=Jump-N-Fun+For+Kids&startdate=03/10/2015&starttime=08:00&duration=6&usecushion=1&showlocations=&rental_names=Cars2
I get return data
ok why when I click the button doesn't it do anything. I have placed this in 2 places on a stub page
http://www.jumpnfunforkids.com/bouncers2.html
I updated the rentals names to match what I see in IO
and when I run this
http://www.inflatableoffice.com/quotes/check_availability.php?name=Jump-N-Fun+For+Kids&startdate=03/10/2015&starttime=08:00&duration=6&usecushion=1&showlocations=&rental_names=Cars2
I get return data
You have a javascript error on your page preventing the rest of the code from running. I'm guessing it's because you already had jquery included on the page then you added our code which includes another version of jquery.
You have a javascript error on your page preventing the rest of the code from running. I'm guessing it's because you already had jquery included on the page then you added our code which includes another version of jquery.
ok is there a work around to fix this?
ok is there a work around to fix this?
Remove one of the versions or use noconflict:
http://api.jquery.com/jquery.noconflict/
Remove one of the versions or use noconflict:
http://api.jquery.com/jquery.noconflict/
I have removed the link to your jquery for right now but I don't see any errors on my page. what are you seeing on my page as far as a error.
I have removed the link to your jquery for right now but I don't see any errors on my page. what are you seeing on my page as far as a error.
I just cut and pasted your code and changed my parameters in a new .html page and I get the calendar to pop up but nothing else happens when I click on button
http://www.jumpnfunforkids.com/test.html
I just cut and pasted your code and changed my parameters in a new .html page and I get the calendar to pop up but nothing else happens when I click on button
http://www.jumpnfunforkids.com/test.html
I've had to make a change to fix the issue on your test.html page. In your code change the line
+ "?name=Jump-N-Fun+For+Kids"
to
+ "?callback=?&name=Jump-N-Fun+For+Kids"
Now, regarding the issue on your other page, you'll need to make the above change there as well as the following:
Since you have multiple entries on the same page you'll need to change all the input boxes from
<input type="text" id="datepicker">
to
<input type="text" class="datepicker">
and change
$( "#datepicker" ).datepicker();
to
$( ".datepicker" ).datepicker();
I've had to make a change to fix the issue on your test.html page. In your code change the line
+ "?name=Jump-N-Fun+For+Kids"
to
+ "?callback=?&name=Jump-N-Fun+For+Kids"
Now, regarding the issue on your other page, you'll need to make the above change there as well as the following:
Since you have multiple entries on the same page you'll need to change all the input boxes from
<input type="text" id="datepicker">
to
<input type="text" class="datepicker">
and change
$( "#datepicker" ).datepicker();
to
$( ".datepicker" ).datepicker();
There will be further changes required. Give me a minute to update the instructions and I'll send them over to you. Sorry for the issues with this.
There will be further changes required. Give me a minute to update the instructions and I'll send them over to you. Sorry for the issues with this.
Since there are multiple entries on each page you'll need to make the code changes as follows:
Since there are multiple entries on each page you'll need to make the code changes as follows:
Ok my test.html is working now. I am not getting the pop up calendar on my bouncers2.html page. Is this because I am calling jquery twice. Is the jquery in your code needed is that what calls the calendar?
Ok my test.html is working now. I am not getting the pop up calendar on my bouncers2.html page. Is this because I am calling jquery twice. Is the jquery in your code needed is that what calls the calendar?
I'm seeing an error on this line:
most likely cause is because you have jquery defined twice on the page. Dealing with two versions on the same page can be tricky. You'll have to delete one of them or use the noconflict method to redefine the jquery variable $
I'm seeing an error on this line:
most likely cause is because you have jquery defined twice on the page. Dealing with two versions on the same page can be tricky. You'll have to delete one of them or use the noconflict method to redefine the jquery variable $
Ok I have fixed that. The calendar now pops up however when I choose the date it does nothing. I hate to be a PITA
Ok I have fixed that. The calendar now pops up however when I choose the date it does nothing. I hate to be a PITA
Everything looks good, but you still have two versions of jquery defined and I think the code is using the older version which doesn't support our method of ajax calls.
Move the jquery link's we gave you to the top of the page ahead of your other jquery defintion then before the function calls add
or you'll need to remove the following line
Everything looks good, but you still have two versions of jquery defined and I think the code is using the older version which doesn't support our method of ajax calls.
Move the jquery link's we gave you to the top of the page ahead of your other jquery defintion then before the function calls add
or you'll need to remove the following line
I removed the other jquery and I addd the other statement. Still no go on the click
I removed the other jquery and I addd the other statement. Still no go on the click
So after trying your change I found that it does not like the code with the dp stuff in it. I reverted back to the previous code listed here and it is working
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function checkAvail(){
startdate = $('#datepicker').val();
url = "http://www.inflatableoffice.com/quotes/check_availability.php";
+ "?callback=?&name=Jump-N-Fun+For+Kids"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=0"
+ "&rental_names=Cars2";
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( rental_name, qty ) {
//items.push( rental_name + ": " + qty + " Available" );
items.push( qty + " Available" );
});
output = items.join( "" );
$('#avail').html(output);
});
}
function checkAvailLocations(){
startdate = $('#datepicker').val();
url = "http://www.inflatableoffice.com/quotes/check_availability.php";
+ "?callback=?&name=Jump-N-Fun+For+Kids"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=1"
+ "&rental_names=Cars2";
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( loc, rentals ) {
$.each( rentals, function( rental_name, qty ) {
items.push( loc + ": " + qty + " Available" );
});
});
output = items.join( "<br>" );
$('#avail').html(output);
});
}
</script>
My last question would be. Do I have to put a separate function for each item or can I just update the rental_names with all the items on that page?
So after trying your change I found that it does not like the code with the dp stuff in it. I reverted back to the previous code listed here and it is working
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function checkAvail(){
startdate = $('#datepicker').val();
url = "http://www.inflatableoffice.com/quotes/check_availability.php";
+ "?callback=?&name=Jump-N-Fun+For+Kids"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=0"
+ "&rental_names=Cars2";
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( rental_name, qty ) {
//items.push( rental_name + ": " + qty + " Available" );
items.push( qty + " Available" );
});
output = items.join( "" );
$('#avail').html(output);
});
}
function checkAvailLocations(){
startdate = $('#datepicker').val();
url = "http://www.inflatableoffice.com/quotes/check_availability.php";
+ "?callback=?&name=Jump-N-Fun+For+Kids"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=1"
+ "&rental_names=Cars2";
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( loc, rentals ) {
$.each( rentals, function( rental_name, qty ) {
items.push( loc + ": " + qty + " Available" );
});
});
output = items.join( "<br>" );
$('#avail').html(output);
});
}
</script>
My last question would be. Do I have to put a separate function for each item or can I just update the rental_names with all the items on that page?
Remove the semicolon after the line including url=. For some reason, this editor put it there when it should not be.
Remove the semicolon after the line including url=. For some reason, this editor put it there when it should not be.
The code was fine before except the semi-colon. This function was built to have one item per page. You would want to change the function name to be something like checkAvail(rental_names) and then change the rental names line to be +"&rental_names="+rental_names+";
Then on the check availability button, you would want to put the rental name in like checkAvail('Cars2').
The code was fine before except the semi-colon. This function was built to have one item per page. You would want to change the function name to be something like checkAvail(rental_names) and then change the rental names line to be +"&rental_names="+rental_names+";
Then on the check availability button, you would want to put the rental name in like checkAvail('Cars2').
ok I have removed that and it is work for the cars2 item. Can I put all the items in the same rental item's name or do I have to have a separate script check for each item.
ok I have removed that and it is work for the cars2 item. Can I put all the items in the same rental item's name or do I have to have a separate script check for each item.
Separate button, not script. See my previous post.
Separate button, not script. See my previous post.
Ok I did that and I finds the Justice League but it prints under Cars 2. I am sorry but seems like most people will have more than 1 thing on there pages so I am sure others will hit this as well
Ok I did that and I finds the Justice League but it prints under Cars 2. I am sorry but seems like most people will have more than 1 thing on there pages so I am sure others will hit this as well
http://www.jumpnfunforkids.com/bouncers2.html is where I am testing
http://www.jumpnfunforkids.com/bouncers2.html is where I am testing
so looking at the code more it is returning to the <div=#avail> and printing there. It is finding the first section. I wonder if we change that to #rental_name or something it would print to the correct rental_name section?
so looking at the code more it is returning to the <div=#avail> and printing there. It is finding the first section. I wonder if we change that to #rental_name or something it would print to the correct rental_name section?
You are correct. IDs must be unique. More than one ID of the same name on a page will cause issues. You would want <div id="Cars"> etc. In the code you would want
$('#'+rental_names).html(output);
You are correct. IDs must be unique. More than one ID of the same name on a page will cause issues. You would want <div id="Cars"> etc. In the code you would want
$('#'+rental_names).html(output);
Ok made those changes and now it doesn't allow the clicking the link
Ok made those changes and now it doesn't allow the clicking the link
You are passing a name of dp_Cars2 but your id where you want it to display is Cars2. They need to be the same. I'm guessing you need to get rid of the dp_. Or you need to put the dp_ in the div ID.
You are passing a name of dp_Cars2 but your id where you want it to display is Cars2. They need to be the same. I'm guessing you need to get rid of the dp_. Or you need to put the dp_ in the div ID.
So if I make the change here
$('#'+rental_names).html(output);
and then change
Date: <input type="text" class="datepicker" id="Cars2"></p>
<input type="button" value="Check Availability" />
The calendar does not accept me click a date and the button returns nothing
So if I make the change here
$('#'+rental_names).html(output);
and then change
Date: <input type="text" class="datepicker" id="Cars2"></p>
<input type="button" value="Check Availability" />
The calendar does not accept me click a date and the button returns nothing
You can't have the same ID twice. I think if you were to change the id for the datepicker to dp_Cars2, it would work. You will also need to change the startdate line of the code to:
startdate = $('#dp_'+rental_names).val();
Also, make sure the rental name you are using matches a rental name in IO. There may be issues with putting spaces in. In URLs, they should be replaced with the plus sign, but that may not work as an ID. It gets complicated quickly doesn't it?
You can't have the same ID twice. I think if you were to change the id for the datepicker to dp_Cars2, it would work. You will also need to change the startdate line of the code to:
startdate = $('#dp_'+rental_names).val();
Also, make sure the rental name you are using matches a rental name in IO. There may be issues with putting spaces in. In URLs, they should be replaced with the plus sign, but that may not work as an ID. It gets complicated quickly doesn't it?
Well I have confirmed that it will work with multiple items on the page. You are correct however it does not like item names with spaces. I tried writing a function to remove the space and put + for the URI but it does not seem to do what it is suppose to do.
http://www.jumpnfunforkids.com/bouncers2.html
Is there a way to just replace the var rental_names if there is (' ', '+') something like that?
Well I have confirmed that it will work with multiple items on the page. You are correct however it does not like item names with spaces. I tried writing a function to remove the space and put + for the URI but it does not seem to do what it is suppose to do.
http://www.jumpnfunforkids.com/bouncers2.html
Is there a way to just replace the var rental_names if there is (' ', '+') something like that?
Ok the problem with the space is when it tries to return to the <div="NAME ">
This part of the code here needs to be able to remove the space $("#"+rental_names).html(output);
so the <DIV line is one word> I was reading on line that you shouldn't use $('#id') but I can't find a fix for it.
I tried using
$("div[id='rental_names']") but still no luck.
Ok the problem with the space is when it tries to return to the <div="NAME ">
This part of the code here needs to be able to remove the space $("#"+rental_names).html(output);
so the <DIV line is one word> I was reading on line that you shouldn't use $('#id') but I can't find a fix for it.
I tried using
$("div[id='rental_names']") but still no luck.
First, you wouldn't want to put var rental_names because you already declared rental_names as a variable in the function definition.
Second, I see for the Justice League unit that you have CheckAvail instead of checkAvail, which makes a big difference. CheckAvail is undefined. You want checkAvail.
To remove the spaces, you can do the following:
$("#"+rental_names.replace(' ','')).html(output);
First, you wouldn't want to put var rental_names because you already declared rental_names as a variable in the function definition.
Second, I see for the Justice League unit that you have CheckAvail instead of checkAvail, which makes a big difference. CheckAvail is undefined. You want checkAvail.
To remove the spaces, you can do the following:
$("#"+rental_names.replace(' ','')).html(output);
Yes that has fixed my problem. If you would like me to post the final outcome code I can
Yes that has fixed my problem. If you would like me to post the final outcome code I can
You've done a good job picking this up. Please post the final result for anyone else that attempts this. Thanks!
You've done a good job picking this up. Please post the final result for anyone else that attempts this. Thanks!
So here is the final code pieces that make it work on my page with multiple Items. I did have to modify some names in IO to only have 2 words. I am sure you should be able to do a global replace in the replace string.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function checkAvail(rental_names){
startdate = $('#dp_'+rental_names).val();
url = "http://www.inflatableoffice.com/quotes/check_availability.php";
+ "?callback=?&name=Jump-N-Fun+For+Kids"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=0"
+ "&rental_names="+rental_names;
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( rental_name, qty ) {
//items.push( rental_name + ": " + qty + " Available" );
items.push( qty + " Available" );
});
output = items.join( "" );
$("#"+rental_names.replace(' ','')).html(output);
});
}
</script>
the above in your <head> </head> section.
This next part goes under each thing you want to check availability on. You need to modify this section to match what is in your IO database for the names.
This first paste is an example with just 1 word item in IO
<div id="Cars2"></div>
<p>Date: <input type="text" class="datepicker" id="dp_Cars2"></p>
<input type="button" onclick="checkAvail('Cars2')" value="Check Availability" />
This next paste is one with 2 words in IO. Notice how in the <div=" > this section I combined the words as one.
<div id="JusticeLeague"></div>
<p>Date: <input type="text" class="datepicker" id="dp_JusticeLeague"></p>
<input type="button" onclick="checkAvail('Justice League');" value="Check Availability" />
Notice the checkAvail section the "Justice League" is exactly how I have it in IO.
this last part goes after the </body> but before </html>
So here is the final code pieces that make it work on my page with multiple Items. I did have to modify some names in IO to only have 2 words. I am sure you should be able to do a global replace in the replace string.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function checkAvail(rental_names){
startdate = $('#dp_'+rental_names).val();
url = "http://www.inflatableoffice.com/quotes/check_availability.php";
+ "?callback=?&name=Jump-N-Fun+For+Kids"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=0"
+ "&rental_names="+rental_names;
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( rental_name, qty ) {
//items.push( rental_name + ": " + qty + " Available" );
items.push( qty + " Available" );
});
output = items.join( "" );
$("#"+rental_names.replace(' ','')).html(output);
});
}
</script>
the above in your <head> </head> section.
This next part goes under each thing you want to check availability on. You need to modify this section to match what is in your IO database for the names.
This first paste is an example with just 1 word item in IO
<div id="Cars2"></div>
<p>Date: <input type="text" class="datepicker" id="dp_Cars2"></p>
<input type="button" onclick="checkAvail('Cars2')" value="Check Availability" />
This next paste is one with 2 words in IO. Notice how in the <div=" > this section I combined the words as one.
<div id="JusticeLeague"></div>
<p>Date: <input type="text" class="datepicker" id="dp_JusticeLeague"></p>
<input type="button" onclick="checkAvail('Justice League');" value="Check Availability" />
Notice the checkAvail section the "Justice League" is exactly how I have it in IO.
this last part goes after the </body> but before </html>
Quick Update if you change this
$("#"+rental_names.replace(' ','')).html(output);
to this
$("#"+rental_names.replace(/\ /g,'')).html(output);
Then the name can have more than 1 space.
Quick Update if you change this
$("#"+rental_names.replace(' ','')).html(output);
to this
$("#"+rental_names.replace(/\ /g,'')).html(output);
Then the name can have more than 1 space.
So I got another problem with items that have more than 1 item free. For example on my
http://www.jumpnfunforkids.com/ttchairs.html
For my chairs it is returning 1 free instead of like 75. Is there a way to fix this?
So I got another problem with items that have more than 1 item free. For example on my
http://www.jumpnfunforkids.com/ttchairs.html
For my chairs it is returning 1 free instead of like 75. Is there a way to fix this?
I noticed that your chair is called Brown Plastic Chairs in IO but you used the name Brown Chair in the code. It may not be finding the right item. Try changing the name to be correct.
I noticed that your chair is called Brown Plastic Chairs in IO but you used the name Brown Chair in the code. It may not be finding the right item. Try changing the name to be correct.
From looking at it I think it is just checking for the Name to found in the Database and not the actual quantity associated with the name. As long as the checkAvail('blah') matches what is in the database it will find the item. I had 2 entries for 10 by 10 Tent and when I ran the script it found 2 but only because it found the name 2 times. I have since removed the dup entry and it returns one now.
Thanks again
I updated the brown Chairs as well
From looking at it I think it is just checking for the Name to found in the Database and not the actual quantity associated with the name. As long as the checkAvail('blah') matches what is in the database it will find the item. I had 2 entries for 10 by 10 Tent and when I ran the script it found 2 but only because it found the name 2 times. I have since removed the dup entry and it returns one now.
Thanks again
I updated the brown Chairs as well
I think it's on our end. I'm looking into it.
I think it's on our end. I'm looking into it.
Any update on this one?
Any update on this one?
This is fixed and will be available on our next release (ETA is Tuesday the 24th)
This is fixed and will be available on our next release (ETA is Tuesday the 24th)
Thank you. Will I need to change the code I have in place now or is it a change the php script?
Thank you. Will I need to change the code I have in place now or is it a change the php script?
You won't need to change anything on your end.
You won't need to change anything on your end.
Hey guys was this released yesterday?
Thanks
Hey guys was this released yesterday?
Thanks
Unfortunately, we had to postpone this release until next Tuesday. Sorry for the delay.
Unfortunately, we had to postpone this release until next Tuesday. Sorry for the delay.
Replies have been locked on this page!