Cannot pass bootstrap table cell data to php? - php

I'm developing a web based inventory system. In my project i have a user management page and it has a table to view all the users.
+----------------------------------------+
+ username + user type + + +
+----------+-----------+--------+--------+
+ sample + sample + edit + delete +
+----------+-----------+--------+--------+
+ sample + sample + edit + delete +
+----------+-----------+--------+--------+
+ sample + sample + edit + delete +
+----------+-----------+--------+--------+
It has two buttons to edit user type and to delete user from the database. i need to get username from this table to php script, to execute delete query. I tried this,
$(document).on('click','.remove' ,function(){
var $item = $(this).closest("tr").find('td:eq(0)').html();
console.log($item);
<?php $username = <script>$item</script>?>
});
but i can't pass this 'username' variable to php. How to do this? Thank you :-)

To achieve this you need to perform an ajax request like this:
$(document).on('click','.remove' ,function(){
var $item = $(this).closest("tr").find('td:eq(0)').html();
$.post("url/file.php", { // your php file
username: $item
}, function(data, status){
// you will get response from your php page (what you echo or print)
});
});
PHP side:
$username = $_POST['username'];
//Do whatever you want ...
echo "success";

You can do it by Ajax, this is suggested for your code:
$.ajax({
url: "data.php",//file wich has query select to db table
data: {id:theid},//describe your data here
dataType: 'json',// type of data that will you get (JSON/HTML).
type: 'POST',//sending type (POST/GET)
success: function(data) {
//do change the select option
}
});
Goodluck!

Related

Laravel Eloquent in jQuery Script

EDIT
I just realized I didn't post the entire code.
I am using an Ajax live search to retrieves cards when a user types in a part of their last name. When the results appear, a user will click on the row and it will retrieve that cards information.
From there, I want to use the card information to generate additional html.
$.ajax({
type: "get",
url : '{{ route('compare.search') }}',
data: {'search':$(this).val()},
success: function(data) {
$("#suggestion-box-1").slideDown();
$("#suggestion-box-1 tbody").html(data);
$(data).each(function(index){
$("#suggestion-box-1 tbody").append('<tr><td><a href="#" class="player-name" data-card=' + data[index].id + '>' + data[index].first + ' ' + data[index].last + '</a></td><td><span class="card-type"></span>' + data[index].card_type.replace('-', ' ') + '</td><td align="center"><span class="card-overall">' + data[index].overall + '</span></td></tr>');
});
// This is the part that I can't figure out
$('#suggestion-box-1 .player-name').click(function() {
var cid = $(this).data('card');
var card = {!! App\Card::where("id", $cid)->get() !!};
console.log(card);
});
}
});
} else if (len == 0) $('#suggestion-box-1').slideUp();
});
Any sort of help would be greatly appreciated!
That's gonna be impossible without an API since blade won't talk back to the server for that function.
You'll need to create an API endpoint that takes that javascript cid variable and responds with the card information you need.
The flow is blade generates the page THEN the cid variable gets populated in the frontend so cid doesn't exist at the moment the ::where function is called.

How to populate a select from mysql using Ajax and json

I have an empty select in HTML that i want to populate through the database.
I have a button that opens a Modal and passes an id. With that ID i fetch the Data from the database and fill all the form fields for one company. However a company can have multiple employees, so i want to fill a select so that all employees that have the same ID as the company, will be shown.
For example:
Company ID is 43, i fill all the form fields (name, location etc.) using this id and fetching the data from the database.
In the table employee there are 3 employees that have the ID 43 as FK, let's name them hans, max and peter.
Now i want to populate a select that shows all 3 of them, so that an user can select one of them and depending on that selection an empty form will be populated, so that it can be edited.
I'm assuming this involves a loop, but i'm not sure how to do it. Not sure if it's relevant but all my mysqli calls use prepare, as i've read this is more secure.
The loop i've tried so far is this, but it's not working. I'm not sure if it's the loop that isn't working or if i'm trying to populate the select wrong.
This is inside a select and all the input fields get populated.
while ($row = $result->fetch_assoc()){
$prename= $row['prename'];
$surname= $row['surname'];
$users_arr[] = array("prename" => $prename, "surname" => $surname);
}
Then i return the data as follows
echo json_encode(array('users_arr'=>$users_arr));
and try to populate the select in the AJAX success
$.each(data.users_arr, function(key, val){
$("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
});
Thanks
Edit: The complete Ajax call:
$.ajax({
url: url,
data: data,
dataType: 'json',
cache: false,
type: "POST",
error: function () {
$('#alertdone').removeClass('hidden');
},
//if ajax call is successful populate form fields and hide error message
success: function (data) {
//hide error message
$('#alertdone').addClass('hidden');
$.each(data.users_arr, function(key, val){
$("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
});
}
});
});
In your AJAX success you can try
var d = $.parseJSON(data);
$.each(d.users_arr, function(index, element) {
$("#contact_persons").append('<option id="' + element.prename + '">' + element.surname + '</option>');
});
Edit
$.ajax({
url: url,
data: data,
cache: false,
type: "POST",
error: function () {
$('#alertdone').removeClass('hidden');
},
success: function (data) {
//hide error message
$('#alertdone').addClass('hidden');
var d = $.parseJSON(data);
$.each(d.users_arr, function(index, element) {
$("#contact_persons").append('<option id="' + element.prename + '">' + element.surname + '</option>');
});
}
});
});

Ajax not sending data at all

im working on a script that sends a few data stored using GET to a PHP script(process it then put it into database).
here's the ajax script , im using jQuery ajax
(i have included the latest jQuery script)
function send(){
$.ajax({
type: "GET",
url: "http://examplewebsite.com/vars/parse.php",
data: "id=" + id + "&purl=" + purl + "&send" + "true",
cache: false,
success: function(){
alert("Sent");
}
});
}
id and purl are JavaScript variables .
send() function is set in :
Send
PHP code:
<?php
//Connect to database
include ("config.php");
//Get the values
$id = $_GET['id'];
$purl = $_GET['purl'];
$send = $_GET['send'];
if ($send == 'true') {
$insertdata = "INSERT INTO data (id,purl,send) VALUES ('$id','$purl',+1)";
mysql_query($insertdata) or die(mysql_error());
} else {
//do nothing
}
?>
when i type http://examplewebsite.com/vars/parse.php?id=123&purl=example&send=true
it works, the php injects the data into the database as i wanted but when i use send() and wanted to use ajax to send the data, failed.
Is there any mistakes that im making?
You're missing the = after send,
function send(){
$.ajax({
type: "GET",
url: "http://examplewebsite.com/vars/parse.php",
data: "id=" + id + "&purl=" + purl + "&send=" + "true",
cache: false,
success: function(){
alert("Sent");
}
});
}
should fix it, also. post more information about your javascript. We just have to assume id and purl are filled out. Did you try debugging them (if this doesn't work).
Also, debug the URL that is requested, you can use firefox or chrome dev-tools for this. What url is being send to the PHP page and is it correct
missing "=" in the data string.
data: "id=" + id + "&purl=" + purl + "&send" + "true",
should be
data: "id=" + id + "&purl=" + purl + "&send=" + "true",
It depends where you are running your script, because ajax calls are not meant to work on other domains. If you need to run the js on http://example1.com and the call to go to http://example2.com you need another approach.
An idea is to use json
Try
data: { id: id, purl: purl, send: true }
See if that makes any difference
First, i suggest (if you use Chrome or Safari) to use the Web Inspector (Right Click anywhere - inspect element) and then press ESC to show to console, this will assist you in validating your JS code. That would show you you have a '=' missing.
Second, i would try something a bit more simple just to make sure you get to the file.
JS:
// Don't forget encoding the data before sending, this is just a simple example
$.get("parse.php?sent=true",
function(data){
alert("I think i got a nibble...");
alert(data);
}
);
On the php file :
$sent = (isset($_GET['sent']) && !empty($_GET['sent']))?$sent:false;
if($sent) echo 'whatever data you want back';
Just make sure that you actually get the alert, and if so , move on from there to build the PHP file as needed for your data.
Hope this assists,
Shai.

retrieve array value from jquery in php

I am using a jquery change event using a slider to present to a user the amount of inputs that they select from the slider. I am struggling to find a way to process these results in php and insert into mysql. I would be grateful if someone could start me off with this. Thank you
for(var i = 0;i < $(this).val();i++) {
$("#boxamount").append('<div data-role="fieldcontain"><label for="boxamount" class="ui-input-text">Enter box ' + (i + 1) + ' number:</label><input type="text" name="boxamount['+i+']" id="boxamount['+i+']" class="boxamount ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" /></div>')
}
Well, you could loop over the text boxes, store the values in an object and submit them via an ajax request. Here's some rough code below.
var data = {};
$('input[name^="boxamount"]').each(function(){
data[ $(this).attr('id') ] = $(this).val();
});
Then perform an ajax request.
$.ajax({
type: "POST",
url: "yourServerScript.php",
data: data,
success: function(msg){
alert( "Data Saved: " + msg );
}
});

jQuery not generating correct queryString

I have been working on a website that uses a combination of PHP, jQuery, MySQL and XHTML in order to register students for a piano recital. This has no official purpose other than a learning exercise for me in getting all of these to work together. However, I have had a lot of problems getting the PHP to talk with the database and I'm not sure what my problem is. But before that can be tackled there is a really annoying issue that I've run across. For some reason my jQuery is not building a complete post URL for the PHP.
I am using jQuery version: 1.4.2 from Google. The query string is being built by using:
var ajaxOpts = {
type: "post",
url: "../php/addRecital.php",
data: "&performance=" + $("#performanceType :selected").text() +
"&groupName=" + $("#groupName").val() +
"&student1fName=" + $("#firstName").val() +
"&student1lname=" + $("#lastName").val() +
"&student1id=" + $("#studentID").val() +
"&student2fname=" + $("#Second_Student_firstName").val() +
"&student2lname=" + $("#Second_Student_lastName").val() +
"&student2id=" + $("#Second_Student_studentID").val() +
"&skillSelect=" + $("#skillSelect :selected").text() +
"&instrument1=" + $("#instument1 :selected").text() +
"&otherInstrument1=" + $("#otherInstrument1").val() +
"&instrument2=" + $("#Instument2 :selected").text() +
"&otherInstrument2=" + $("#otherInstrument2").val() +
"&location=" + $("#locationSelect :selected").text() +
"&roomNumber=" + $("#roomNumber").val() +
"&time=" + $("#timeSlotSelect :selected").text()
,
success: function(data) { ...
There is more than the above function, but I didn't think that it would pertain to here. I then call the code using:
$.ajax(ajaxOpts);
However, instead of creating the entire query string I get:
http://sterrcs123.mezoka.com/schoolProject/assign/assign13.html?groupName=&firstName=Samuel&lastName=Terrazas&studentID=23-343-3434&Second_Student_firstName=&Second_Student_lastName=&Second_Student_studentID=&otherInstrument=&Second_Student_Instrument=&roomNumber=2
Which as you can tell is missing a number of keys and their values. I would appreciate any help I can get because this is really driving me insane. Thanks.
It appears that your form is simply submitting itself without using your AJAX operation. Did you attach to the form's submit event and THEN run your ajax call? You will also want to return false from the submit event handler to prevent the default behavior you are seeing above.
Example:
$('#formid').submit(function(){
//your ajax code here.
return false;
});
If you're talking to an ASP.Net web service then you would need data to be a JSON string of your arguments. Otherwise, you can pass your data in by using an object literal (truncated for brevity):
var ajaxOpts = {
type: "post",
url: "../php/addRecital.php",
data: {
performance: $("#performanceType :selected").text(),
groupName: $("#groupName").val(),
student1fName: $("#firstName").val(),
student1lname: $("#lastName").val()
},
success: function(data)
}
As per the missing values, make sure you're capturing the button click / form submit.
$('form').submit(function (e) {
$.ajax(ajaxOpts);
return false;
});

Categories