Search the Community
Showing results for tags 'javascript'.
-
Hello, i'm new to javascript and currently in a bootcamp course to become a software developer. that being said there are a lot of new ideas that have been thrown at me in the past couple weeks and i'm having trouble completing our assignment for the week. I've been tasked with creating a site that takes an input and pushes it into an array and when a button is clicked that array gets made into a card that houses a name, a hogwarts house and a button. the button on these cards needs to be able to delete the card that the button is on. I've been able to do everything up until this point. i. can't get the button to only delete one card. it deletes every card, and even when i get the button to delete one card it won't delete any other card. how do i get this to work? I'll post my code so that gives better context. //html below <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <body> <div id="jumbo" class="jumbotron"> <h1 class="display-4">Sorting Hat</h1> <p class="lead">Hello muggles, are you a big fan of Harry Potter? </p> <hr class="my-4"> <p>Well you are in luck. Now you will be able to use this website to try on the sorting hat and see which house you will be sorted into.</p> <p class="lead"> <a id="initForm" class="btn btn-primary btn-lg" onclick="openForm();" href="#" role="button">Lets Get It Started!</a> </p> </div> <div id="form"> <form class="form-inline"> <h3 class="display-6">Enter First Year's Name</h3> <div class="form-group mx-sm-3 mb-2"> <label for="insertName" class="sr-only">name</label> <input type="text" class="form-control" id="insertName" placeholder="Harry Potter"> </div> <button id="sort" type="submit" class="btn btn-primary mb-2">Sort</button> </form> </div> <div id="studentCard"></div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="main.js"></script> </body> </html> //css below body { background-color: slategray; } #form{ display: none; } .expel{ background-color: blueviolet; padding: 15px 30px; } a{ list-style-type: none; color: white; } a:hover{ list-style-type: none; color: white; } //javascript below console.log("HelloWorld!"); //print to dom function for innerhtml const printToDom = (divId, textToPrint) => { console.log(textToPrint); const selectedDiv = document.getElementById(divId); selectedDiv.innerHTML = textToPrint }; //this is my hogwarts array const hogwartsHouse = [ 'Griffindor', 'Hufflepuff', 'Slytherin', 'Ravenclaw' ]; //this variable grabs the users input into my form const names = document.getElementById("insertName"); //this variable sets the student id to 0 //student id is located inside the sort init function let studentId = 0; const students = []; //this function allows my form to be seen function openForm() { x = document.getElementById("form"); if(x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }; //this function builds the card const sortBuilder = (sortingHat) => { let domString = ''; for(let i = 0; i < sortingHat.length; i++){ domString += `<div id="cardContainer">` domString += `<div class="card" style="width: 18rem;">` domString += `<div class="card-body">` domString += `<h5 class="cardTitle">${sortingHat[i].name}</h5>` domString += `<p class="card-text">${sortingHat[i].house}</p>` domString += `<a onclick="expelStudentEvent()" id="${sortingHat[i].id}" href="#" class="expel">Expel</a>` domString += `</div>` domString += `</div>` domString += `</div>` } printToDom('studentCard', domString) }; //make function for expel students events //loops over all of the expel buttons //adds the remove student function to each button //need remove student function //remove student with the id that is equal to the id of the button, e.target.id //pass in id of the card i'm clicking //i want this function to delete 1 card when the button on said card is clicked const expelStudentEvent = () => { let domString = ''; for(let i = 0; i < students.length; i++){ domString += `` } if(students.length = 0){} console.log(students) printToDom('studentCard', domString); }; //this function takes my users input into the form and my hogwarts array into an array that gives each input an id const sortInit = (e) => { const student = { id: studentId, name: names.value, house: hogwartsHouse[Math.floor(Math.random() * hogwartsHouse.length)], } students.push(student); console.log(students); studentId++; sortBuilder(students); }; // const removeCard = () => { // let myCard = document.getElementById(e.target.id); // } //this function holds my event listeners const events = () =>{ document.getElementById('sort').addEventListener('click', sortInit) document.getElementById(e.target.id).addEventListener('click', expelStudentEvent) } //this function holds all of the previous functions const init = () => { openForm(); sortBuilder(students); events(students) expelStudentEvent(e) sortInit(expelStudentEvent) }; //this function executes all functions init(); any advice or solutions you can give would be most welcome. -
I have studied php introduction and php advanced object oriented programming, Was able to get my hands on small projects such as building small websites, Buiding forums. I will like to know which project book is the best php project book guide to guide developers on building dynamic applications(such as social media platforms, educational platform, online libraries...etc) using php. Which is the best with detail and straight forward explanation. -
I have surf the web but still don’t find an explaining tutorial on how to use either google map or php google map to automatically detect the location of a user. This is what I want to achieve, during registration, a user current location will be extracted using either the js version of the map or the php version(depending on the one I saw a good way of using it), and extraction, the current town or city or village with also the country. Who can really put me through on how to use any of the above library -
(Using the example in Modern javascript) Am trying to submit data for processing and insertion into the database using php but it could not work and I don't why and these are the steps taking so far. 1. Using php alone, am able to insert data into the database an d this is the php code. <?php try { $linkas = 2; require_once 'db/DBConnect.php'; $errors = []; $good = true; if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['testimony'])): $testimony = filter_input(INPUT_POST, 'testimony', FILTER_SANITIZE_STRING); if (strlen($testimony) < 20): //report error and do not go $errors[] = 'It has to be more than 20 characters' . '<br>'; $good = false; else: $good = true; if ($good): $insertTestimony = 'INSERT INTO testimony(content, j_member_id, time_send) '; $insertTestimony .= 'VALUES (:testimony, :user_id, NOW())'; $insert = $conn1->prepare($insertTestimony); $insert->bindValue(':testimony', $testimony, PDO::PARAM_STR); $insert->bindValue(':user_id', $linkas, PDO::PARAM_INT); $insert->execute(); if ($insert->rowCount() == 1): //success message $_SESSION['msg'] = 'Thanks for the testimony'; header('Location: index.php'); exit(); else: //fail message echo 'Something is wrong, please resubmit'; endif; endif; endif; endif; } catch (Exception $e) { echo 'Database error: ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine(); } ?> After testing the php and seeing that it works, I proceeded to create the html page which is below <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <section class=""> <article> <div id="testifyForm"> <form action="" method="post" id="testimony" accept-charset="utf-8"> <fieldset> <legend>Your testimony</legend> <label for="testimony"></label> <textarea id="testimony" name="testimony" maxlength="300"></textarea> </fieldset> <input type="submit" name="testify" id="testify" value="Testify"> </form> </div> </article> </section> <script src="js/ajax.js"></script> <script src="js/testify.js"></script> </body> </html> Finally, I created the ajax.js script and testify.js script and placed them inside the js folder and link them to the html which you can see above. This is the testify script function validateForm() { 'use strict'; var testimony = document.getElementById('testimony'); if ((testimony.value.length > 20)) { var ajax = getXMLHttpRequestObject(); ajax.onreadystatechange = function () { if (ajax.readyState == 4) { if ((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 300)) { //return ajax.responseText document.getElementById('testifyForm').innerHTML = ajax.responseText; } else { document.getElementById('theForm').submit(); //return ajax.statusText }//End of status ajax = null; }//End of readyState };//End of onreadystatechange //return true; ajax.open('POST', 'empty.php', true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); var data = 'testimony=' + encodeURIComponent(testimony.value); ajax.send(data); return false; } else { document.getElementById('error').innerHTML = 'Characters must be more than 20 words'; return false; }//End of testimony } function init() { 'use strict'; if (document && document.getElementById) { var testifyForm = document.getElementById('testifyForm'); testifyForm.onsubmit = validateForm; } } window.onload = init; And this is the ajax script function getXMLHttpRequestObject() { var ajax = null; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Older IE. ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } return ajax; } The problem now is that ajax refuses to submit those data for processing and saving(which I believe PHP should handle). I also tried debugging it if there is any error by checking the console with ctrl+shift+j on chrome(that is the only step taken so far about debbuging) P.s. This is pure JavaScript and ajax not jquery
-
Hi Larry my name is sam can i first start by saying i absolutely love your books. i am currently working on a project where i have built the php side of things and now working on enhancing using javascript. i am adapting your script from your Modern javascript develop and design book on chapter 15, (view.js). But the problem i have is my php script loops through the database to show results and i am trying to pass the id of the data, like you do in your view.php script to the view.js script with, <script> var itemId = ' . $itemid .'; </script> BUT i have a while loop on the php script and the script tags are in the while loop like this, $query = "SELECT `item_id` FROM items"; $results = mysqli_query ($dbc, $query); while (list ($item_id ) = mysqli_fetch_array($results, MYSQLI_NUM)) { // Start the while Loop here ... echo '<form action="" method="post" id="bidForm" class="bidForm"> <input class="button" type="submit" value="Like" title="Like"> <input type="hidden" name="item_id" id="item_id" class="video" value="' . $item_id . '"> </form>'; ?> <script> var itemId = "<?php echo $item_id; ?>"; </script> } // End of while Loop here .. then link to external js script <script src="js/ajaxBid.js"></script> Just so you know this is not exact just example above but it does the exact same thing. So the problem is where it Loops the var itemId gets more then one value so you don't get the value of the button clicked sent to the ajax script. How can i get the id of the button clicked in my js script while still in the while loop???? sorry if this is really confusing i will answer any questions you might have. if you or anyone could explain in the simplest possible way where I'm going wrong as not brilliant at javascript yet, that would be amazing been stuck for ages on this. many thanks, Sam -
Hi I'm trying to find out 2 things, 1) how to pass a button value that comes from mysqli while loop to javascript then on to Ajax script. 2) how to pass a php array on to javascript and then onto the Ajax script. I will be really grateful if anyone could help. many thanks sam
-
OS: Windows 7 php version: 5.5.8 (running on EasyPHP Dev Server 14.1 VC11) Browser: Firefox 40.0.2 (same results in Chrome and IE) I am having problems with the show_image script in chapter 11. When I select an image from the list it opens a popup window of the appropriate size but with no image. In firefox I get the error message: 'The image "http://127.0.0.1/scripts/site/show_image.php?image=Picture.png"cannot be displayed because it contains errors.' When I use the Web Developer menu to View Response Headers all is as expected except that it lists Content-Length: 0. I commented out the header calls and replaced them with echos: echo "Content-Type: {$info['mime']}</br>"; echo "Content-Disposition: inline; filename=\"$name\"</br>"; echo "Content-Length: $fs"; Which return the values you would expect: Content-Type: image/png Content-Disposition: inline; filename="Picture.png" Content-Length: 35880 I changed the Content-Disposition to attachment. The files download as normal with the appropriate file names but have a size of 0. When I try to open them I get the error message: "Windows Photo Viewer can't display this picture because the file is empty." I double checked the files in the upload folder and they are all normal .png files. My code is below. Any advice you can offer would be very gratefully received. Adam show_image.php <?php $name = FALSE; if (isset($_GET['image'])) { //echo 'Image set </br>'; $ext = strtolower(substr($_GET['image'], -4)); if (($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) { //echo 'Correct ext </br>'; $image = "../uploads/{$_GET['image']}"; if (file_exists($image) && (is_file($image))) { //echo 'File exists </br>'; $name = $_GET['image']; } } } if (!$name) { //echo 'Unavailable'; $image = 'images/unavailable.png'; $name = 'unavailable.png'; } $info = getimagesize($image); $fs = filesize($image); header ("Content-Type: {$info['mime']}\n"); header ("Content-Disposition: inline; filename=\"$name\"\n"); header ("Content-Length: $fs"); //echo "Content-Type: {$info['mime']}</br>"; //echo "Content-Disposition: inline; filename=\"$name\"</br>"; //echo "Content-Length: $fs"; images.php <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN" "http:/www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Images</title> <script type="text/javascript" charset="utf-8" src="js/function.js"></script> </head> <body> <p>Click on an image to view it in a separate window.</p> <ul> <?php # Script 11.4 - images.php $dir = '../uploads'; $files = scandir($dir); foreach ($files as $image) { if (substr($image, 0 , 1) != '.') { $image_size = getimagesize ("$dir/$image"); $image_name = urlencode($image); echo "<li><a href=\"javascript:create_window('$image_name',$image_size[0],$image_size[1])\">$image</a></li>\n"; } } ?> </ul> </body> </html> function.js // Script 11.3 - function.js function create_window (image, width, height) { width = width + 10; height = height + 10; if (window.popup && !window.popup.closed) { window.popup.resizeTo(width, height); } var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizeable=yes, left=0, top=0, width=" + width + ", height=" + height; var url = "show_image.php?image=" + image; popup = window.open(url, "ImageWindow", specs); popup.focus(); } -
Hi Larry. I have a problem with this script. The table show me files list correctly with name and size. When I click on link popup appear perfectly resized but no image was loaded. Popup show a copy of show_image.php resized. No errors on firebug. If I change: var url = "show_image.php?image="+image; with var url = "upload/"+image; everythings works fine. any suggestions? Sorry for my english. Greetings Cecchi Luca -
Hello, I have PHP file (file1.php) asking for a date: echo '<form action="charts.php" id="form_chart_date" method="post"> <div id="form_chart_date"> <p>Please select date. </p> <p><input name="date_looking" type="text"> <input type="submit" value="Display data" name="display_chart"></p> </div> </form>'; After submission file1.php handles the process but there is reference to JavaScript file which reads PHP generated JSON file. JavaScript file looks like: (document).ready(function() { var date = "<?php echo json_encode($_POST); ?>"; $.ajax({ data: {date_looking: date}, url: "http://localhost:8888//live_site_local/www/json.php", dataType: "JSON", type: "POST", cache: false, success: function(pieData) { var ctx = $("#chart-area").get(0).getContext("2d"); new Chart(ctx).Pie(pieData); } }); }); If I replace variable date with something like: var date = "2015-01-01"; then everything works ok. It looks like the problem is that I can not pass PHP $_POST array to JavaScript. Here is the line from PHP file (json.php) that generates JSON object. $date_looking = $_POST['date_looking']; Does anyone know what I am doing incorect? Thanks -
I have bought and read larrys php for the web 4th edition, and php and javascript. I am having trouble with the example in chapter 11 of php and javascript .. accessing a javascript function form inside php. can somesone send me an email so I can describee the problem. I spend all morning typing the question in notepad but for some reason I cant copy/paste it to forum box .. tried ctrl/c-ctrl/v .. edit-copy/edit-paste .. right click copy/paste .. nothing works at 73 with arthritus in my hands, if I try to type is again it will contain typping errors. jerry gentry .. www.wa0h.com .. jerrywa0h@sbcglobal.net -
I have used a couple of your books extensively to develop a couple websites. I don't recall seeing the following topic covered. On my current project, I need my users to be able to locate and open a spreadsheet, word, or pdf file that is located (via an in-common cloud server) on their individual, local desktop computer. I don't want the file to open within the website, but instead the spreadsheet file, for example, should open via the software on the desktop, thus allowing the user to be outside of the website and edit or view the file, and then resave it on the desktop (via the cloud server) as appropriate. My users all have identical acces to the list of files that are located on the cloud server. All users have access to the same files. The only thing that is centralized on the website is the file reference (that is the same for each user), and the ability to cause that file to be opened. Is there a way to do this via javascript? Thanks. -
Change Another Image On Link Hover
Jane39 posted a topic in Effortless E-Commerce with PHP and MySQL
Hi, My product page (output) in HTML is something like this: ProductImage1 ProductImage2 ProductImage3 ProductImage4 Color1 Color2 Color3 Color4 Color2 Color5 Color6 What I'm trying to do is when I hover my mouse over any color above, an original (main) image of ProductImage will switch to another image (to match the hovered color). And that original image will be back when the mouse leaves. Example: http://jsfiddle.net/4dK2x/27/ I also added another hover function on ProductImage for switching images between front view and back view and it's working well. (You would see the two src attributes of the .main class image in my php code as follows) However, the hover function on colors is not working when I run php code to create a dynamic list. Here are my category.php. ---- $sql = mysqli_query($db_connect, "SELECT p.id,p.style,c.color_palette, GROUP_CONCAT(DISTINCT CONCAT(c.color_palette) ORDER BY p.id SEPARATOR '+') color_palettes FROM product_details AS pd INNER JOIN products AS p ON p.id=pd.product_id INNER JOIN colors AS c ON c.id=pd.color_id INNER JOIN subcategories AS sub ON sub.id=p.subcategory_id INNER JOIN categories AS cat ON cat.id=sub.category_id WHERE category='$category' GROUP BY p.id LIMIT 6"); [...] $i= 0; $Output= '<table><tr>'; while($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)){ $id = $row["id"]; $color_palette = $row["color_palette"]; $style = $row["style"]; $color_palettes = explode("+", $row["color_palettes"]); $Output.= '<td><div class="image"><a href="product.php?id='.$id .'&colorpalette='.$color_palette.'"><img class="main" data-alt-src="images/'.$style.'.'.$color_palette.'.BR.jpg" src="images/'.$style.'.'.$color_palette.'.FR.jpg" width="300" height="327"/></a><br />'; $Output.= '<div class="toggles">'; for ($ii=0;$ii<count($color_palettes);$ii++){ if (count($color_palettes) > 1) { $Output.= '<a href="product.php?id='.$id .'&colorpalette='.$color_palettes[$ii].'"><img data-src="images/'.$style.'.'.$color_palettes[$ii].'.FR.jpg" src="images/'.$style.'.'.$color_palettes[$ii].'.CP.jpg" /></a> '; } else { $Output.= '';} } // End for loop $Output.= '</div>'; $Output.='</div></td>'; $i++; if ($i%4==0){ $Output.= '</tr><tr>';} } // End while loop $Output.= '</tr></table>'; ---- I think my problem is probably because the array $color_palettes[$ii] is not defined in .main class image. So if that i the case, what do I do to fix it? Any help would be much appreciated. -
Hi, I am reading this book at second time. At advance Event Handling section, I am confusing about the statement that describes 'return false' vs 'e.preventDefault()'. At page 290, Larry writes 'On any browser that supports the addEventListener() method, event handlers will automatically receive a single argument, which represents the event that occurred. I think the single argument is event object, right? At page 298, 'For browsers that don't support the addEventListener() method, an alternative way of preventing the default event behavior is to invoke the preventDefaut() method of the event object. My question is that since the browser don't support addEventListener() method, there should be no event object received as argument. Then how come the alternative way of using event.preventDefault( )? -
I am developing a Spanish language learning app and having trouble with the text input in the upper right corner. http://www.unlockspanish.com/ Previously the app was done in Flex, and it has tying functionality which is more enjoyable to use than the current javascript version (above link). http://www.unlockspanish.com/FlexApp/ Notice if user types a word in FlexApp box, for example, print in dictionarry, the drop down display box continues to display other words that do not match this string. The typing function always forwards to a word on a list, and displays adjacent words in the dropdown. QUESTION: I have the source code for the Flex App. Can I copy the typing functionality into the Javascript app? OR, is there another way to achieve a similar result. All advice is greatly appreciated. Brian Matthews
-
Hi Larry, After moving along through the chapter, I had a generic question. For the calculator.js and calculator.html, should my webpage still run even though I do not have calculator.php linked to the HTML? The code is exactly how the book laid out, but when I attempt to test the calculator in a browser and press "Calculate!" I receive a message that calculator.php does not exist and the request cannot be completed. In essence, my question is "Is there something in the browser (Mercury Firefox) that is not loading properly or installed?" or "Does the HTML need both the php and JS to run?". I am currently under the assumption that JS is separate from PHP and can essentially take over the functionality of PHP but keep the requests on the client side. Thanks! -
Hi, I wasn't sure whether to post this in this forum or the "Modern JavaScript" forum so apologies if I've got it wrong. I am trying to modularise a website that is already in production and works fine, but the modularisation approach in chapter 2 looks very appealing. In one part of the website I have the index.php 'controller' module which includes other modules on a one by one basis as needed. The structure of index.php is as per chapter 2 of the book. Every time the index.php module is invoked, I include header.inc.htm which has within it an invocation of a small JS routine which just adjusts the width of the displayed website based on the width of the available viewport. What happens is that the first time index.php includes say module_a.php the width adjustment works perfectly. Then after having done its thing, module_a.php calls module_b.php via the index.php controller passing it a parameter that module_b needs. However, even though the exact same header.inc.htm module gets included when module_b.php is included by index.php, the JS routine does not fire and the width of the website display does not get adjusted. I've attached some of the code; first the header.inc.htm file which invokes the JS adjust-wrapper_size() routine. As you can see, I tried both 'document ready' and window load' but the problem appears both ways. <!DOCTYPE html> <head> <title><?php echo $page_title; ?></title> <link rel="stylesheet" type="text/css" href="./css/the_css_file.css" media="screen" /> <script type="text/javascript" src="../jQuery/jquery_1.5.2.min.js"></script> <script type="text/javascript" src="../js/the_js_file.js"></script> <script type="text/JavaScript"> // window.onload(function() $(document).ready(function() { adjust_wrapper_size(); // to stop it from being too big! }); // end document ready function $(window).resize(function() { adjust_wrapper_size(); // to stop it from being too big! }); // end window resize function </script> </head> Now the code in module_a which calls module_b (add_cv_2) via index.php; .... $group_name = urlencode($_POST['cv_group']); $url = BASE_URL . "index.php?p=add_cv_2&cvgroup=$group_name"; if (!headers_sent($filename, $linenum)) { header("Location: $url"); exit(); } ...... Now the code within index.php... ..... case 'add_cv_2': $page = 'module_b.php'; $page_title = "The appropriate title"; break; ..... And finally the JS routine: function adjust_wrapper_size() { var s_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || document.width; // to cater for all browsers // alert('Window/Screen width = ' + s_w); if (s_w > 1000) { $('#wrapper').css('width', 1000); } else { // screen < 1000 - use available screen $('#wrapper').css('width', s_w); } } My environment is: . Windows 7 Home Premium 64 bit . Internet Explorer 10 . Firefox 22.0 . Dreamweaver CS5 as the text editor . Flex 4 via FlashBuilder 4 . XAMPP for Windows 1.8.3 which comprises: .. Apache 2.4.4 .. PHP 5.5.3 .. MySQL 5.6.11 .. phpMyAdmin 4.0.4 Any assistance will be most appreciated. Thanks, and Cheers from Oz. -
Hi, I have a question about Creating Modal Windows example... Quote: If I remove the following lines (altogether, all three lines): In function openModal(): document.getElementById('openModal').onclick = null; In function closeModal(): document.getElementById('openModal').onclick = openModal; In function closeModal(): document.getElementById('closeModal').onclick = null; so that the new code looks like this: everything works well, there are no errors. I don't understand why there are these three lines? Thank you in advance!
-
Hi, I am using this extension to display the google map in my page. And i have a text field that have been adding dynamically. I want to display the text field values in the google map. How to pass the text field values into the google map functionality. view.php <div id="map_section"> <div class="country_travell" style="background-color: #F8F8F8"> <?php foreach($countriesTravelled as $i => $countryTravelled) { $isCloseRequired = ($i==0) ? false : true; $this->renderPartial('_country_travelled', array('countryTravelled'=> $countryTravelled, 'i' => $i, // Row or iterator 'form'=>$form, 'isCloseRequired'=>$isCloseRequired)); } ?> </div> </div> <div id="gmap"> <?php $this->renderPartial('gmap',array('flagMap1'=>$flagMap)); ?> </div> _country_travelled.php <div class="floatLeft txt-input" rel="col1" style="width:150px;"> <?php echo $form->textField($countryTravelled, "[$i]place", array('onchange'=>'getPlaceName(this.value);', 'style' => 'width: 150px;')); ?> </div> script.js function getPlaceName(vl) { alert(vl); $.ajax({ type: 'POST', url: '<?php echo Yii::app()->createUrl("site/showGmap"); ?>', data:'place='+vl, success:function(data) { // alert(data); // if success $("#gmap").append(data); jQuery("#gmap").load("<?php echo Yii::app()->createUrl('site/showGmap'); ?>"); }, error: function(data) { // if error occured alert("Error occured...! Please try again"); }, dataType:'html' }); // $("#gmap").load("gmap.php"); } Controller.php public function actionShowGmap() { $place=$_POST["place"]; // echo $place; exit; [b]$this->render('gmap', array('place'=>$place));[/b] } In the controller i'm getting the value of place. and i want to pass the same place value in to the gmap. Please anyone help me
-
Hi, again. One more question: When I select a primary category from first <select> menu, the ajax response return and fill the sub category data into second <select>menu. When this happen, I expect the second <select> menu will automatically call ajax object to retrieve corresponding product data. However, it doesn't work that way. When the second menu loads, it doesn't do anything unless I expand the menu select a option, then it will retrieve the product. I realized that the reason being is I have only one event 'onchange' assigned to the event listener. So I modified my script to add multiple events: utility.addEvent(utility.$('sub_category_modal'), 'change', load_sub_cat); utility.addEvent(utility.$('sub_category_modal'), 'load', load_sub_cat); I add an event listener to watch for 'load' event so that when second <select> first load, it will trigger the same function of load-sub_cat to load subcategories. So far only the first 'change' event works. The second 'load' event doesn't work, I suspect the 'load' is not the correct type but I am not sure which one will work. Pleas again give some advise. thanks.
-
Hi, here is another problem I would like to get a hint or some thought of it. I get a group a datas from ajax response that I would like to append them into existing product listing. // ajax response that I want to inside into the product listing page <div id="category_thumbnail"> <a href="product_detail.php?pid=<?php echo $products['product_id'] ?>"> <img src="<?php echo $products['file_url_thumb'] ?>"><?php icon($products); ?></a> <p class="p_sku"><a href="product_detail.php?pid=<?php echo $products['product_id'] ?>"> <?php echo $products['product_sku'] ?></a></p> <p class="p_name"><?php echo $products['product_name'] ?></p> <p><a class="d_delete" href="remove_product_mailer.php?pid=<?php echo $products['product_id'] ?>"></a></p></div> if do innerHTML, this group of data will be inserted but existing products data will be erased. If I use appendChild(), which doesn't work at all since this method only append single element. I checked W3C DOM guide and there is no a method similar to innerHTML but append the data instead of replace them. I have been going so far and this is last feature I need to make it work, so please give me any suggestion to work around this problem. thanks a lot!
-
I have been making a menu to select primary category and ajax returns the subcategory. when I picks an option in subcategory category, the ajax then return the products under the subcategory. So far so good those steps do works. My next step is to click a specific product that is returned by Ajax response and have it calling ajax again to update its newsletter setting in the product DB. The problem here is that I am not able to select the product. Each product_sku have a <p>tag with a class "add_small". So I want to know any possible solution to deal this situation. thanks. // Not able to select add_small class which comes from ajax response if(document.getElementsByClassName("add_small")){ var add_product = document.getElementsByClassName("add_small"); for(var a = 0; a < add_product.length; a++){ add_product[a].onclick = function(){ alert(this.value); } } }
-
Hello All, I have an app underdevelopment, that can be seen here. http://74.208.77.106:8080/UnlockSpanish/ I am posting with a question about the listbox that is seen in the column along the left side. This box displays different spacing on different browsers. On Firefox there is a large spacing between lines (about 1/8 inch gap between each line). Very nice appearance. However on Chrome, Safari and IE, there is almost no gap at all. The result is the listbox looks very crowded. I would like to check here with the forum if there is any options availble to adjust spacing, or if some possible hack would accomplish this result. Very appreciative for any advice.
-
Hi Larry, I really enjoy your book, but I am having trouble viewing my image after clicking on it. When I comment out the failsafe> unavailable image, I receive a block of code <br /> <font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: image in C:\wamp\www\Website\show_image.php on line <i>38</i></th></tr> <tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr> <tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr> <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0004</td><td bgcolor='#eeeeec' align='right'>250856</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>0</td></tr> </table></font> <br /> <font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: getimagesize(): Filename cannot be empty in C:\wamp\www\Website\show_image.php on line <i>38</i></th></tr> <tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr> <tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr> <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0004</td><td bgcolor='#eeeeec' align='right'>250856</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>0</td></tr> <tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0006</td><td bgcolor='#eeeeec' align='right'>251904</td><td bgcolor='#eeeeec'><a href='http://www.php.net/getimagesize' target='_new'>getimagesize</a> ( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>38</td></tr> </table></font> <br /> <font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: image in C:\wamp\www\Website\show_image.php on line <i>39</i></th></tr> <tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr> <tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr> <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0004</td><td bgcolor='#eeeeec' align='right'>250856</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>0</td></tr> </table></font> <br /> <font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: image in C:\wamp\www\Website\show_image.php on line <i>47</i></th></tr> <tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr> <tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr> <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0004</td><td bgcolor='#eeeeec' align='right'>250856</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>0</td></tr> </table></font> <br /> <font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: readfile(): Filename cannot be empty in C:\wamp\www\Website\show_image.php on line <i>47</i></th></tr> <tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr> <tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr> <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0004</td><td bgcolor='#eeeeec' align='right'>250856</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>0</td></tr> <tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0007</td><td bgcolor='#eeeeec' align='right'>252840</td><td bgcolor='#eeeeec'><a href='http://www.php.net/readfile' target='_new'>readfile</a> ( )</td><td title='C:\wamp\www\Website\show_image.php' bgcolor='#eeeeec'>..\show_image.php<b>:</b>47</td></tr> </table></font> Here is my code: images.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang ="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Images</title> <!--Include the JavaScript file:--> <script type="text/javascript" charset="utf-8" src="js/function.js"></script> </head> <body> <p>Click on an Image to view in a seperate window:</p> <ul> <?php #Script 11.4 - Images.php //This script lists the images in the uploads directory: $dir = '../uploads'; //Define the directory to pull the images to view $files = scandir($dir); //Read all of the images into the array, $files //Display each image caption as a link to the JavaScript function: foreach ($files as $image){ if (substr($image, 0, 1) !='.'){ //Ignore anything starting with a period. //Get the image's size in pixels: $image_size = getimagesize("$dir/$image"); //Make the image's name URL-safe: $image_name = urlencode($image); //Print the information echo "<li><a href=\"javascript:create_window('$image_name',$image_size[0], $image_size[1])\">$image</a></li>\n"; } //End of the IF. }//End of the foreach loop ?> </ul> </body> </html> function.js // Script 11.3 - function.js //Make a pop-up window function: function create_window (image, width, height){ //Add some pixels to the width and height: width= width + 10; height = height + 10; //If the window is already open, resize it to the new dimensions: if (window.popup && !window.popup.closed){ window.popup.resizeTo(width, height);} //Set the window properties: var specs = "location=no, scrollbars= no, menubars=no, toolbars= no, resizable=yes, left=0, top=0, width =" + width +", height=" + height; //Set the URL: var url = "show_image.php?image=" + image; //Create the pop-up window: popup = window.open(url, "ImageWindow", specs); popup.focus(); } //End of function show_image.php <?php #Script 11.5 - show_image.php //This page displays an image. $name= FALSE; //Flag Variable: //Check for an image name in the URL: if (isset($_GET['image'])) { //Make sure it has an image's extension: $ext = strtolower ( substr ($_GET['image'], -4)); if (($ext == '.jpg') or ($ext == 'jpeg') or ($ext == '.png')or ($ext == '.JPG') or ($ext == '.JPEG')or ($ext == '.PNG')){ //Check that the image is a file on the server (full image path): $image = "../uploads/{$_GET['image']}"; //Check that the image exists and is a file: if (file_exists ($image) && (is_file ($image))){ //Set the name as this image: $name= $_GET['image']; } //End of file_exists() IF. } //End of $ext IF. } //End of isset($_GET['image']) IF. //If there was a problem, use the default image: if (!$name) { $image = 'images/unavailable.png'; $name = 'unavailable.png'; } //Get the image information: $info = getimagesize($image); $fs = filesize($image); //Send the content information: header ("Content-Type: {$info['mime']}\n"); header ("Content-Disposition: inline; filename=\"$name\"\n"); header ("Content-Length: $fs\n"); //Send the file: readfile($image);
-
I'm learning from various sources and can usually puzzle out what's going on, but this has me a bit stumped. I came across this code at http://www.webdeveloper.com/forum/showthread.php?224180-JQuery-how-does-it-s-insides-work: function X(css){ //dom utility //a couple of node harvesters, using id and tag name... function el(id){ return document.getElementById(id);} function tags(elm){return document.getElementsByTagName(elm);} //collect output: var out=[]; if(css[0]=="#"){//id out.push(el(css.slice(1))); }else{//tags out=out.concat([].slice.call(tags(css))); };//end if id or tagName //define some methods for the utility: var meths={ hide:function(a){a.style.display="none";}, show:function(a){a.style.display="";}, remove:function(a){a.parentNode.removeChild(a);}, color:function(a){a.style.color=this||a.style.color;}, size:function(a){a.style.fontSize=this||a.style.fontSize;} };//end meths //bind the methods to the collection array: for(var meth in meths)(function(n,m){ out[n]=function(x){out.map(m,x); return out;} }(meth, meths[meth]));//next method return out; }//end X dom utility For the life of me, I am having a hard time figuring out how the Javascript is running in the for loop binding the methods to the collection array. I realize this is advanced, but if someone could walk through what is happening, and how the methods are being called with variables correctly linked to their respective methods, it would be appreciated. This is cool, if only I could understand how it is occurring. -
Hi everyone, I am really enjoying your book Larry, thanks. My problem is I am on the page where you use the header function and javascript to display the images from the uploads folder. I have one picture and for some reason when I click it, it does nothing. Would anyone care to look at my code or give me some hints as to why it is not working? I have tried the following: Compare my code to Larry's code Used Larry's code Enabled pop-ups Moved the javascript folder to a different location (a folder above and then changing the a href to ../javascript) images.php <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Images</title> <script type="text/javascript" charset="utf-8" src="js/function.js"></script> </head> <body> <p>Click on an image to view it in a separate window.</p> <ul> <?php # Script 11.4 - images.php // This script lists the images in the uploads directory. $dir = '../uploads'; // Define the directory to view. $files = scandir($dir); // Read all the images into an array. // Display each image caption as a link to the JavaScript function: foreach ($files as $image) { if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period. // Get the image's size in pixels: $image_size = getimagesize ("$dir/$image"); // Make the image's name URL-safe: $image_name = urlencode($image); // Print the information: echo "<li><a href=\"javascript:create_window('$image_name',$image_size[0],$image_size[1])\">$image</a></li>\n"; } // End of the IF. } // End of the foreach loop. ?> </ul> </body> </html> function.js //Script 11.3 - function.js function create_window (image, width, height) { //Add some pixels to the width and height: width = width + 10; height = height + 10; //If the window is already open resize it ot the new dimensions if (window.popup && !window.popup.closed) { window.popup.resizeTo(width, height); } //Set the window properties: var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height; //Set the URL: var url = "show_image.php?image=" + image; //Create the pop-up window: popup = window.open(url, "ImageWindow", specs); popup.focus(); } //End of function show_image.php <?php # Script 11.5 - show_image.php // This page displays an image. $name = FALSE; // Flag variable: // Check for an image name in the URL: if (isset($_GET['image'])) { // Make sure it has an image's extension: $ext = strtolower ( substr ($_GET['image'], -4)); if (($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) { // Full image path: $image = "../uploads/{$_GET['image']}"; // Check that the image exists and is a file: if (file_exists ($image) && (is_file($image))) { // Set the name as this image: $name = $_GET['image']; } // End of file_exists() IF. } // End of $ext IF. } // End of isset($_GET['image']) IF. // If there was a problem, use the default image: if (!$name) { $image = 'images/unavailable.png'; $name = 'unavailable.png'; } // Get the image information: $info = getimagesize($image); $fs = filesize($image); // Send the content information: header ("Content-Type: {$info['mime']}\n"); header ("Content-Disposition: inline; filename=\"$name\"\n"); header ("Content-Length: $fs\n"); // Send the file: readfile ($image); here are how to folders are set up: xamp-->htdocs-->Learning-->(all php files) xamp-->htdocs-->Learning-->javascript-->function.js xamp-->htdocs-->uploads I also created an xampp-->uploads folder, but the files do not upload there and the scripts do not see the pictures in that folder. Thanks for everyone's help.......
