Jump to content

Search the Community

Showing results for tags 'jquery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (PhpStorm, VS Code, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

  1. Why does this source file seem to cause the ajax to crash after the first call to the function? function swapContent(href, url_data, target) { $.ajax({ type: 'GET', cache: false, url: href+'?' + url_data, //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request //load more data to "target" value div target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below } }) }
  2. I'm using a plugin to include a photo gallery on a wordpress site. At the bottom of the page in the footer I include <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> just like the samples I look at do it here http://getbootstrap.com/getting-started/#examples The problem is that the plugin doesn't work when I include jquery. I posted the probelm here https://wordpress.org/support/topic/huge-it-doesnt-work-with-google-ajax-jquery And the reply was jQuery should not be called this way? That's the way the samples do it You try to call jQuery in no standard way? It's the same in every footer Sooo, how do you call jquery and what is the standard way? Thanks in advance
  3. I am using jcrop to crop images. **This is the form that i upload the image and crop.** <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()"> <!-- hidden crop params --> <input type="hidden" id="x1" name="x1" /> <input type="hidden" id="y1" name="y1" /> <input type="hidden" id="x2" name="x2" /> <input type="hidden" id="y2" name="y2" /> <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div> <div class="error"></div> <div class="step2"> <h2>Step2: Please select a crop region</h2> <img id="preview" /> <div class="info"> <label>File size</label> <input type="text" id="filesize" name="filesize" /> <label>Type</label> <input type="text" id="filetype" name="filetype" /> <label>Image dimension</label> <input type="text" id="filedim" name="filedim" /> <label>W</label> <input type="text" id="w" name="w" /> <label>H</label> <input type="text" id="h" name="h" /> </div> <input type="submit" value="Upload" /> </div> </form> **upload.php file which upload cropped image to *avatar* directory.** <?php function uploadImageFile() { // Note: GD library is required for this function if ($_SERVER['REQUEST_METHOD'] == 'POST') { $iWidth = $iHeight = 200; // desired image result dimensions $iJpgQuality = 90; if ($_FILES) { // if no errors and size less than 250kb if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 250 * 1024) { if (is_uploaded_file($_FILES['image_file']['tmp_name'])) { // new unique filename $sTempFileName = 'avatar/' . md5(time().rand()); // move uploaded file into cache folder move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName); // change file permission to 644 @chmod($sTempFileName, 0644); if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) { $aSize = getimagesize($sTempFileName); // try to obtain image info if (!$aSize) { @unlink($sTempFileName); return; } // check for image type switch($aSize[2]) { case IMAGETYPE_JPEG: $sExt = '.jpg'; // create a new image from file $vImg = @imagecreatefromjpeg($sTempFileName); break; /*case IMAGETYPE_GIF: $sExt = '.gif'; // create a new image from file $vImg = @imagecreatefromgif($sTempFileName); break;*/ case IMAGETYPE_PNG: $sExt = '.png'; // create a new image from file $vImg = @imagecreatefrompng($sTempFileName); break; default: @unlink($sTempFileName); return; } // create a new true color image $vDstImg = @imagecreatetruecolor( $iWidth, $iHeight ); // copy and resize part of an image with resampling imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']); // define a result image filename $sResultFileName = $sTempFileName . $sExt; // output image to file imagejpeg($vDstImg, $sResultFileName, $iJpgQuality); @unlink($sTempFileName); return $sResultFileName; } } } } } } $sImage = uploadImageFile(); echo '<img src="'.$sImage.'" />'; ?> My Question: Right now it just upload the cropped image in avatar directory with width and height of 200px. I want to also upload that cropped image in to two other directories 1. avatar1 with width and height of 500px 2. avatar2 with width and height of 700px Any help will be appreciated.
  4. I want to be able to check whether values exist in the php array without having to click the submit button to do those checks using jquery/ajax. when users enter an abbreviation in the text field want to be able to show that the brand exists (either vw or tyta) or not (as they type in the input box) and show the results in the carnamestatus div. I was following a tutorial from youtube, however it queried against a mysql database. I was wondering if this is possible using php arrays instead of mysql? I would be grateful if you could pick any faults in the code. The jquery is in the head section. the rest of the code is as follows: <?php $car = array() $car["vw"] = array( "name" => "volkswagen"); $car["tyta"] = array( "name => "toyota"); ?> the html code is as follows: <label for="carname">Car Code:</label> <input type="text" onblur="checkcar()" value="" id="carname" /> <div id="carnamestatus"></div> the checkcar() function checkcar(){ var u = _("carname").value; if(u != ""){ _("carname").innerHTML = 'checking ...'; var B = new XMLHttpRequest(); B.open("POST","check.php",true); / B.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); B.onreadystatechange = function() { if(B.readyState==4 && B.status== 200) { _("carnamestatus").innerHTML = B.responseText; } } var v = "carnamecheck="+u; B.send(v); } } </script>
  5. I am trying to coonect my jquery price slider to my database in order to search for recipes depending on the price. I have written the code below but I am not sure were i am going wrong. Could anyone help? <!--Javascript code for jquery price range slider--> <script type="text/javascript"> $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 10, values: [ <?php echo $min?>,<?php echo $max?> ], // This line could be the issue? slide: function( event, ui ) { $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) + " - £" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> <!--php code to connect to jquery price slider--> <?php require_once './config.php'; include './header.php'; include('database.php'); if($_POST && isset($_POST['amount'])){ $values = $_POST['amount']; $values = str_replace(array(' ', '£'), '', $_POST['amount']); list($min, $max) = explode('-', $values); $sql = "SELECT `recipe_name`, `recipe_price`, `Image` FROM `recipe` WHERE `recipe_price` BETWEEN :min AND :max"; $stmt = $DB->prepare($sql); $stmt->execute(array(':min' => $min, ':max' => $max)); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); if (count($rows) > 0) { foreach ($rows as $row) { // do loop stuff } } else { $min = 0; $max = 10; $HTML = ''; } } ?> <!--HTML code for price slider --> <form action="" method="post" id="recipe"> <div style="margin-left:20px"> <label for="amount">Price range:</label> <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly> <br><br> <div id="slider-range" style="width:50%;"></div> <br><br> <input type="submit" value="Find" /> <br><br> <?php echo $HTML?> </div> </form> <!-- connnect to Database - PDO connection--> <?php error_reporting(E_ALL & ~E_DEPRECATED & ~E_NOTICE); ob_start(); define('DB_DRIVER', 'mysql'); define('DB_SERVER', 'localhost'); define('DB_SERVER_USERNAME', 'xxxxx'); define('DB_SERVER_PASSWORD', 'xxxx'); define('DB_DATABASE', 'xxxxx'); define('PROJECT_NAME', 'BudGet Recipes'); $dboptions = array( PDO::ATTR_PERSISTENT => FALSE, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8', ); try { $DB = new PDO(DB_DRIVER . ':host=' . DB_SERVER . ';dbname=' . DB_DATABASE, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, $dboptions); } catch (Exception $ex) { echo $ex->getMessage(); die; } ?>
  6. Great site!, Im trying to understand a bit more pdo.. I have the following: I have a svg and when I click on the map the country name is loaded into a var on the click event by the code below: <script> function fill_contact(evt) //display click event { var country_id = evt.target.id document.getElementById('country_name').firstChild.data = country_id } </script> My php code is as follows: <?php //Define constants define('DB_DRIVER', "mysql"); define('DB_SERVER', ""); define('DB_DATABASE', "aeea"); define('DB_USER', "root"); define('DB_PASSWORD', "root"); //Database connection try { $dbh = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e){ die("Sorry, we could not connect you to this database, please contact the Administrator to sort this out.". $e->getMessage()); } //Get data $query = "SELECT firstname, lastname, email, photo FROM reps WHERE country like ?"; $country = 'country_name'; //Create the statement $stmt = $dbh->prepare($query); $stmt->execute(array($country)); //Use data $row = $stmt->fetch(PDO::FETCH_ASSOC); echo '<pre>', print_r($row), '</pre>'; ?> My Html code is as follows: <div id="IndexPage"> <div id="IndexPage_Left"> <div id="IndexPage_Left_top"> <h3>Country: <span class="label" id="country_name"> </span></h3><!—This works fine--> <p></p> <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display--> <p></p> <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display--> <p></p> <input style='margin-top: 20px;' type="submit" value="Contact me." id='jqxSubmitButton' /><!-- if clicked, it opens a contact form below, the email address is hidden--> </div> <div id="IndexPage_Left_bottom"> <h4>email form here<h4><!-- if email is clicked, it opens a contact form here with “email” address from database --> </div> </div> <div id="IndexPage_Right"> <svg id="map" version="1.1" and rest of svg code. My database has a table called reps. It had dta of representatives in each country in Africa. It has a number of fields ie. rep_id(unique indexed), firstname, lastname, email, postal, city, state, country, contact_no, photo etc. I want to be able to get the fields in the database and display them in the html form on the click events. Ie. The database must also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If they click off the map, it blanks out the details. How do I go about doing this? I’ve heard about XMLHttpRequest but don’t know how to go about doing it. Another question: Once I get the information, how do I display it correctly in the Html? I used <span>, but is it correct? Last question: Once I get the information email address, how do I show a contact form on "conact me" button? and then when guests click on another country, remove the contact form? This is my first website. Please help
  7. Hi All, I have tried with no luck the navigation just doesn't want to stay on the same line... HTML: <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a> <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="search"> <button type="button" class="navbar-toggle"> <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span> <div class="search-box"> <form action="" method="get"> <input type="text" placeholder="Search..." name="search"> </form> </div> </button> </div> </div> <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation"> <ul class="nav"> <li> <a class="active" href="#">Home</a> </li> <li> <a href="#">Showings</a> </li> <li> <a href="#">Photos</a> </li> <li> <a href="#">Videos</a> </li> <li> <a href="#">Mixes</a> </li> <li> <a href="#">Hire</a> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">Sign Up</a></li> <li class="divider-vertical"></li> <li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="more-drop"> <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal"> <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em"> <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"> </form> </div> </li> </ul> </div> </div> jQuery: function renderMenu() { if($(window).width() < 768 || isMobile.any()) { $("#myNavmenu").removeClass("collapse"); $("#myNavmenu").removeClass("navbar-collapse"); $("#myNavmenu ul.nav").removeClass("navbar-nav"); $("#myNavmenu ul.nav").removeClass("navbar-left"); $("#myNavmenu ul.nav").addClass("navbar-right"); $("#myNavmenu").addClass("navmenu-fixed-right"); $("#myNavmenu").addClass("offcanvas"); $(".navbar-toggle").css("display", "block"); $(".navbar-header").css("float", "none"); } else { $("#myNavmenu").removeClass("navmenu-fixed-right"); $("#myNavmenu").removeClass("offcanvas"); $("#myNavmenu").addClass("collapse"); $("#myNavmenu").addClass("navbar-collapse"); $("#myNavmenu ul.nav").addClass("navbar-nav"); $("#myNavmenu ul.nav").addClass("navbar-left"); $("#myNavmenu ul.nav").removeClass("navbar-right"); $(".navbar-toggle").css("display", "none"); $(".navbar-header").css("float", "left"); } } $(window).ready(function() { renderMenu(); }); $(window).resize(function() { renderMenu(); }); if($(".navbar").width() >= 768) { alignMenu(); } $(window).resize(function() { $("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html()); $("#myNavmenu .nav li.more").remove(); alignMenu(); }); function alignMenu() { var w = 0; var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350; if($(".more").length) { mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true); } var i = -1; var menuhtml = ''; jQuery.each($("#myNavmenu .nav").children(), function() { i++; w += $(this).outerWidth(true); if($(".navbar").width() >= 768 && !isMobile.any()) { if (mw < w) { menuhtml += $('<div>').append($(this).clone()).html(); $(this).remove(); } } }); if(menuhtml != "") { $("#myNavmenu .nav").append('<li class="more">' + '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>' + '<div class="more-drop"><ul>' + menuhtml + '</ul></div>' +'</li>'); } } I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.
  8. 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.
  9. Hi.. I really need help. I'm completely stuck and waaaay out of my depth here. I don't even know where to begin. I am desperate to learn how to use existing API services - but I find the whole concept completely overwhelming. I can't even get something from a Google search because everything on this subject just goes over my head. I have created an account with tvrage.com and got an API key. With that, I can get a list, in XML, of all the current TV shows in the UK and the US. It starts like this; <currentshows> <country name="US"> <show> <showid>69</showid> <showname>Who Wants to Be a Millionaire (US)</showname> <showlink>http://tvrage.com/Who_Wants_to_Be_a_Millionaire_US</showlink> </show> <show> <showid>237</showid> <showname>Jack Van Impe</showname> <showlink>http://tvrage.com/jack-van-impe</showlink> </show> <show> <showid>286</showid> <showname>Figure It Out</showname> <showlink>http://tvrage.com/figure-it-out</showlink> </show> <show> <showid>548</showid> <showname>TNA Pay-Per-View</showname> <showlink>http://tvrage.com/TNA_Pay-Per-View</showlink> </show> <show> <showid>576</showid> <showname>WWE After Burn</showname> <showlink>http://tvrage.com/wwe-after-burn</showlink> </show> All I want, is to list this out on MY website... I am a complete beginner. I imagine I have to copy and paste the URL in to my code, right? A javascript link? But then, what after that? I have barely touched javascript or jquery as a developer. Can someone just give me some guidance on this please? It's really starting to stress me out :-(
  10. hello, i'm facing this problem. i have a main page with the definition of tab. each tab is a different page called by ajax when selected. in some tabs i'd like to add datepickers but i'm having trouble. when i load the tab the datepicker does not work. do you have any suggestion or a better way to do this? thanks here's the code i'm using main.php <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script src="../lib/datepicker-it.js"></script> <script type="text/javascript" src="../lib/rollover.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="../css/screen.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../css/jqueryobject.css" /> <script> $(document).ready(function() { $( "#tabs" ).tabs({ }); }); </script> </head> <body> <?php include ("../top.php"); ?> <br /> <fieldset><legend>Ricerche</legend> <div id="tabs"> <ul> <li><a href="tab1.php">Tab1</a></li> <li><a href="tab2.php">Tab2</a></li> <li><a href="tab3.php">Tab3</a></li> </ul> </div> </fieldset> </body> </html> tab1.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script> $(document).ready(function() { $.datepicker.setDefaults( $.datepicker.regional[ "it" ] ); $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy", beforeShowDay: highlightOddsEven, showOtherMonths: true, selectOtherMonths: true }); function highlightOddsEven(date) { //return [true, date.getDate() % 2 == 1 ? 'odd' : '']; return [true, date.getDate() % 2 == 1 ? 'oddEven' : 'oddEven']; } </script> <div id="termConsegna" name="termConsegna"> <fieldset><legend>Termini Consegna</legend> <form class="cmxform" name="form_termine" id="form_termine" method="post" action="tab1.php"> <input type="hidden" id="submit" name="submit" value="1"> <table id="tab_termine" class="css-table"> <?php $i=1; while($sql->fetch()){ echo "<tr> <td>da <input type=\"text\" name=\"data_da$i\" id=\"data_da$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($da)."\"></td> <td> a <input type=\"text\" name=\"data_a$i\" id=\"data_a$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($a)."\"></td> <td><input type=\"text\" name=\"data_termine$i\" id=\"data_termine$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($termine)."\"></td> </tr>"; $i++; } ?> <input type="hidden" name="num_termini" id="num_termini" value="<?php echo $i; ?>"> <tr><td colspan="3"><input type="submit" value="Salva"></td></tr> </table> </form> </fieldset> </div> tab2.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script> $(document).ready(function() { $.datepicker.setDefaults( $.datepicker.regional[ "it" ] ); $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy", beforeShowDay: highlightOddsEven, showOtherMonths: true, selectOtherMonths: true }); function highlightOddsEven(date) { //return [true, date.getDate() % 2 == 1 ? 'odd' : '']; return [true, date.getDate() % 2 == 1 ? 'oddEven' : 'oddEven']; } </script> <div id="ricAvanz" name="ricAvanz"> <fieldset><legend>Ricerca Avanzata</legend> <form class="cmxform" id="form_ricerca" name="form_ricerca" action="ricerca.php" method="post"> <input type="hidden" id="ricerca" name="ricerca" value="1"> <p><label>Data1: </label>da:<input type="text" name="da_comparizione" id="da_comparizione" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['da_comparizione']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>><label> </label>a:<input type="text" name="a_comparizione" id="a_comparizione" value="<?php if(isset($_POST['ricerca'])) echo $_POST['a_comparizione']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php if(isset($_POST['ricerca'])) echo $dateValidation; ?>></p> <p><label>Data2: </label><input type="text" name="asta_si" id="asta_si" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['asta_si']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><label>Data3: </label><input type="text" name="asta_ci" id="asta_ci" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['asta_ci']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><label>Data4: </label><input type="text" name="sloggio_pa" id="sloggio_pa" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['sloggio_pa']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><input type="submit" value="Cerca"></p> </form> <fieldset> <?php echo $fieldset; while (isset($_POST['ricerca']) and $ricerca->fetch()) echo "<p><a href=\"../esecuzioni/panel_generale.php\">.......</a></p>"; ?> </fieldset> </div>
  11. This is jquery dialog box. http://jqueryui.com/dialog/#modal-confirmation I am wondering where would be the best place to add the dialog box div, in below html page? <html> <head> </head> <body> </body> </html>
  12. Hello, I have a navigation bar which opens up a submenu with a mouseover event on pc and with a touch for ios. For ios devices the following code is utilized to close the menu on a touch event to the document. <script> document.onclick = mclose(); window.addEventListener('load', function (){ // on page load document.body.addEventListener('touchstart', function(e){ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }, false) }, false) </script> My question is - how can I remove the above EventListener from the div displayed as the submenu so that touching within that div does not close it and the links are functional? I am guessing there is a method using preventdefault that may be applied but I am uncertain.
  13. I have done this a while back but lost the code. It worked back then. I am trying to recreate it but my memory isn't perfect. It's basically a follow/unfollow button like twitter. This is the main reference. http://jsfiddle.net/jakie8/ZECEN/ The php/mysql action queries do work if I call it through normal a href link; but for some reason, it's not being called through ajax. The jquery/ajax set variables do show up correctly when I test an alert with them inside. So that works too. I could really use fresh pair of eyes to see what I might have done wrong. Here is the index.php page. <html> <head> <script src="js/jquery-1.11.0.min.js"></script> <script> $(function() { $(document).on('click','.followButton',function(e) { e.preventDefault(); $button = $(this); if($button.hasClass('following')){ //$.ajax(); Do Unfollow var unfollow = $(this).attr('rel'); var follower = $("#follower-id").val(); $.ajax({ type: "POST", url: "actions.php", data: "unfollow="+unfollow+"follower="+follower+"&action=unfollow", success:function(data){ $button.removeClass('following'); $button.removeClass('unfollow'); $button.text('+ Follow'); } }); } else { // $.ajax(); Do Follow var following = $(this).attr('rel'); var follower = $("#follower-id").val(); $.ajax({ type: "POST", url: "actions.php", data: "following="+following+"follower="+follower+"&action=follow", success:function(data){ $button.addClass('following'); $button.text('Following'); } }); // return false; } }); $('button.followButton').hover(function(){ $button = $(this); if($button.hasClass('following')){ $button.addClass('unfollow'); $button.text('Unfollow'); } }, function(){ if($button.hasClass('following')){ $button.removeClass('unfollow'); $button.text('Following'); } }); }); </script> </head> <body> <div class="container"> <input type="hidden" id="follower-id" value="<?php echo $follower_userid; ?>"> <button class="btn followButton following" rel="<?php echo $following_userid; ?>">+ Follow</button> </div> </body> </html> And here is actions.php page. require_once 'core/init.php'; if($action == "follow") { $following = $_POST['following']; $follower = $_POST['follower']; $date = date('Y-m-d H:i:s'); $follow = $db->prepare("INSERT INTO followers(following_id, follower_id, date, active) VALUES(:following_id, :follower_id, :date, :active)"); $follow->bindParam(':following_id', $following); $follow->bindParam(':follower_id', $follower); $follow->bindParam(':date', $date); $follow->bindValue(':active', 1); $follow->execute(); } else if($action == "unfollow") { $unfollow = $_POST['unfollow']; $follower = $_POST['follower']; $date = date('Y-m-d H:i:s'); $unfollow = $db->prepare("UPDATE followers SET date = :date, active = :active WHERE following_id = :following_id AND follower_id = :follower_id"); $unfollow->bindParam(':following_id', $unfollow); $unfollow->bindParam(':follower_id', $follower); $unfollow->bindParam(':date', $date); $unfollow->bindValue(':active', 0); $unfollow->execute(); } else { // echo 'no action'; }
  14. Say I have button 1 and I want to replace it with button2 on click. How would I do that? <button id="button1">butto 1</button> <button id="button2">butto 2</button>
  15. This twitter style button I found. http://jsfiddle.net/jakie8/ZECEN/ I have managed to modify it to my liking. And yes I know the ".live" is depreciated and instead use "on". Anyways, the only thing I noticed is that if I click "Follow" button and it turns green; once I refresh the page, it goes back to default "follow" mode. I was wondering how can I keep it green even if I refresh the page?
  16. Hi, I am struggling to get a htmnl 5 canavas not to work after the back button is pressed in the browser. I have stopped back button being allowed but it stops me using javascript to use go back which i need. The code is as follows. <?php require('globals.php'); if ($ir['wof_spins'] > 0) { error("You have span the wheel this hour"); //this does not work on page back } ?> <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script> <script type='text/javascript' src="js/jquery.transit.min.js"></script> <style type='text/css'> .wheel-wrap { position: relative; width: 550px; height: 550px; overflow: hidden; margin: 0 auto; z-index: 1; } .marker { top: 10px; left: 247px; z-index: 1; position: absolute; } .wheel { top: 90px; left: 74px; width: 550px; z-index: 1; } </style> <script type='text/javascript'>//<![CDATA[ $(function(){ window.WHEELOFFORTUNE = { cache: {}, init: function () { console.log('controller init...'); var _this = this; this.cache.wheel = $('.wheel'); this.cache.wheelMarker = $('.marker'); this.cache.wheelSpinBtn = $('.wheel'); //mapping is backwards as wheel spins clockwise //1=win this.cache.wheelMapping = [400, 120, 80, 750, 150, 300, 60, 175, 500, 125, 75, 1000, 120, 200, 90, 600, 100, 250].reverse(); this.cache.wheelSpinBtn.on('click touchstart', function (e) { e.preventDefault(); if (!$(this).hasClass('disabled')) _this.spin(); }); //reset wheel this.resetSpin(); //setup prize events this.prizeEvents(); }, spin: function () { console.log('spinning wheel'); var _this = this; // reset wheel this.resetSpin(); //disable spin button while in progress this.cache.wheelSpinBtn.addClass('disabled'); /* Wheel has 10 sections. Each section is 360/10 = 36deg. */ var deg = 1500 + Math.round(Math.random() * 1500), duration = 6000; //optimal 6 secs _this.cache.wheelPos = deg; //transition queuing //ff bug with easeOutBack this.cache.wheel.transition({ rotate: '0deg' }, 0) .transition({ rotate: deg + 'deg' }, duration, 'easeOutCubic'); //move marker _this.cache.wheelMarker.transition({ rotate: '-20deg' }, 0, 'snap'); //just before wheel finish setTimeout(function () { //reset marker _this.cache.wheelMarker.transition({ rotate: '0deg' }, 300, 'easeOutQuad'); }, duration - 500); //wheel finish setTimeout(function () { // did it win??!?!?! var spin = _this.cache.wheelPos, degrees = spin % 360, percent = (degrees / 360) * 100, segment = Math.ceil((percent / 6)), //divided by number of segments win = _this.cache.wheelMapping[segment - 1]; //zero based array console.log('spin = ' + spin); console.log('degrees = ' + degrees); console.log('percent = ' + percent); console.log('segment = ' + segment); console.log('win = ' + win); //display dialog with slight delay to realise win or not. setTimeout(function () { $.ajax({ url: 'spinwheel.php', type: 'post', data: {"win":win}, success: function(data) { if(!alert('You have won 짜'+win)) document.location = 'http://samuraiassault.com/loggedin.php'; } }); }, 700); //re-enable wheel spin _this.cache.wheelSpinBtn.removeClass('disabled'); }, duration); }, resetSpin: function () { this.cache.wheel.transition({ rotate: '0deg' }, 0); this.cache.wheelPos = 0; } } window.WHEELOFFORTUNE.init(); });//]]> </script> </head> <body> <!-- By http://jquery4u.com / Sam Deering --> <h3><u>Wheel Of Fortune</u></h3><hr/> <table><tr> <td class="contentcontent" width="100%"> <div class="wheel-wrap"> <img class="wheel" src="images/wheel.jpg" /> <img class="marker" src="images/marker.png" /> </div> </tr> </td> </table><hr/><?php echo $goback; ?><hr/> </body> </html> thanks for you help in advance
  17. Quick question that I have not been able to find on the internet. Go figure. Can you apply the jQuery :eq(index) to a selection menu? I use it for list items but have been unsuccessful at using it for a selection menu. Probably because they aren't an ordered list? So I've probably answered my own question there. What could I use in it's place for a selection menu? I'm indexing the actual line item referenced to know what to load thusly... $('.tab-content div.tab:eq(' + $('#tab-menu > li').index(this) + ')').slideDown('slow'); Really need to do the same thing with a selection menu but google has not helped me out so far.
  18. Need little help with the quiz problem. I want to set time limit for each question in quiz module (say 30 seconds) and after that time, the form will auto submit the question (auto submit = no option selected = unanswered). There are 3 questions, so total time limit is 90 sec (30 sec each). I'm doing this via XAMPP. The link below provide the work so far https://www.dropbox.com/s/4dzlgjtjzvs48vw/quiz.rar?dl=0 Thanks
  19. Hi, I have a PHP script sendEmail.php that given some data (receiver, content, etc), sends an email to the receiver. When i click the Send button i fire the sendEmail.php script using AJAX: $('#sendbutton').on('click', function(){ $.ajax({ type: "POST", url: "js/ajax/sendEmail.php", data: {receiver:receiver, content: content} }); }); I want to add a feature call "Schedule send" where the user can select in how many minutes the email will be send. What i did, was to take the minutes value, insert it into a countDown timer, and as soon as the time is Zero, to fire the same AJAX call. This is working only if the browser is open. And i can understand this, since it is Javascript's responsibility to fire the AJAX call since its the one on client site. QUESTION: Is there a way to fire this sendEmail.php scipt even if the web browser is closed?Using PHP/MYSQL of course.. For example the user will select the recipient, write the email, schedule it to be sent 20 minutes later, and close the browser. If not, what are your suggestions? Thanks in advance, Christos
  20. I am trying to create a dynamic form using Jquery but don't know how to post those data using $_POST. The page <html> <head> <title> Dynamically create input fields- jQuery </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { var addDiv = $('#addinput'); var i = $('#addinput p').size() + 1; $('#addNew').live('click', function() { $('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><input type="text" id="p_new2" size="40" name="p_new_2' + i +'" value="" placeholder="I am New 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv); i++; return false; }); $('#remNew').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); </script> </head> <body> <h2>Dynammically Add Another Input Box</h2> <form action="gen.php" method="post"> <div id="addinput"> <p> <input type="text" id="p_new" size="40" name="p_new" value="" placeholder="Input Value" /><input type="text" id="p_new2" size="40" name="p_new2" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a> </p> </div> </form> </body> </html> Here is live example.. A Pen by Captain Anonymous Whatever, The new fields got an unique name="" value as p_new_1, p_new_21 for first new field, p_new_2, p_new_22 for second new field ...... ...... Now, I know I can display inserted data using <?php echo $_POST["p_new_1"]; ?> and similar way like this... But as a growing field, this form can have unlimited input field. How can I display all of those data in the page gen.php? It must be something like this example: <html> <body> <div class="header">Generated content<div> <p><a href="inserted data of first field of default row">inserted data of second field of default row</a></p> <p><a href="inserted data of first field of first new row">inserted data of second field of first new row</a></p> <p><a href="inserted data of first field of 2nd new row">inserted data of second field of 2nd new row</a></p> <p><a href="inserted data of first field of 3rd new row">inserted data of second field of 3rd new row</a></p> <p><a href="inserted data of first field of 4th new row">inserted data of second field of 4th new row</a></p> And list go on according to submitted form.... </div></body></html> I actually lake of knowledge of PHP and no idea about array or something named loop. Can someone do it for me? What I have to do in gen.php?
  21. If you search for images on Google images, you will see how they setup their images, side by side and have infinity scroll. I don't care about the infinity scroll part, but I am interested in how they set up the images? My plan is to retrive the images from the database and use pagination numbers.
  22. How do disable searching in specific column like Action col Id--Username--Subject--Action | Do not search oTable = $('.datatable table').dataTable({ "bJQueryUI": false, "bAutoWidth": false, "sPaginationType": "full_numbers", "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>', "oLanguage": { "sSearch": "<span>Filter all:</span> _INPUT_", "sLengthMenu": "<span>Show entries:</span> _MENU_", "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": "Next", "sPrevious": "Previous" } }, "order": [], /* No initial order */ "aoColumnDefs": [{ "bSortable": false, "aTargets": ['nosort'] /* Colomn data not sortable. Use <th class="nosort"> */ }] });
  23. Hi, I have the below code and jquery in wordpress. I would like the form to auto submit, but at the moment I just get a 0 in the place of the heart icon. it seems to refresh but the form is not submitting the query. Thank you in advance <form id="lastviewer" class="ajax-form" action="<?php echo AJAX_URL; ?>" method="POST"> <?php if(ThemexUser::islastviewed(ThemexUser::$data['active_user']['ID'])) { ?> <a href="#" title="<?php _e('Remove from lastviewed', 'lovestory'); ?>" data-title="<?php _e('Add to Last Viewed', 'lovestory'); ?>" class="icon-heart submit-button current"></a> <input type="hidden" class="toggle" name="user_action" value="remove_lastviewed" data-value="add_lastviewed" /> <?php } else { ?> <a href="#" title="<?php _e('Add to Last Viewed', 'lovestory'); ?>" data-title="<?php _e('Remove from Last Viewed', 'lovestory'); ?>" class="icon-heart submit-button"></a> <input type="hidden" class="toggle" name="user_action" value="add_lastviewed" data-value="remove_lastviewed" /> <?php } ?> <input type="hidden" name="user_lastviewed" value="<?php echo ThemexUser::$data['active_user']['ID']; ?>" /> <input type="hidden" class="nonce" value="<?php echo wp_create_nonce(THEMEX_PREFIX.'nonce'); ?>" /> <input type="hidden" class="action" value="<?php echo THEMEX_PREFIX; ?>update_user" /> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { window.setInterval(function() { AutoPost(); }, 3000); }); function AutoPost() { $.ajax({ type: "POST", url: "<?php echo AJAX_URL; ?>", success: function(data) { $("#lastviewer").html(data) ; } }); } </script>
  24. I am using the dragdrop functionality on a page which also updates the database.Drag and drop is working fine But i am having difficulty to determine which events to use to update the database. Here is my code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <!--<link rel="stylesheet" href="/resources/demos/style.css">--> <style> body { min-width: 520px; } .interview-questions-column { width: 400px; float: left; padding-bottom: 100px; } .question-bank { width: 500px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; padding: 0.3em; } .portlet-header { padding: 0.2em 0.3em; margin-bottom: 0.5em; position: relative; } .portlet-toggle { position: absolute; top: 50%; right: 0; margin-top: -8px; } .portlet-content { padding: 0.4em; } .portlet-placeholder { border: 1px dotted black; margin: 0 1em 1em 0; height: 50px; } .sortable { border: 1px solid #eee; width: 95%; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } .sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } .bank-quertion-sotrable { border: 1px solid #eee; width: 150px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } .bank-quertion-sotrable li{ margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 200px; } .ui-state-default { height: 1.5em; line-height: 1.2em; } </style> <script> $(function() { $( ".interview-questions-column" ).sortable({ connectWith: ".interview-questions-column", handle: ".portlet-header", cancel: ".portlet-toggle", placeholder: "portlet-placeholder ui-corner-all" }); $( ".portlet" ) .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) .find( ".portlet-header" ) .addClass( "ui-widget-header ui-corner-all" ) .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); $( ".portlet-toggle" ).click(function() { var icon = $( this ); icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" ); icon.closest( ".portlet" ).find( ".portlet-content" ).toggle(); }); }); $(function() { $( ".sortable" ).sortable({ placeholder: "ui-state-default", connectWith: ".connectedSortable", /*receive: function(event, ui) { // only perform for sub drop downs if($(this).hasClass('question_bank')) { // if the item doesn't have the matching sub class if (!$(this).hasClass($(ui.item).attr('class'))) { // cancel the sortable $(ui.sender).sortable('cancel'); } } alert('receive'); alert(ui.sender.attr("dataid")); alert(ui.sender.toSource()); // alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]"); },*/ update: function (event, ui) { //serial = $('#sortableF').sortable('serialize'); var data = $(this).sortable('serialize'); alert(data); //alert('update sortable'); //alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]"); // POST to server using $.post or $.ajax /*$.ajax({ data: 'test', type: 'POST', url: '/your/url/here' });*/ } }).disableSelection(); }); $(function() { $( ".draggable" ).draggable({ connectToSortable: ".sortable", helper: "clone", /*revert: function(valid) { if(valid) { alert("drop is valid"); //Dropped in a valid location } else { alert("drop is invalid"); //Dropped in an invalid location } // return !valid; return false; }*/ stop: function( event, ui ) { // alert(ui); // alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]"); } }); }); $( "ul, li" ).disableSelection(); </script> </head> <body> <div class="interview-questions-column"> <div class="portlet"> <div class="portlet-header">Feeds</div> <div class="portlet-content"> <ul id="sortableF" class="connectedSortable sortable"> <li class="ui-state-default" id="item-1">Item 1</li> <li class="ui-state-default" id="item-2">Item 2</li> <li class="ui-state-default" id="item-3">Item 3</li> <li class="ui-state-default" id="item-4">Item 4</li> <li class="ui-state-default" id="item-5">Item 5</li> </ul> </div> </div> <div class="portlet"> <div class="portlet-header">News</div> <div class="portlet-content"> <ul id="sortableS" class="connectedSortable sortable"> <li class="ui-state-default" id="item-6">Item 1</li> <li class="ui-state-default" id="item-7">Item 2</li> <li class="ui-state-default" id="item-8">Item 3</li> <li class="ui-state-default" id="item-9">Item 4</li> <li class="ui-state-default" id="item-10">Item 5</li> </ul> </div> </div> <div class="portlet"> <div class="portlet-header">Shopping</div> <div class="portlet-content"> <ul id="sortableS" class="connectedSortable sortable"> <li class="ui-state-default" id="item-11">Item 1</li> <li class="ui-state-default" id="item-12">Item 2</li> <li class="ui-state-default" id="item-13">Item 3</li> <li class="ui-state-default" id="item-14">Item 4</li> <li class="ui-state-default" id="item-15">Item 5</li> </ul> </div> </div> <div class="portlet"> <div class="portlet-header">Links</div> <div class="portlet-content"> <ul id="sortableS" class="connectedSortable sortable"> <li class="ui-state-default" id="item-16">Item 1</li> <li class="ui-state-default" id="item-17">Item 2</li> <li class="ui-state-default" id="item-18">Item 3</li> <li class="ui-state-default" id="item-19">Item 4</li> <li class="ui-state-default" id="item-20">Item 5</li> </ul> </div> </div> <div class="portlet"> <div class="portlet-header">Images</div> <div class="portlet-content"> <ul id="sortableS" class="connectedSortable sortable"> <li class="ui-state-default" id="item-21">Item 1</li> <li class="ui-state-default" id="item-22">Item 2</li> <li class="ui-state-default" id="item-23">Item 3</li> <li class="ui-state-default" id="item-24">Item 4</li> <li class="ui-state-default" id="item-25">Item 5</li> </ul> </div> </div> </div> <div class="question-bank"> <div class="portlet"> <div class="portlet-header">Question bank</div> <div class="portlet-content"> <ul id="question_back" class="connectedSortable bank-quertion-sotrable"> <li class="ui-state-default draggable" id="item-26">Item 1</li> <li class="ui-state-default draggable" id="item-27">Item 2</li> <li class="ui-state-default draggable" id="item-28">Item 3</li> <li class="ui-state-default draggable" id="item-29">Item 4</li> <li class="ui-state-default draggable" id="item-30">Item 5</li> </ul> </div> </div> </div> </body> </html> Basically above code will form few boxes with items(which are actually questions) in it. There is one box on the right side with heading "Question Bank". From the "Question Bank" we can drag the questions to other boxes but can't do the reverse(this is also working). Also we can sort the questions within the box or drag the questions from one box to another. Box heading are the categories and items are questions associated to that categories. What i need is : Event that updates the database when we drag the questions from "Question Bank" to any box on the left side. Please note Questions in the "Question Bank" are pre created coming from database. Event that updates the database when we sort the questions within the box. Event that updates the database when we drag the question from one box to another box. it should also do the sorting for that two boxes. Event that updates the database when we sort the boxes. Here is the JS Fiddle link jsfiddle.net/6o30rrzx Question Bank is comming on the bottom of the page instead of on the right side any advice and suggestions will be greatly appreciated Thank you for reading this post.
  25. I'm trying to make a quiz powered by PHP and jQuery, with all the data (questions, answers, ID's, etc.) stored in a database. My current code attaches a radio button to each answer in a list... <li class="Answer '.$QID.'-'.$Value.' '.$Correct.'" id="'.$QID.'"><label>'.$Value.'. <input name="q'.$QID.'" input data-key="'.$Value.'" type="radio"> '.$QA.'</label></li> Taking a tip from a commercial quiz I saw online, I'd like to remove the radio button (and presumably the form it's a part of, using some CSS to make each answer look something like a button... <li class="Answer '.$QID.'-'.$Value.'" id="'.$QID.'">'.$QA.'</li> However, the commercial quiz is written in JavaScript, which is very hard for me to follow. So I'm trying to create something similar using more PHP (and jQuery). I'm now trying to figure out how to "capture" a value for each question, based on the answer selected by a visitor. For example, let's say someone chose B as the answer to the first question. The ID ($QID) for that question and each associated answer is the numeral 1. The value for $QID-$Value for that particular answer is 1-B. Let's say I create a variable - $Answer1 - to store an ID or value for a user's answer choice for the first question. So, in this case, $Answer1 = '1-B' (if we go with $QID-$Value) or simply 'B' if we just go with $Value. I'm not sure exactly how to capture these values. I don't even know what I should be using - PHP, jQuery or AJAX. Just to get started, all I want to do is give $Answer1 the value for whatever answer the user chooses. So $Answer1 should equal 'B' in this case. Can anyone tell me how to do that, or at least tell me if I should be using PHP, jQuery or AJAX to accomplish it? Thanks.
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.