Search the Community
Showing results for tags 'ajax'.
-
Hey, everyone. Currently working on a project that requires a lot of Javascript. This includes Ajax requests, some event listeners, Google maps integration, a Wysiwyg-editor and probable some more. I'm currently working with JQuery as I'm not much of a Javascript developer. I will group the code by usage, show an example and tell you if I experience weird behavior. 1. Drop-down search functionality (SOLVED) 2. Multiple file uploads as attachments Intro: The system is based around offers. These offers should allow attachments and possibly a main image. (Think like Wordpress' main article image) Problems/questions/etc: 1) I want the uploading to be done with Ajax. I found a good script that handles this. The problem is that the attachments must be tied to the ID of an offer. This ID, however, does not exists before an offer is published or saved as a draft. How can I tie these two together? 2) As users must be logged in, I create a folder for the user if one does not already exists. This folder is named by the User-ID. This is done because I remember reading about a problem occuring when too many files are lookated in the same folder. Is this neccasary or good, or would you recommend something else? Table structures and data flow: (Only the key structure) Offers ( offer_id, status, user_id* ..... ) Offers_attachments ( offer_id, path, extention.... ) Users ( user_id, ...info... ) Upload script used: (Not that it really matters) valums file-uploader Help me pick a solution: 1.) A two-step process. The users fill out vital information first, click next, (and the article is saved) then add attachments and save with a status. 2.) An empty offer is inserted to the DB when a user clicks "Add new offer". We now have an offer ID to tie attachments to. A daily cron job deletes offers/attachments that were never "Saved" by clicking "Save the offer" by the user. 3.) Attachments are tied to the user instead. The users can then add uploaded attachments found in the database related to their user.
-
Hi, I read from P.459 of the book , and know about the other Server-Side technology called "Jaxer". But the site(www.jaxer.org) is nothing related to computer now. And I search for the web; there's not much about jaxer. The little knowledge I learn form the web is that "jaxer" is developed by Aptana. But Aptana's site doesn't contains project about "jaxer" anymore. Is "jaxer" dead?
-
Chapter 11 Ajax Page 456 Not Working?
rafaec posted a topic in Modern Javascript: Develop and Design
Hi everyone, me again... I have broken my head over this one...no idea why it doesn't work. HTTP: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <form action="login.php" method="post" id="loginForm" novalidate> <fieldset> <legend> Login </legend> <div><label for="email"> Email adress </label> <input type="email" name="email" id="email" required /></div> <div><label for="password"> Password </label> <input type="password" name="password" id="password" required /> </div> <div><label for="submit"> Submit </label> <input type="submit" name="Login →" id="submit"></div> </fieldset> </form> <script src="resources/login.js"> </script> <script src="ajax.js"> </script> </body> </html> LOGIN.JS // Script 11.x - login.js #2 // Function called when the form is submitted. // Function validates the form data and returns a Boolean value. function validateForm() { 'use strict'; // Get references to the form elements: var email = document.getElementById('email'); var password = document.getElementById('password'); // Validate! if ( (email.value.length > 0) && (password.value.length > 0) ) { // Perform an Ajax request: var ajax = getXMLHttpRequestObject(); ajax.onreadystatechange = function() { console.log (ajax.readyState); if (ajax.readyState == 4) { // Check the status code: if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ) { console.log(ajax.status); console.log(ajax.responseText); if (ajax.responseText == 'VALID') { console.log('works'); alert('You are now logged in!'); } else if (ajax.responseText == 'INVALID') { console.log('failed'); alert('The submitted values do not match those on file!'); } else { alert ('Unknown problem') } } else { document.getElementById('theForm').submit(); } } }; ajax.open('POST', 'resources/login.php', true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); var data = 'email=' + encodeURIComponent(email.value) + '&password=' + encodeURIComponent(password.value); ajax.send(data); return false; } else { alert('Please complete the form!'); return false; } } // End of validateForm() function. // Function called when the window has been loaded. // Function needs to add an event listener to the form. function init() { 'use strict'; // Confirm that document.getElementById() can be used: if (document && document.getElementById) { var loginForm = document.getElementById('loginForm'); loginForm.onsubmit = validateForm; } } // End of init() function. // Assign an event listener to the window's load event: window.onload = init; PHP is the same as the book. The weird thing is that when I put the valid email adresses for some reason Ajax.responseText returns 'VALID", however, it still shows the alert 'Unknown problem'. I made a console.log so I am sure it returns 'VALID' and also to for ajax status. Everything seems to be ok, however, I can't make it to display 'You are now logged in". Anyone can see where the error is? Thanks! -
Okay so I just finished reading the Javascript book (including Ch 11) and I am pushing forward trying to get AJAX to work on my prototype website for the first time. Specifically I want to have my registration page use AJAX to notify the user of whether their desired username is available in our system or not. I am familiar with HTML / CSS so I don't think the issue is in there, and am familiar enough with PHP and MySQL but not necessarily how PHP interacts with Javascript via AJAX. Here is my code, emphasis on the Javascript portion (and PHP portion) because those are the parts that I am most unfamiliar with: <tr> <td class="form_left"><label for="username">Username:</label></td> <td class="form_right"><input type="text" id="username" name="username" size="25" maxlength="25" value="<?php if (isset($_POST['username'])) {echo $_POST['username'];} ?>" onkeyup="verifyUsername()" /><span id="usernameSpan" style="color:red;">*</span></td> </tr> ... <script src="/js/register.js"></script> <script src="/js/ajax.js"></script> Here is my PHP code: require_once ($_SERVER["DOCUMENT_ROOT"] . '/includes/config.inc.php');[/background][/size][/font][/color] [color=#000000][font=verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif][size=3][background=rgb(245, 245, 245)]// if (isset ($_POST['enteredUsername'])) { $submitted_username = $_POST['enteredUsername']; require_once (MYSQL); // Connect to the db. } $check_username_query = "SELECT username FROM users WHERE username = $submitted_username"; $r = mysqli_query ($dbc, $check_username_query) ; if (mysqli_num_rows($r) == 0) { echo 'VALID'; } else { echo 'INVALID'; } And here is my Javascript code: function verifyUsername() { 'use strict'; //Get a reference (get element by ID) to the entered username value: var ajax = getXMLHttpRequestObject(); var enteredUsername = U.$('username'); var usernameSpan = U.$('usernameSpan'); // Validate the first name: if (/[a-zA-Z0-9._-]{1,25}$/i.test(username.value)) { //tested true in console if (usernameSpan.textContent !== undefined) { usernameSpan.textContent = ""; } else {usernameSpan.innerText = "";} //Begin the AJAX request ajax.onreadystatechange = function() { if (ajax.readyState == 4){ //Check the status code: if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ) { if (ajax.responseText == 'VALID') { if (usernameSpan.textContent !== undefined) { usernameSpan.textContent = "Username available"; } else {usernameSpan.innerText = "Username available";} } else { if (ajax.responseText == 'INVALID'){ if (usernameSpan.textContent !== undefined) { usernameSpan.textContent = "Username not available"; } else {usernameSpan.innerText = "Username not available";} } } } } }; ajax.open('POST', 'resources/verifyusername.php', true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); var data = 'enteredUsername=' + encodeURIComponent(username.value); ajax.send(data); } else { if (usernameSpan.textContent !== undefined) { usernameSpan.textContent = "Username must be 25 characters or less, contain only \n\ numbers, letters, '.', '_', and '-'. "; } else {usernameSpan.innerText = "Username must be 25 characters or less, contain only \n\ numbers, letters, '.', '_', and '-'."; } } } //End of verifyUsername() function As of right now when I enter a username it changes the asterisk to a blank spot. This means that my PERL regular expression is at least passing. If I can at least narrow down the error to whether it's the PHP or Javascript code causing the issue then that will make it much easier to eventually find and fix the problem. Any help would be greatly appreciated! Once I get this AJAX thing down the first time it will make all subsequent attempts much easier because I will have a template to base my attempts off of. I have been dabbling in the Developer's Console in Chrome which at least shows verifyusername.php being initiated by register.js but not much more info.
-
Hello. I just read the AJAX chapter in PHP and MySQL and want to learn much more on the topic--especially concerning PHP's role with AJAX. I'm seriously considering buying the AJAX: Visual QuickProject book, but noticed it was published a while ago. I'm wondering about both what deprecated features (in PHP and Javascript) might be present in the book and whether I should start with the Javascript book. Please kindly advise. Thank you!
-
I have file "phone.csv" for Phone number details and want to get the required phone though forms. Please help me. "phone.csv" contains four columns without header name: like - "James", "Cat", "26", " 99556745" . The list contains around 60 rows. <html><head></head><body> <?php $file = fopen("phone.csv","r"); while(! feof($file)) { print_r(fgetcsv($file)); } fclose($file); ?> <form action="check.php" method="post"> <p>Enter Name: <br> <input type="text" name="username" size="10" /> <input type="submit" name="submit" value="Enter" /></p> NAME: $col1 <br> NICK NMAE: $col2 <br> AGE: $col3 <br> PHONE: $col4 </form></body></html> I am unable to write the php code for the "check.php" and link to the form. Kindly help me out.
-
Hi, This book explains everything well and the examples are working fine, as does all Larrys books :-) But now I have come to a full stop… I am not able to make the Ajax contact form work (page 456-460). Do I have to complete the php script or does the example (normally) work out of the box? I have downloaded the latest update of the code from Larrys website. I have Wampserver on Windows, and have tested in Chrome and FireFox. I have also tested Larrys debugging techniques, like eating some fruit and go for a walk, but nothing helps ;-) Can anyone help me in the right direction? Thanks! Magnus
-
Ajax & Posting Radio Button Value
skim5_1999 posted a topic in Modern Javascript: Develop and Design
Hello I'm building a restaurant reservation form which needs to do 3 things - 1) Allow users to input # of people reserving for (Drop down) 2) Then dynamically based on # of people show available rooms (Radio button) 3) Then based on selected room, show date availability via (jquery datepicker) I need all 3 items to access mysql database and appear on same page without refresh. I have 1 & 2 working well but can't figure out how to pass on #2's selected room value onto a php and datepicker id to show dynamically. However, #3, as an independent file actually works well. Hence I have a challenge of linking 2 to #3. I'd greatly appreciate your expert input and apologies in advance for the length of the codes below. View.html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/ajax.js"></script> <script type="text/javascript"> function showUser(str) { var venue = '<?php echo $_GET['VenueID'] ?>'; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } var ajax = getXMLHttpRequestObject(); ajax.onreadystatechange=function() { if (ajax.readyState==4 && ajax.status==200) { document.getElementById("txtHint").innerHTML=ajax.responseText; } } //xmlhttp.open("GET","test.php?c="+str,true); ajax.open("GET","roomselect.php?c="+str+"&venue="+venue,true); ajax.send(null); } </script> </head> <body> <form> <select name="username" onchange="showUser(this.value)"> <?php $venue = $_GET['VenueID'];?> <option value="">Select # of People here </option> <?php while ($row=mysql_fetch_array($result)) { echo "<option value=\"".$row['Capacity']."\""; echo ">".$row['Capacity']."</option>\n"; ; } ?> </select> </form> <br /> <br /> <br /> <div id="txtHint"><b>Person info will be listed here. </b></div> <br /> <br /> <br /> <h3>Would like to show a button that upon clicking, would show datepicker here</h3> <br/> </body> Here's the Roomselect.php which the above references and contains the radio select buttons for rooms. <?php $c=$_GET["c"]; $id = &$_GET["venue"]; $con = mysql_connect('DBHOST', 'DBUSER', ''); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("DBNAME", $con); if(isset($id ) && is_numeric($id)) { $sql="SELECT * FROM venue_room WHERE MaxCap > $c and VenueID =$id"; $result = mysql_query($sql); echo mysql_error($con); while($row = mysql_fetch_array($result)) { echo ' <input type ="radio" name="'.$row['RoomName'].'" id="'.$row['RoomID'].'" value = "'.$row['RoomID'].'" > <img src = " '.$row['Image1'],'" alt="" height="100" width="120" /> in ' . $row['RoomName'] . ' at venueID '.$id.' with capacity from '.$row['Capacity'].' to '.$row['MaxCap'].'</br> ' ; } } else { echo "Oops! Sorry, but this link seems to not be working. Please press back and try again!" ; } ?> As mentioned, the above two files have #1 & #2 working well together on same page without refresh. Now for #3...below are the independent datepicker files which work well on its own. I just can't figure out how to link the below to #1 & #2 Calendar.html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { var selected_dates = new Array(); // get all the events from the database using AJAX selected_dates = getSelectedDates(); $('#datepicker').datepicker({ //Image: '/images/logo.png',//delete this and the next two lines (so first line showing is dateFormat to go to the way it was before. And then must change //ImageOnly: true, //showOn: 'both', dateFormat: 'yy-m-d', inline: true, beforeShowDay: function (date) { // get the current month, day and year // attention: the months count start from 0 that's why you'll need +1 to get the month right var mm = date.getMonth() + 1, dd = date.getDate(), yy = date.getFullYear(); var dt = yy + "-" + mm + "-" + dd; if(typeof selected_dates[dt] != 'undefined') { // put a special class to the dates you have events for so you can distinguish it from other ones // the "true" parameter is used so we know what are the dates that are clickable return [true, " my_class"]; } return [false, ""]; }, onSelect : function(date) { $('#date_select').val(date); $('#date_selection_container').html(date); } }); }); function getSelectedDates() { var the_selected_dates = new Array(); $.ajax( { url: 'dateselect.php', dataType: 'json', async: false, success: function(data) { $.each(data, function(n, val) { the_selected_dates[val.event_date] = val; }); } }); return the_selected_dates; } </script> </head> <body> <h3>3. Select Date</h3> <br/> <div id="datepicker"></div> <!--div id="date_selection_container"></div--> </body> </html> And finally the dateselect.php which the above calendar.html file references I fully admit I found the below on a website which uses PHP PDO which I'm not familiar with. I stuck to it though because it's working <?php session_start(); // Initializations of the variables used $dates = array(); // MYSQL connection credentials include_once "Connection.php"; // PDO - connect to the database try { $dbh = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME, DB_USER, DB_PASS); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $dbh->setAttribute(PDO::ATTR_PERSISTENT, true); $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, true); $dbh->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY, true); } catch (PDOException $e) { echo 'Error!: ' . $e->getMessage() . '<br/>'; } // take the events from the table named "events" try { $id = (int)$_SESSION['VenueID']; //leave it as session as needed for multiple pages $room = (int)$_POST['RoomID']; $sql = ' SELECT * FROM venue_room_availability WHERE IsAvailable = "Y" and RoomID=:Room and VenueID = :Venue '; $stmt = $dbh->prepare($sql); $stmt->bindParam(':Venue',$id,PDO::PARAM_INT); $stmt->bindParam(':Room',$room,PDO::PARAM_INT); $stmt->execute(); } catch (PDOException $e) { print($e->getMessage()); die; } while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { // because $row['event_date'] will have this form: 2012-01-10 and in Javascript we have 2012-1-10, // we need to rewrite it the way we use it in Javascript so we can compare it $row['event_date'] = date("Y-n-j", strtotime($row['event_date'])); $dates[] = $row; } echo json_encode($dates); ?> -
Hello -I'm trying to build a datepicker which only allows certain dates in my database to be selected.. Below are the codes...and the datepicker widget shows up but the "AvailableDate" (which is listed in the database as "2012-05-09") are not showing up in different color. Please can someone help to see where the error is? Thank you! [left]<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="css/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <script type = "text/javascript"> $(function(){ $.ajax({ url: "dates2.php", data: "action=showdates&id=1", dataType: "json", success: function(calendarEvents){ $(".calendarwidget").datepicker({ // [rows, columns] if you want to display multiple calendars. numberOfMonths: [1, 1], showCurrentAtPos: 0, beforeShowDay: function (date){ for (i = 0; i < calendarEvents.length; i++) { if (date.getMonth() == calendarEvents[i][0] - 1 && date.getDate() == calendarEvents[i][1] && date.getFullYear() == calendarEvents[i][2]) { //[disable/enable, class for styling appearance, tool tip] return [false,"ui-state-active","Event Name"]; } } return [true, ""];//enable all other days } }); } }); }); </script> </head> <body> <div class="calendarwidget"><!--calender widget is loaded here--> </div> </body> </html>[/left] [left] [/left] <?php [left]//DB CONFIG $hostname_logon = '***'; //Database server LOCATION $database_logon = '****'; //Database NAME $username_logon = '***'; //Database USERNAME $password_logon = '***'; //Database PASSWORD //Table config $tablename = "venue_room_availability"; //Name of the DB table $event_id = "AvailableID"; //Primary Key field of the table //Connect to the DB $connections = mysql_connect($hostname_logon, $username_logon, $password_logon) or die ('Unabale to connect to the database'); mysql_select_db($database_logon) or die ("Error in query: $qry. " . mysql_error()); /****** Bread & Butter *************/ $action = $_REQUEST['action']; switch ($action){ case 'showdates': $qry = "SELECT * FROM ".$tablename.""; $result = mysql_query($qry) or die ("Error in query: $qry. " . mysql_error()); echo '['; while($row = mysql_fetch_assoc($result)); //$row['AvailableDate'] =rtrim($row['AvailableDate'], ","); echo $row['AvailableDate']; echo ']'; break; } ?>[/left] [left] [/left]
- 4 replies
-
- datepicker
- jquery
-
(and 2 more)
Tagged with:
-
I kind of need an ajax script to view/add/edit/delete from the database. Your second example display results from database (view), I guess I can work upon it to make it run with delete, but I am not sure how to make it work with edit. Do you have any suggestions or maybe you have such an view/add/edit/delete example at hand? I am also wondering if the use of eval() in the script does not present a security risk? At least in PHP everywhere I turn says "eval is evil". Regarding the security issue, from what I've learned from your books the input data must be sanitized and validated. I haven't seen anythink like that in the JavaScript example you offer. Isn't any security precautions to be take or it was skipped for brevity? I am also wondering if the example offered is still actual considering the book is relatively old and I've seen that you have written a new book "Modern Javascript: Develop and Design". At this time I would probably be satisfied with an example that is doing view/add/edit/delete as this is pretty much what I need. I consider buying this book, is there any chance I will find inside what I am looking for? Another questions is what happens when the javascript is disabled? In the first example it creates no difficult as the validations occurs in PHP. What happens in the second example? It feels like something is missing...
-
Hi. I was just wondering how facebook does it's continious updates on the wall if you know what I mean, I take it after a certain amount of time it calls a scripts which then gets the latest round of updates. So what technologies would be used here ? and also how would you stop it from repeating it's-self(i.e. calling the same data from before) ? Also does anyone know of any examples of this ? Regards