Search the Community

Hi, In an earlier topic I was trying to get the sounds to play off the server. The sound file being served by the server. Eventually I have a situation where I have finally managed to get the sound to play within the ajax block. The lines of code shown execute and the sound is played. However if I try and pass the audio object back to the calling function (// return audio) it ends up in the calling code as undefined !??? Could this be because of the asynchronous nature of ajax ? If so, Is there a way to get around it and pass the object back to the calling function successfully? <script> $(document).ready(function(){ $('.btn').click( function() startSound(); }); function startSound() { $('.btn').disabled = true; playURL = getURL(); audio = playServerURL(playURL); console.log(audio); --------------------------------- ( ERROR--A ) // alert("Received Data"); // var audio = new Audio(playURL); // audio.type = 'audio/mpeg'; // audio.play(); // audio.onended = getNextUrl; } // Get sounds off the server $.ajax({ type: 'GET', url: 'playsound1.php', data: {sf: 'ready.mp3'}, dataType:"binary", success:function(data){ // doesn't trigger alert("Yey !"); // does not popup . . . audio = new Audio(audBlob); var audio = new Audio(audBlob); // return audio; audio.type = 'audio/mp3'; console.log(audio); -------------------------------------- (Message B) audio.play(); } }) }) </script> console.log() inside the ajax (Message -- B) gives the audio object console.log() inside the startSound gives (Error -- A) :- Please can someone shed light on this. Thanks all !

Hello , i am facing issue in js and php, please help me, i have create one php file and put the <script>ex.ui{"name": "<?php echo for ( esc_attr ( get_option ( 'sclm ) ) ); ?>",}</script> like above script. But i want to put that script in js file. but when i am use that script in js file, then that php code creating problem. so how to get solve that issue. I want that script in js, and that php code will be fetch the value in js. so please help me about that. Thanks

Hi all. The code embedding the swf file using AC_RunActiveContent.js looks as below: <script type="text/javascript" > AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','800','height','580','align','middle','src','FlashWebsite','quality','high','bgcolor','#ffffff','name','FlashWebsite','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','FlashWebsite' ); </script> 1. I would like to run this off a .js file so that this could be CSP compatible & would replace the above code. 2. I also need to pass two php variables as FlashVars in the above code. For eg like this FlashVars = "var1=$var1&var2=$var2" So I would need to pass these two variables from php into the .js file that i wish to create in 1. i would be much obliged for any help on this. Thanks all !!

I am trying to add a functionality of uploading image while adding new data but I am not able to achieve it. I will provide my code to you. Could you please help me to achieve it? Following is my code, I have three files namely index.php, script.js, func_events.php index.php is as below, <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title" id="myModalLabel">Add event</h3> </div> <div class="modal-body"> <form class="form-horizontal" id="addEvent" method="post" role="form" action="func_events.php" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-2 control-label" for="inputTitle" style="padding:0px;">Title</label> <div class="col-sm-5 col-sm-offset-1"> <input type="text" id="inputTitle" class="form-control" maxlength="32" placeholder="Title" /> </div> <label class="col-sm-2 control-label" for="inputTitle" style="padding:0px;">?????</label> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="inputLocation" style="padding:0px;">Location</label> <div class="col-sm-5 col-sm-offset-1"> <!--<input type="text" id="inputLocation" class="form-control" maxlength="26" placeholder="Location" />--> <select id = "inputLocation"> <option value = "Meeting Room">Meeting Room</option> <option value = "Training Room">Training Room</option> <option value = "GM Room">GM Room</option> <option value = "Other">Other</option> </select> </div> <label class="col-sm-2 control-label" for="inputLocation" style="padding:0px;">??????</label> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="inputDate" style="padding:0px;">From Date</label> <div class="col-sm-5 col-sm-offset-1"> <input type="text" id="inputDate" class="form-control" maxlength="10" placeholder="Date" /> </div> <div id="datepicker"></div> <label class="col-sm-2 control-label" for="inputDate" style="padding:0px;">?? ?????</label> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="inputTime" style="padding:0px;">From Time</label> <div class="col-sm-5 col-sm-offset-1"> <input type="text" id="inputTime" class="form-control" maxlength="5" placeholder="Time" /> </div> <label class="col-sm-2 control-label" for="inputTime" style="padding:0px;">?? ???</label> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="inputUploadFile" style="padding:0px;">Upload Image</label> <div class="col-sm-5 col-sm-offset-1"> <input type="file" id="fileToUpload" class="form-control" maxlength="32" placeholder="Upload File" /> </div> <label class="col-sm-2 control-label" for="inputUploadFile" style="padding:0px;">Upload Image</label> </div> </div> <div class="modal-footer"> <button type="button" id="add" class="btn btn-success" data-loading-text="Adding event...">CREATE</button> </div> </form> </div> //... I have closed all the divs <script type="text/javascript" src="js/script.js"></script> script.js file is as follows, function addEvent(date) { $(".modal-header").html(modalAddEvent.header); $(".modal-body").html(modalAddEvent.body); $(".modal-footer").html(modalAddEvent.footer).addClass("addEvent"); $("#inputDate").datepicker({ firstDay: 1 }); $("#inputTime").timepicker(); date = new Date(date); date = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "/" + date.getFullYear(); $("#inputDate").val(date); $("button#add").on("click", function() { form = { title: $("#inputTitle").val(), location: $("#inputLocation option:selected").val(), date: $("#inputDate").val(), time: $("#inputTime").val()}; title = form.title; loc = form.location; date = new Date(form.date); date = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()); time = form.time + ":00"; timestamp = date + " " + time; if ((title && loc && timestamp) != '') { form_data = { 1: title, 2: loc, 3: timestamp}; /* ,filename: form_data[19] */ $.ajax({ type: "POST", data: { action: "insert", title: form_data[1], loc: form_data[2], timest: form_data[3]}, url: "calendar/admin/php/func_events.php", beforeSend: function() { $("button#add").button('loading'); }, success: function() { $("#myModal").modal('hide'); alert("Event added correctly. Your request has been forwarded to the PR Department. Pending for Approval."); sessionStorage.clear(); window.location.reload(); }, error: function() { alert("There was an error trying to add the event."); } }); } else { alert("You must complete all the fields."); } });} func_event.php file is as below, $action = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['action']))); $title = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['title']))); $location = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['loc']))); $timestamp = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['timest']))); if ($action == "select") { $sql = "SELECT *, DATE_FORMAT(timestamp, '%M %e, %Y %H:%i') selector, DATE_FORMAT(toTimestamp, '%M %e, %Y %H:%i') selector1 FROM events "; if ($_POST['y'] !== null && $_POST['m'] !== null) { // Sort by Year and Month $sql .= " WHERE DATE_FORMAT(timestamp, '%Y %c') = '".$_POST['y']." ".$_POST['m']."' "; } else if (isSet($_POST['y']) && $_POST['y'] !== null) { // Sort by Year $sql .= " WHERE DATE_FORMAT(timestamp, '%Y') = '".$_POST['y']."' "; } else if (isSet($_POST['m']) && $_POST['m'] !== null) { // Sort by Month $sql .= " WHERE DATE_FORMAT(timestamp, '%c') = '".$_POST['m']."' "; } // Search (isSet($_POST['search_q']) ? $sql .= " WHERE title LIKE '%".trim($_POST['search_q'])."%' " : ''). $sql .= " ORDER BY timestamp ASC"; $query = mysqli_query($link, $sql); if (mysqli_num_rows($query) > 0) { $data = array(); $index = 0; while ($recset = mysqli_fetch_array($query)){ $data[$index] = $recset; $index++; } echo json_encode($data); } } else if ($action == "insert") { /* $startdate = substr($timestamp,0,10); //date('Y-m-d', $timestamp);// or your date as well $enddate = substr($totimestamp,0,10); //date('Y-m-d', $totimestamp); //strtotime("2010-01-01"); $datediff = $end - $start; $date1 = $startdate; $date2 = $enddate; $diff = abs(strtotime($date2) - strtotime($date1)); $years = floor($diff / (365*60*60*24)); $months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24)); $days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24)); if($days == "0") { */ $sql = "INSERT INTO events (timestamp, title, location) VALUES ('".$timestamp."', '".$title."', '".$location."')"; $query = mysqli_query($link, $sql); /* } else { print "".++$days.""; } */ //File Upload $target_dir = "calendar/"; $target_file = $target_dir.basename($_FILES["fileToUpload"]["name"]); $console::log($target_file); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } } // Check if file already exists if (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0; } // Check file size if ($_FILES["fileToUpload"]["size"] > 500000) { echo "Sorry, your file is too large."; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded."; } else { echo "Sorry, there was an error uploading your file."; } } } ?>

Over the past year I started using composer and have realized that using a dependency manager keeps development and code maintenance so much easier. yay composer! I can see an equally big need to do this for front side technologies (ie: js & css) What exists for us PHP developers to help maintain that huge mess of front end stuff we need to include. Is there something to manage and minify JS/CSS that works well with the PHP environment? Thanks

I can't figure out how to make this script (twitch(dot)tv) to show only online/live channels not all... Here is Javascript (function () { 'use strict'; angular .module('twitch', []) .controller('TwitchCtrl', TwitchCtrl); function TwitchCtrl($http, $scope) { $scope.streams=[]; var apiEndPoint = 'https://api.twitch.tv/kraken/streams/'; var streamers = ['Chizijs','tornis', 'elveeftw', 'piecits', 'lobosjr', 'fattypillow']; var apiSuccess = function(response, streamer){ console.log(response); var stream = response.data; stream.Name = streamer; var offline = stream.stream === null if(offline){ stream.stream = {game: 'offlines', channel:{ 'logo': '' }}; $scope.streams.push(stream); } else{ $scope.streams.unshift(stream); } console.log(stream); }; var apiError = function(response, streamer){ console.log(response); if(response.status === 422){ var stream = response.data; stream.Name = streamer; stream.stream = {game: 'Account Closed', channel:{ 'logo': ''}}; console.log(stream); $scope.streams.push(stream); } }; var setupSuccess = function(streamer){ return function(response){ return apiSuccess(response, streamer); }; }; var setupError = function(streamer){ return function(response){ return apiError(response, streamer); }; }; for(var i = 0; i < streamers.length; i++){ var onSuccess = setupSuccess(streamers[i]); var onError = setupError(streamers[i]); $http({url: apiEndPoint + streamers[i], method:'GET'}) .then(onSuccess, onError); } } })();

Hi all ! The following piece of code works fine. <?php $myVar1 = "best1"; $myVar2 = "best2"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>SWFObject 2 dynamic publishing example page</title> <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var myVal1 = "<?php echo $myVar1; ?>"; var myVal2 = "<?php echo $myVar2; ?>"; var flashvars = { myVar1: myVal1, myVar2: myVal2 }; swfobject.embedSWF("AS3_swf_php_comm_1.swf", "myswf", "550", "400", "9.0.0", false, flashvars); </script> </head> <body> <div id="myswf"> <h1>Alternative content</h1> <h2> Best </h2> </div> </body> </html> I wish to convert the following bit : <script type="text/javascript"> var myVal1 = "<?php echo $myVar1; ?>"; var myVal2 = "<?php echo $myVar2; ?>"; var flashvars = { myVar1: myVal1, myVar2: myVal2 }; swfobject.embedSWF("AS3_swf_php_comm_1.swf", "myswf", "550", "400", "9.0.0", false, flashvars); </script> into a file jquery file movie.js thereby removing the above inline code. Please can someone help me convert this or convert it for me. Thanks all !

hey guys im running a XML HTTP request and i'm getting the error 413 - ie. image too large. I know its js i'm executing but i think its a php problem so i changed some settings in my php.ini post_max_size = 10M upload_max_filesize = 10M here is the js i'm using function upload_image(image){ var data = new FormData(); xhr = new XMLHttpRequest(); data.append('image', image); xhr.open('POST', 'save.php', true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; console.log(percentComplete + '% uploaded'); } } xhr.onload = function() { console.log(this.status); if (this.status === 200) { var response = this.response console.log('Server got:', response); } } xhr.send(data); } it works with smaller images but when trying to upload a 4.4 mb image i get the error 413...now i'm a little confused on how i'm getting this error as i've changed my post and upload max sizes is there something obvious i'm missing here please? thank you

Hi, I have the following setup: A main-page.php that is consisted of: 1) A header 2) A nav bar 3) Content (is loaded inside a <div id="dynamic-content"></div>) 4) Footer Inside the nav bar you find several options (ex. About Us, Contact Us, etc..). Lets say that the script responsible for "About Us" is called about-us.php. What i want to achieve is to load the output of about-us.php page inside the content area (aka the dynamic-content div), as soon as i press the "About Us" button (#about-us div). In order to achieve this i use the following AJAX call: $("#about-us").on('click', function(){ $.ajax({ url: "about-us.php", success: function(output){ $("#dynamic-content").html(output); } }); }); Both main-page.php and about-us.php include their own CSS and JavaScript files: main-page.js and main-page.css included in main-page.php about-us.js and about-us.css included in about-us.php THE PROBLEM I FACE: Initially the tabs inside nav bar (About us, Contact Us, etc) were stand alone pages, meaning when you clicked on the link it redirected you to a new URL (for example http://www.domain.com/about-us.php). In this case about-us.php was consisted of a head where all CSS was included, a body where all JS was included, In other words it was a complete HTML/PHP page. The page was working properly. When i tried to load this page into a div inside main-page.php, i started facing some problems. Sometimes CSS was overwritten by the CSS of Contact Us causing problems (at this point i have to mention that since about-us.php and contact-us.php were stand alone pages, sometimes we used the same classes/ids to target DOM elements). Problems started to happen with JS as well. THE QUESTION: What is the correct way to use CSS and Javascript files of about-us.php? Should i include them inside the about-us.php script or include them inside the main-page.php? Do i have to create one big CSS and one big JS file that will include all previously created CSS and JS that will target each element of each imported page? Is there another way? Thanks in advance.

hey guys i'm half way through making a upload script for my site which consists of js and php...but i'm a little concerned about its functionality and how the best way it should work. here is a screenshot of how it looks when a user will click and upload a picture i used a XMLHttpRequest which moves the image from a temporary directory and uploads to my selected directory...happy days! now i give the user a option to edit image where they can rotate and crop the image (server side) this is where i need help on the scripts functionality please. now when a user uploads a picture it saves onto my server directory...depending on how big the image is it can sometimes take 45 seconds for a 4/5 meg picture to upload which causes problem with the users experience (i think) because...of time...the only way i can see the user editing a image is when it's 100% uploaded and not before....cause if they try to edit before the upload is complete i'm unable to select the image to crop and rotate server side as it wont be uploaded yet. it all just seems like a long process waiting and i'm a bit stuck on what is best to do here. do i continue to allow editing on a image, when its 100% uploaded or is there a better way? i hope my problem is clear enough...also if you'd like to see any code please let me know. thank you

Hi all, I am trying to pass 4 variables from one php page to another php page containing a google maps api. The variables I am passing are geo coordinates. at the end I want to show the map on my php page however I am struggling with linking php and javascipt together. This is what I have so far: external function page: http://pastebin.com/NAKHmKxW [PART OF MAIN PHP PAGE] <div class="row"> <?php include_once("function_maps.php"); initMap($latitude, $longitude,$row['Latitude'],$row['Longitude']); ?> </div>

JQuery 3.3.1, Bootstrap 4.2.1, and the use of the Bootstrap Datepicker We’re trying to get satisfy some “Content Security Policy” requirements. One of which is to remove the java in the code, and call it from a known js file somewhere. That said I need to place the stuff in a js file which DOES work, but we have to place some java for EACH datepicker, or datetimepicker that exists in the site (which is scalable) so these form elements need to be added from time to time, and as it stands now we’ll need to add to the JS file also. I’m an absolute tool when it comes to js just FYI. To the question; Is there a way to code the JAVA below so it can handle ALL datepickers once? In the past we would write the form element and the js together, so the id's could be created on the fly. With a js file, it complicates things. $('#datepicker').datepicker({ format: 'yyyy/mm/dd', calendarWeeks: true, weekStart: 1, todayHighlight: true });