login form and Facebox

[Thomas de Jesus]

I have a single field form for scanning ID cards. The form checks the barcode against a user in a mysql database. If the user exists it displays some information, and if not a static sorry message. I'd like to throw the contents of these messages into facebox with a print button so the student can print off the message.

here is my form:

<form action="login.php" method="post" name="login" id="form1"> 

<label><strong>Student ID</strong></label>  

<input name="student_id" type="text" size="20" maxlength="20" value=""/>  

</form>

here is the php to process the result:

require_once 'config/config.php';

//If the user has submitted the form

if(isset($_REQUEST[id'])){

    $id = $_POST['id'];

   

$res = mysql_query("SELECT * FROM `students` WHERE `id` = '".$id."'");

$num = mysql_num_rows($res);

        //check if there was not a match

        if($num == 0){

            //if not display an error message

            echo "<p style='text-align:center'>

YOU HAVE NOT BEEN VERIFIED 

FOR TAKING THIS EXAM.  PLEASE 

REPORT TO THE DESIGNATED 

INSTRUCTOR OF RECORD OR 

LAB SUPERVISOR IMMEDIATELY.

</p>";

        }else{

                //split all fields from the correct row into an associative array

                $row = mysql_fetch_assoc($res);

echo "<p style='text-align:center;'>";

echo $row["first_name"] . " " . $row["last_name"];

echo "</p><p style='text-align:center;'>";

echo $row["id"] . " ";

echo $row["test_id"];

echo "</p><p style='text-align:center;'>";

echo $row["course"] . " " . $row["section"] . " " . $row["course_title"];

echo "</p>";

              

    }

}

now, with some javascript, this submits to a div easily, but not to any type of lightbox. help?

[Dennis Notebaart]

The easiest way is to do this with Ajax. Facebox has a built-in function that also shows a loading icon:

var id = $("input#id").val();  //Just an example to get the ID value to submit to the php page

$.facebox(function() { 
  $.get('yourfile.php?id='+id, function(data) {  //Change the filename to the right file
    $.facebox(data)
  });
});

Op woensdag 8 mei 2013 16:48:59 UTC+2 schreef Thomas de Jesus het volgende:

[Thomas de Jesus]

i'm not certain i understand then how to send the data i get to the facebox div. I'm guessing as an iframe, but how do i display the div. Standard facebox info seems rather simple, but most ligtbox implementations don't talk about calling them with a form.

BTW, thanks for the help!

--
You received this message because you are subscribed to a topic in the Google Groups "facebox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/facebox/YE4vLJT2zNE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to facebox+u...@googlegroups.com.
To post to this group, send email to fac...@googlegroups.com.
Visit this group at http://groups.google.com/group/facebox?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Pretend inferiority and encourage his arrogance. 

[Dennis Notebaart]

If you don't know what I mean, post some of your code. I could describe it more detailed.

Recently I've made something similar, a page where a barcode can be scanned and the corresponding product data is shown. The form shouldn't be used as a standard HTML form where you send the data to a second (php) page. Instead you first disable the form or use the jQuery preventDefault() method to stop the form from performing the standard action. Then you get the value(s) of the form data, in your case the user ID. The next step is to send the data via Ajax to the php script on the server ($.ajax();). If you let your php script output HTML or JSON data you can use this data in the ajax .done(function(data){...}); section.

To use this combined with facebox there are two possibilities. The first one is to make a div on your page that is on default set to display:none;. When your ajax request is done you first put the data in the right containers in this hidden div and then fire facebox (something like $.facebox("#hiddendiv")) to present the data to the user.

The other way is to use the ajax method in the facebox api like I mentioned in my previous reaction. The first part of your script where you retrieve the user ID will be the same, but you replace the ajax request with the facebox function. The advantage of this method is that during the ajax call a facebox pops up and shows the user a loading gif. The downside is that the result coming from your php page should be html to be put in the facebox. This way you have html code for one page in two seperate files, not something I usually like to do. Besides that you could implement your own loading icon with 2 simple lines of jQuery.

On my page for handling barcodes the script looks like this (don't mind the timer code, it is to prevent the event binder from firing the function after only a single character is scanned):

$("#barcode").bind('input propertychange',function(){

    var delay = 100; // in ms, 2000 = 2 sec

    clearTimeout($(this).data('timer'));

    $(this).data('timer', setTimeout(function(){

        $(this).removeData('timer');

        

        var code = $("#barcode").val();

        scan(code, 'scan');

      $("#barcode").val('');

    }, delay));     

});

function scan(barcode, method){

$("#scanResult span").each(function(){$(this).hide();});

$("#img_ok").hide();

$("#img_error").hide();

    $("#img_loading").show();

    

    var type = '';

    if (method=='scan') {

   if (barcode.length==7 && barcode.substr(0,1)=='P') {

    type='pt_nr';

   }

   else if (barcode.length == 13) {

    type='ISBN';

   }

   else {

    $("#scanResult #notFound").show();

    $("#img_loading").hide();

    return false;

   }

} else {

type='unknown'

}

    // make ajax request

$.ajax({

type: "POST",

dataType: "json",

url: "resources/scripts/smdetails.server.php?key=9763jhh12",

data: { field: type, query: barcode}

}).done(function( res ) {

if (res.numrows==0){

$("#scanResult #notFound").show();

$("#img_loading").hide();

} else if (res.numrows>1){

$("#scanResult #moreThenOne").show();

$("#img_loading").hide();

} else {

// put data in table

$("td#art_nr").text(res.art_nr);

$("td#title").text(res.title);

// etc..

$.facebox({ div: '#result' });

}

});

}

Like I mentioned before, if you have more questions just post some more of your code.

Good luck!

Op vrijdag 10 mei 2013 16:11:47 UTC+2 schreef Thomas de Jesus het volgende: