imgrooot

I am using ajax live search to retrieve data from MySQL table. It works fine. However I noticed that it only returns a single result that matches the entire word instead of multiple results that match only the first couple letters. For e.g. DB Table ---------------- 1. Foot 2. Foot Path 3. Football ---------------- If I type "foo" in the ajax search field, it won't return any results. But if I type "foot", it'll return "Foot". It won't return the other two results that contain the letters "Foot". Here's my query $param_term = $_POST["term"] . '%'; $get_data = $db->prepare("SELECT name FROM table WHERE title LIKE :param"); $get_data->bindParam(':param', $param_term); $get_data->execute(); I was wondering how can I improve the above query so that it looks for all potential results based on partial matching of letters?

I found the mistake. All I had to do was to add a "," after the beforeShowday to separate it from the onSelect function. You could've just told me this. Also I don't even have to create a variable outside the ajax as you previously told me. It works fine without it. Here's the updated code. <script> $(document).ready(function() { function formattedDate(d = new Date) { let month = String(d.getMonth() + 1); let day = String(d.getDate()); const year = String(d.getFullYear()); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return `${year}-${month}-${day}`; } $.ajax({ type: "POST", url: 'snippets/adapter-fetch.php', data: {}, dataType: 'json', success: function(highlighted) { $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, beforeShowDay: function(date) { newDate = formattedDate(date); for(let x=0; x < highlighted.length; x++) { console.log(highlighted[x], newDate); if (highlighted[x] === newDate) { return [true, 'Highlighted', '']; // that 3rd index is the tooltip text } } return [true, '']; // default if not a highlight }, onSelect: function () { var getDate = $("#datetimepicker1").val(); $.ajax({ type: "POST", url: "snippets/adapter-set.php", data: { date: getDate }, success: function(data) { // alert(data); }, error: function() { alert("Error."); } }); } }); } }); }); </script>

I'm not asking you to redo the whole code. The code I have works. It just needs to be reformatted so both work on the same page. And I understand about being only able to using a single datepicker instance. And like I said before, I have tried many different variations in the past 24 hours and none of them work. So either I keep going in circles or you can help me out and insert your code snippet in the right place into my code. It helps to see it visually. Here's the updated code with what you were trying to say. It doesn't show the Calendar anymore and I get this error in the console "Uncaught SyntaxError: Unexpected identifier". <script> $(document).ready(function() { function formattedDate(d = new Date) { let month = String(d.getMonth() + 1); let day = String(d.getDate()); const year = String(d.getFullYear()); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return `${year}-${month}-${day}`; } //CODE#1 // THIS CODE FETCHES DATES FROM A MYSQL TABLE AND HIGHLIGHTS THEM ON A DATEPICKER CALENDAR var highlighted = null; $.ajax({ type: "POST", url: 'snippets/adapter-fetch.php', data: {}, dataType: 'json', success: function(data) { highlighted = data; $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, beforeShowDay: function(date) { newDate = formattedDate(date); for(let x=0; x < highlighted.length; x++) { console.log(highlighted[x], newDate); if (highlighted[x] === newDate) { return [true, 'Highlighted', '']; // that 3rd index is the tooltip text } } return [true, '']; // default if not a highlight } onSelect: function () { var getDate = $("#datetimepicker1").val(); $.ajax({ type: "POST", url: "snippets/adapter-set.php", data: { date: getDate }, success: function(data) { // alert(data); }, error: function() { alert("Error."); } }); } }); } }); }); </script>

Been trying your method many different ways and it still doesn't work. Could you please add your edits to the entire code below instead of bits and pieces? Here's my code with your supposed update code. It doesn't return any errors, but it doesn't highlight the dates either. <script> $(document).ready(function() { function formattedDate(d = new Date) { let month = String(d.getMonth() + 1); let day = String(d.getDate()); const year = String(d.getFullYear()); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return `${year}-${month}-${day}`; } //CODE#1 // THIS CODE FETCHES DATES FROM A MYSQL TABLE AND HIGHLIGHTS THEM ON A DATEPICKER CALENDAR var highlighted = null; $.ajax({ type: "POST", url: 'snippets/adapter-fetch.php', data: {}, dataType: 'json', success: function(data) { highlighted = data; $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, beforeShowDay: function(date) { newDate = formattedDate(date); for(let x=0; x < highlighted.length; x++) { console.log(highlighted[x], newDate); if (highlighted[x] === newDate) { return [true, 'Highlighted', '']; // that 3rd index is the tooltip text } } return [true, '']; // default if not a highlight } }); } }); // CODE#1 // THIS CODE INSERTS AND REMOVES THE SELECTED DATES FROM THE MYSQL TABLE. $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, onSelect: function () { var getDate = $("#datetimepicker1").val(); $.ajax({ type: "POST", url: "snippets/adapter-set.php", data: { date: getDate }, success: function(data) { // alert(data); }, error: function() { alert("Error."); } }); } }); }); </script>

I sort of understand what you're trying to say. Can you show me an example of setting up a variable outside the ajax using my code? Seeing it would help a lot.

I have finally solved this issue. It was a lot more complicated than I originally imagined. Here's code. <script> $(document).ready(function() { function formattedDate(d = new Date) { let month = String(d.getMonth() + 1); let day = String(d.getDate()); const year = String(d.getFullYear()); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return `${year}-${month}-${day}`; } $.ajax({ type: "POST", url: 'snippets/adapter-fetch.php', data: {}, dataType: 'json', success: function(highlighted) { $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, beforeShowDay: function(date) { newDate = formattedDate(date); for(let x=0; x < highlighted.length; x++) { if (highlighted[x] === newDate) { return [true, 'Highlighted', '']; // that 3rd index is the tooltip text } } return [true, '']; // default if not a highlight } }); } }); }); </script> // PHP adapter-fetch.php $global_user_id = 5; $find_query = $db->prepare("SELECT date_available FROM user_dates WHERE user_id = :user_id"); $find_query->bindParam(':user_id', $global_user_id); $find_query->execute(); $result_find = $find_query->fetchAll(PDO::FETCH_ASSOC); $dates = []; if(count($result_find) > 0) { foreach($result_find as $row) $dates[] = $row['date_available']; } echo json_encode($dates); So now the above code will highlight all the dates I fetch from the database table. And my original code will insert and delete dates entries when clicking a date on the Calendar. Having said that I have a new issue. Here's the full code combined. <script> $(document).ready(function() { function formattedDate(d = new Date) { let month = String(d.getMonth() + 1); let day = String(d.getDate()); const year = String(d.getFullYear()); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return `${year}-${month}-${day}`; } // THIS CODE WILL HIGHLIGHT THE DATES $.ajax({ type: "POST", url: 'snippets/adapter-fetch.php', data: {}, dataType: 'json', success: function(highlighted) { $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, beforeShowDay: function(date) { newDate = formattedDate(date); for(let x=0; x < highlighted.length; x++) { if (highlighted[x] === newDate) { return [true, 'Highlighted', '']; // that 3rd index is the tooltip text } } return [true, '']; // default if not a highlight } }); } }); // THIS CODE WILL INSERT/DELETE THE DATES $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, onSelect: function () { var getDate = $("#datetimepicker1").val(); $.ajax({ type: "POST", //or GET. Whichever floats your boat. url: "snippets/adapter-set.php", data: { date: getDate }, success: function(data) { // alert(data); }, error: function() { alert("Error."); } }); } }); }); </script> It seems like the ajax code that highlights the dates won't work if I have both of them together. Can you tell me why I can't use the "$('#datetimepicker1').datepicker" twice in the same script? It doesn't return any errors. It just doesn't highlight the dates.

The alert shows the dates that the user already inserted into the database. Same output when using console.log. Like this. Shows three different dates without any spacing between them. 2021-06-022021-06-032021-06-01

Alright so I fixed that issue. The alert wouldn't work if I had the "json" in the function. Here's the updated code. $.post('snippets/adapter-fetch.php', {}, function(data) { $("#datetimepicker1").datepicker({ datesEnabled : data.datesEnabled }); alert(data); }); It returns the correct dates(eg. yy-mm-dd) from the adapter-fetch.php. Now I need to know how I can highlight these dates on the datepicker?

I used alert to return the output but it's not working. I might be doing it wrong. No popup shows up. $.post('snippets/adapter-fetch.php', {}, function(data){ $("#datetimepicker1").datepicker({ datesEnabled : data.datesEnabled alert(data); }); }, 'json'); It gives me this error. Uncaught SyntaxError: Unexpected identifier

I am trying to create a simple calendar where a user can add/remove their availability date. This part works so far. Now what I am having trouble with is highlighting the already selected dates that are fetched from a MySQL database. Here's my code. // HTML <div id="datetimepicker1"></div> // Jquery/Ajax <script> $(document).ready(function () { $('#datetimepicker1').datepicker({ dateFormat: "yy-mm-dd", multidate: true, onSelect: function () { var getDate = $("#datetimepicker1").val(); $.ajax({ type: "POST", //or GET. Whichever floats your boat. url: "snippets/adapter-set.php", data: { date: getDate }, success: function(data) { // alert(data); }, error: function() { alert("Error."); } }); } }); }); </script> // PHP // adapter-set.php $post_date = $_POST['date']; $find_query = $db->prepare("SELECT user_id FROM user_dates WHERE date_available = :date_available"); $find_query->bindParam(':date_available', $post_date); $find_query->execute(); $result_find = $find_query->fetchAll(PDO::FETCH_ASSOC); if(count($result_find) > 0) { foreach($result_find as $row) { $user_id = $row['user_id']; } $delete_query = $db->prepare("DELETE FROM user_dates WHERE user_id = :user_id"); $delete_query->bindParam(':user_id', $user_id); $delete_query->execute(); $result_delete = $delete_query->execute(); if($result_delete == false) { echo 'delete false'; } else { echo 'delete success'; } } else { $insert_query = $db->prepare("INSERT INTO user_dates(date_available) VALUES(:date_available)"); $insert_query->bindParam(':date_available', $post_date); $result_insert = $insert_query->execute(); if($result_insert == false) { echo 'insert false'; } else { echo 'insert success'; } } The above code works fine. It inserts and deletes a date row in MySQL database table based on a click. Now what I would like to do is to highlight all the "available" dates that are already inserted into the database; so that the user knows which dates he has already selected. This is my code for that. But it doesn't seem to be working. No errors. It's just not highlighting the inserted dates. Can you tell me what I'm doing wrong? // JQUERY <script> $(document).ready(function() { $.post('snippets/adapter-fetch.php', {}, function(data){ $("#datetimepicker1").datepicker({ datesEnabled : data.datesEnabled }); }, 'json'); }); </script> // PHP // adapter-fetch.php $global_user_id = 5; $find_query = $db->prepare("SELECT date_available FROM user_dates WHERE user_id = :user_id"); $find_query->bindParam(':user_id', $global_user_id); $find_query->execute(); $result_find = $find_query->fetchAll(PDO::FETCH_ASSOC); if(count($result_find) > 0) { foreach($result_find as $row) { $date_available = $row['date_available']; echo $date_available; } } else { echo 'not dates available'; }

Here's what I'm trying to do. 1. A user creates a calendar that shows which dates he's available. This calendar could showcase availability for up to a year. 2. Other users can do a search for a user that's available on a set date. For e.g. July 1st. 3. All the users available on July 1st will show up in the search results. There is no booking for appointments involved. It simply needs to show the users available on set dates. I am wondering what's the best way to create this calendar feature?

Wow that was a simple solution. It works now. Here is the update code. All I had to do was add ".reverse()" to the each data. <div id="output"></div> <script> $(document).ready(function(){ $.ajax ({ type: 'GET', url: "https://3rdpartywebsite.com/api/getcustomers", dataType: 'json', success: function(data) { $.each(data.reverse(), function(i, v) { var customerId = v.customerId; var firstName = v.firstName; var lastName = v.lastName; var createdDateTime = v.createdDateTime; $('#output').append('<ul class="output-ul">' + '<li>' + customerId + '</li>' + '<li>' + firstName + '</li>' + '<li>' + lastName + '</li>' + '<li>' + createdDateTime + '</li>' + '</ul>'); }); } }); }); </script>

I was hoping for a simpler solutions where someone can edit my code to include the sort by. I've been researching and trying to do it myself but no luck so far. Also I am noticing that the page load time increases every time I submit the record and I retrieve them from the API. It really shouldn't be taking a min to load 20 records from the API. Do you think if I create a pagination that it'll slow the load time? Or you think it's an issue on the API party's end?

I am retrieving data using AJAX. I would like to sort them from newest to oldest date. Currently they show from oldest to newest. How do I do that? <div id="output"></div> <script> $(document).ready(function(){ $.ajax ({ type: 'GET', url: "https://3rdpartywebsite.com/api/getcustomers", dataType: 'json', success: function(data) { $.each(data, function(i, v) { var customerId = v.customerId; var firstName = v.firstName; var lastName = v.lastName; var createdDateTime = v.createdDateTime; $('#output').append('<ul class="output-ul">' + '<li>' + customerId + '</li>' + '<li>' + firstName + '</li>' + '<li>' + lastName + '</li>' + '<li>' + createdDateTime + '</li>' + '</ul>'); }); } }); }); </script>

I have a solution. Apparently I was inputting the wrong label name. Instead of it being "FirstName", it's actually with lowercase "firstName". Here's the new code. <script> $.ajax ({ type: 'GET', url: "https://3rdpartywebsite.com/api/GetCustomers", dataType: 'json', success: function(data) { $.each(data, function(i, v) { $('.output').append(v.firstName); $('.output').append(v.lastName); }); } }); </script> // To access individual record inside the array. console.log(data[0].firstName);

I did that. No more error but nothing is displaying in the .output div. $.each(data, function(i, v) { $('.output').append(v.LastName); });

I am retrieving data from a third party's API using AJAX method. I would like to do two things. 1. Display the data records on a page. 2. Create a pagination on the page to display records more efficiently. I am expecting to retrieve possibly hundreds of records. I can normally do this using PHP but since I am retrieving the records using AJAX, the pagination is gonna be a challenge. First things first is to display the records. Here is my AJAX code. It displays the log data fine. But it doesn't display any data in the "output" div. And it gives this error in the console. Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Object.success <div class="output"></div> <script> $.ajax ({ type: 'GET', url: "https://3rdpartywebsite.com/api/GetCustomers", dataType: 'json', processData: false, contentType: false, success: function(data) { console.log(data) $newData = JSON.parse(data); $.each($newData, function(i, v) { $('.output').append(v.LastName); $('.output').append(v.FirstName); }); } }); </script> What am I doing wrong?

This issue has been resolved. I did not have to do any hack tricks to make it work. The problem was simple. 1. They provided the incorrect URL. 2. All form required fields had to be filled out before submitting. 3. Had to clear my browser's cache before doing a new test. Now it submits the form data to their API just fine.

Yes it is a private API created just for us. Supposedly the only two compatible methods to submit the form are AJAX and CURL. The AJAX code you see is what they provided to submit the form. I will get more clarification from them tomorrow.

"CreateCustomer" would create the customer and return the result message if it's successful or not. The verification will be done manually on their end and they will update this "Customer". At that point I use "GetCustomers" to retrieve that information and find out if it has been verified or not. There is no API key provided. It's strictly submitted through that URL they provided. The form field names are exactly as they wanted. AJAX is one of the methods to submit the form. The other one is CURL but i'm not familiar with that. Now that you mentioned it, yeah this method doesn't seem safe.

Not sure if i'm allowed to say the company but they are giving a private access to their API that's not available to others. It's essentially to verify customers. I send the data to their them via AJAX call. Here is the full code. <form id="submit-form" method="post" enctype="multipart/form-data"> <fieldset> <label>Last Name *</label> <input type="text" name="LastName" maxlength="300" placeholder="Last Name" /> </fieldset> <fieldset> <label>First Name *</label> <input type="text" name="FirstName" maxlength="300" placeholder="First Name" /> </fieldset> <fieldset> <label>Date Of Birth *</label> <input type="text" name="DateOfBirth" id="datepicker2" placeholder="Choose a date" /> </fieldset> <fieldset> <label>Phone Number *</label> <input type="tel" name="PhoneNumber" maxlength="50" placeholder="123-4567-8901" /> </fieldset> <fieldset> <label>Email Address *</label> <input type="email" name="EmailAddress" maxlength="100" placeholder="Email Address" /> </fieldset> <fieldset> <label>Company Position *</label> <select class="select-category" name="CompanyPosition" > <option value="">Select</option> <option value="President">President</option> <option value="Director">Director</option> </select> </fieldset> <fieldset> <label>Legal Company Name *</label> <input type="text" name="LegalCompanyName" maxlength="500" placeholder="Legal Company Name" /> </fieldset> <fieldset> <label>Doing Business Name As *</label> <input type="text" name="DoingBusinessAsName" maxlength="500" placeholder="Doing Business Name As" /> </fieldset> <fieldset> <label>Corporate Registration Jurisdiction *</label> <select class="select-category" name="CorporateRegistrationJurisdiction" > <option value="">Select</option> <option value="USA" >USA</option> <option value="Canada" >Canada</option> </select> </fieldset> <fieldset> <label>Business Address *</label> <input type="text" name="BusinessAddress" maxlength="500" placeholder="Business Address" /> </fieldset> <fieldset> <label>Photo ID *</label> <input type="file" name="PhotoId" class="input-image"> </fieldset> <fieldset> <input type="submit" name="submit" value="Submit" /> </fieldset> </form> <script> var url = "https://3rdpartywebsite.com/api/CreateCustomer"; $('#submit-form') .submit(function (e) { $.ajax ({ url: url, type: 'POST', data: new FormData(this), processData: false, contentType: false, success: function(data) { alert(data.message); } }); e.preventDefault(); }); </script> That is the code example they showed me. It should work without me doing anything else. But I get that "...blocked by CORS policy" error in the inspect console.

I just meant that an API integration should be pretty straightforward process instead of having to find certain hacks to try and make it work. This is my first time dealing with an API that's not SDK based. I guess the issue is mainly on their end.

The above code echos an error. Warning: file_get_contents(https://3rdpartywebsite.com/api): failed to open stream: HTTP request failed! HTTP/1.1 411 Length Required in Though I should mention that I am trying to create a customer. So the full url is like this "https://3rdpartywebsite.com/api/createCustomer" Still I shouldn't have to go through all this trouble to make a simple AJAX call to a third party API.

I see. So what would a pure PHP solution look like? My hosting provider is telling me that mod_proxy is already installed on the server. So could it be something else?

The thing is this is not a typical API integration. The third party does not provide any API files to added to the server. The only way to connect to this particular third party's API is through a host url they provided. Here is my original ajax code to submit the form's info to that API. <script> var url = "https://3rdpartywebsite.com/api"; $('#submit-form') .submit(function (e) { $.ajax ({ url: url, type: 'POST', data: new FormData(this), processData: false, contentType: false, success: function(data) { alert(data.message); } }); e.preventDefault(); }); </script> In your example, are you prosing that I should change the url to this? <script> var url = "http://yourdomain.com/third-party/api"; $('#submit-form') .submit(function (e) { $.ajax ({ url: url, type: 'POST', data: new FormData(this), processData: false, contentType: false, success: function(data) { alert(data.message); } }); e.preventDefault(); }); </script> And where do I add the two "ProxyPass" lines on the page? In .htaccess file? Because if I do that, it gives me an internal server error.