Viewing values in modal box/pop up - HTML, JavaScript, PHP and JavaScript - javascript

I've been trying to retrieve the data from MySQL database in order to display it on a modal/pop-up box in javascript. Here's my current progress:
When you click the "View Images" Button
Here's my snippet code for modal pop up box:
HTML
This html Trigger button will get the Report_ID in its button attribute id to pass it to javascript.
" onclick="showDetails(this);">View Images
<!-- Modal -->
<div class = "modal fade" id = "myModal" 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>
<h4 class = "modal-title" id = "myModalLabel">
Images of the Report
</h4>
</div>
<div class = "modal-body">
<p>Original Image: <span id = "Orig_Image"></span></p>
<p>RGB Image: <span id = "RGB_Image"></span></p>
<!--<img src="smiley.gif" alt="Smiley face" height="200" width="200">-->
</div>
<!-- <div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>-->
</div>
</div>
</div>
JAVASCRIPT
This javascript code willl be the one to get the Report_ID from the html table. Report_ID will be the identifier in MySQL Query and will be used in the php script Retrieve_Image.php using GET method. If the retrieval of the data is success the javascript will pass the values in to the html with their corresponding ids (ex. ).
function showDetails(button){
var Report_ID = button.id;
}
$.ajax({
url: "Retrieve_Image.php",
method: "GET",
data: ("Report_ID": Report_ID),
success: function(response){
//alert(response);
var Images = JSON.parse(response);
$("#Orig_Image").text(Images.Original_Image_Directory);
$("#RGB_Image").text(Images.RGB_Image_Directory);
$("#myModalLabel").text(Images.Image_Name);
}
error: function(e){
alert('Error: '+e);
}
});
PHP
This script / php code will retrieve the images data and will return its retrieved values to javascript using json encode.
<?php
session_start();
include_once ("../System_Connector.php");
include_once ("Admin_Session_Checker.php");
$Report_ID = $_GET["Report_ID"];
$Retrieve_Report = "SELECT Image_Name,Original_Image_Directory,RGB_Image_Directory FROM Report_Image WHERE Report_ID = $Report_ID";
$Retrieval_Image_Query = mysqli_query($Connection, $Retrieve_Report);
if(!$Retrieval_Image_Query){
echo "<script type = 'text/javascript'> alert('Error: Could not retrieve data from database because of this error: '".mysqli_error($Connection)."') </script>";
}
$Report_Result = mysqli_fetch_object($Retrieval_Image_Query);
echo json_encode($Report_Result);
?>
PROBLEM
It does not returning any data from php script. I tried to run the php script by putting a value on $_GET["Report_ID"]; and it doesn't have a problem. I think the problem is on the trigger button, where it gets the Report_ID using button id. How can i find and fix the problem? All I want is to display the text values first for Original Image and RGB Image.
Example of what I'm trying to achieve (Output goal):
P.S. I used the bootstrap Modal Box: https://www.tutorialspoint.com/bootstrap/bootstrap_modal_plugin.htm

### add $.ajax inside showDetails ###
function showDetails(button){
var Report_ID = button.id;
$.ajax({
url: "Retrieve_Image.php",
method: "GET",
data: {"Report_ID": Report_ID},
success: function(response){
//alert(response);
var Images = JSON.parse(response);
$("#Orig_Image").text(Images.Original_Image_Directory);
$("#RGB_Image").text(Images.RGB_Image_Directory);
$("#myModalLabel").text(Images.Image_Name);
}
error: function(e){
alert('Error: '+e);
}
});
}

Place your ajax code inside showDetails function.

Related

not working form and form variable validation?

my form
<div class="input-holder">
<input type="text" class="search-input" id="string" placeholder="Искать" />
<button class="search-icon" onclick="searchToggle(this, event);"><i class="fas fa-search"></i></button>
</div>
api.php
case 'metafind': {
$string = $_GET['string'];
$list = mysqli_query($connect, "SELECT * FROM `sub_meta` WHERE `meta_key` = 'Название'&& `meta_value` ");
while ($item = mysqli_fetch_assoc($list)) {
if ($item['meta_value'] == $string) {
$id = $item['post_id'];
$arrr[] = array('post_id' => $item['post_id'], 'coords' => $find['meta_value']);
}
}
echo json_encode($arrr);
} break;
when you click on the form gives an error in the console:
(index):121 Uncaught ReferenceError: searchToggle is not defined
at HTMLButtonElement.onclick ((index):121)
it is necessary that when a word is entered into the form it was
searched for a name in the column meta_value by meta_key and then
displayed please help I'm new to php
You should try something like my below example :
1) I created textbox where i will write data then it will search in array and get the value from there where i have made array for example purpose and display the data in #div1
<div class="input-holder">
<input type="text" class="search-input" id="string" placeholder="Искать" />
<button class="search-icon"><i class="fas fa-search"></i>Go</button>
<div id="div1"> </div>
</div>
2) When button click we have to do ajax call then we will get data from there and get that data in response and we will show that response where we want to display
<script>
$(document).ready(function(){
$("button").click(function(){
var stringval = $("#string").val();
$.ajax({data: {val : stringval} , url: "democode.php", type: 'post', success:
function(result){
var data = JSON.parse(result);
console.log(data);
$("#div1").html(data);
}});
});
});
</script>
3) Ajax call on democode.php so in that file we will get data there(you can get data from database if you want) and we will return the data
==democode.php==
<?php
$test['data'] = array("Aleaxa"=>"I'm Beutiful","john"=>"I'm Evil","mishel"=>"baby, I'm Bad Boy!","mohini"=>"I'm MAstana");
if (array_key_exists( $_POST['val'], $test['data'])) {
$key = $_POST['val'];
echo json_encode($test['data'][$key]);
}
?>
So above example work like if i will search Aleaxa and click go button then it will give value of Aleaxa from array and output will be I'm Beutiful
Please checked my demo you will get idea how to do the code with your requirements

aJax update a specific row in sqlite and php using a button

I've got a table that lists values inputted by a user, with 2 buttons on the side to remove or to mark completed. On the page the table is visable, there are 3 tabs, we will call these Tab1, Tab2, and Tab3
Each tab has a table (As described above) with information about a specific type of entry.
These buttons are simple <a href> links, so when clicked they reload the page. This is a problem because the users view is refreshed and it takes the tabs back to the default tab, and is also an inconvenience when trying to mark several entries.
I would like to make these buttons send Ajax requests to another page to process the data. The only problem is, I am not really sure how to make the ajax call.
This is what I have right now
My buttons
echo "<td class='td-actions'>";
echo " <a href='?complete=".$row['uniqueID']."' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'> </i>
</a>
<a href='?remove=".$row['uniqueID']."' class='btn btn-danger btn-small'>
<i class='btn-fa fa-only fa fa-remove'> </i>
</a>";
echo "</td>";
There is one called Complete, and one called Remove.
When either of these are pressed, it currently reloads the page which triggers a few php if statements.
if(isSet($_GET['remove'])) {
$sql = "DELETE from rl_logged where uniqueID='".$_GET['remove']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";
}
if(isSet($_GET['complete'])) {
$sql = "UPDATE rl_logged set complete=1 where uniqueID='".$_GET['complete']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";
}
These are relatively simple functions. My problem is that I do not know javascript very well.
Any help would be much appreciated.
the javascript that I have come up with is this
$(document).ready(function() {
$('#markComplete').click(function() {
var input = input = $(this).text()
$.ajax({ // create an AJAX call...
data: {
onionID: input,
},
type: 'POST', // GET or POST from the form
url: 'pages/ajax/markCompleteRL.php', // the file to call from the form
success: function(response) { // on success..
refreshAllTabsWithFade();
}
});
});
});
using this button
<div name='markComplete' id='markComplete' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'></i>".$row['uniqueID']."
</div>
But, while inspecting with firebug, this seemed to work ONCE, but now the button doesn't do anything.
I tried again this morning, the button presses and the first time it sends this post, then the button doesn't do it again - even on page reload.
I was able to get it to work with the following:
javascript:
$('.markComplete').submit( function( event ) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // serialize the form
type: "POST", // GET or POST from the form
url: "pages/ajax/repairlogMarks.php", // the file to call from the form
success: function(response) { // on success..
refreshAllTabs();
}
});
return false;
});
button:
<form class="markComplete">
<input type="text" style="display:none;" class="form-control" name="uniqueid" value='<?=$row['uniqueID'];?>'>
<input type="text" style="display:none;" class="form-control" name="markcomp" value='1'>
<button type="submit" class="btn btn-success">
<i class="btn-fa fa-only fa fa-check"></i>
</button>
</form>
Basically, I made the button into a form which I knew how to create an ajax request for.
--
Update to make it work for multiple buttons that do the same function for different unique ID's.
Well for since you're sending the ajax call using "POST", it seems to me that if(isSet($_GET['complete'])) would evaluate to false. Also if your button is generated dynamically using php then change your click handler to the following:
$('document').on('click', '#markComplete', function (){
// Your code here
})
If you have more than one "Mark Complete" button; you need to use classes rather than ID to bind the event.
<button id="test">
Test 1
</button>
<button id="test">
Test 2
</button>
<script>
$('#test').click(function (e) {
console.log('test', e.target);
});
</script>
In this example, only the first button works. jQuery will only return the first element when you specify an ID.
If you use classes to bind the event; both buttons will work:
<button class="test">
Test 1
</button>
<button class="test">
Test 2
</button>
<script>
$('.test').click(function (e) {
console.log('test', e.target);
});
</script>
i think you have an error in your javascript at this line...
var input = input = $(this).text()
try to replace by this..
var input = $(this).text();

symfony 2.3 passing path id to checkbox form in modal

I have a problem that has been bugging me for days now, and I know it might be trivial for some but please bear with me. In my twig I have an href that reveals a modal with a checkbox, the href also contains a path to an action in my controller
Twig
Action in Controller
/**
*
* #Route("/{id}/delete", name="delete_image")
*/
public function deleteAction(Request $request, CategoryImage $CategoryImage, $id)
{
$em = $this->getDoctrine()->getManager();
$CategoryImage = $em->getRepository('AcmeBundle:entity')->find($CategoryImage->getId());
$em->remove($repo);
$em->flush();
return $this->redirect($this->generateUrl('page_main', array("id"=>$id)));
}
Modal
<div id="deleteModal" class="reveal-modal large">
<h6>Delete Image</h6>
<br/>
{{form_start(DeleteImageForm, {'attr': {'id': 'DeleteImageForm'}})}}
Delete Image
{{form_widget(DeleteImageForm.remove)}}
{{form_errors(DeleteImageForm.remove)}}<br/><br/>
admin password <br/>
<input type="password" id="DeletePass"/>
<br/>
<button id = "Delete">Submit</button>
{{form_end(DeleteImageForm)}}
<a class="close-reveal-modal">×</a>
</div>
Jquery
$('#Delete').on('click', function(e){
var data = $(this).serialize();
if ($('#DeletePass').val() == 'password'){
$( "#DeleteImageForm" ).submit();
}else{
alert('invalid password');
e.preventDefault();
}
});
Is there any way to pass the id / value of the path to the modal so when checkbox is checked and is submitted it goes to the action?
Any help would be much appreciated.
Generate your delete form in twig, by passing a placeholder for the dynamic parameter i.e id. You can do it in controller where you generate the deleteForm.
The idea is to have a unique identifier in action so that we can replace via jQuery.
return $this->createFormBuilder()
->setAction($this->generateUrl('image_delete', array('id' => 'image_id')))
->setMethod('DELETE')
->getForm()
;
Now, when your modal gets open, Through jQuery, replace the placeholder i.e image_id to your required value, , as below :
var currentUrl = jQuery("form#DeleteImageForm").attr('action');
// suppose 154 is your new image id.
var newHref = currentUrl.replace('image_id', '154');
// change url of the form action.
jQuery("form#DeleteImageForm").attr('href', newHref);
Hope this helps.
Note : The code is not tested!

How to display multiple rows of variables through an html tag

I have 3 pages, an html, javascript and php file. When one button is pressed in the html page, the php page searches a database for rows with the button's name as key and brings back a number of rows. I want to display all those rows in the html page but when I send back the data, it doesn't get displayed. here is my code from the three pages.
Html page
<button name = 'science'> Science</button>
<button name = 'engineering'> Engineering</button>
<button name = 'math'> Math</button>
<button name = 'law'> Law</button>
<button name = 'arts'> Arts</button>
<button name = 'business'> Business</button>
<button name = 'fiction'> Fiction</button>
<button name = 'selfhelp'> Self Help</button>
<button name = 'labequipment'> Lab Equipment</button>
<p id = 'feedback'></p>
<script type ="text/javascript" src ="jquery.js"></script>
<script type ="text/javascript" src ="catselect.js"></script>
javascript page
$(":button").click(function(){
var cat = $(this).attr("name");
$.get("trier.php",{input: cat}, function(data){
$("#feedback").html(data);
});
});
php page
if(isset($_GET['input'])){
$catt = $_GET['input'];
$info = "SELECT * FROM books WHERE (Category = '$catt')";
while(mysqli_query($conn,$info)){
$information = mysqli_query($conn,$info);
$intel = mysqli_fetch_assoc($information);
echo $intel['Title'];
echo nl2br("\n");
echo $intel['Course'];
}
}
I want to display many rows including a 'title' column and a 'course' columnn in the tag in the php page with the id = "display". Any ideas as to how I can modify my code to do that?
$(":button") should be $("button")
u can use php echo html of table but i suggest use json or use angularjs
id should not change frequently, id = "display" better use class="display" instead
You can do the simple way like how #Yanjun Lin suggested using html table
on your php:
if(isset($_GET['input'])){
$catt = $_GET['input'];
$info = "SELECT * FROM books WHERE (Category = '$catt')";
$html='';
while(mysqli_query($conn,$info)){
$information = mysqli_query($conn,$info);
$intel = mysqli_fetch_assoc($information);
$html=$html.'<tr>';
//echo $intel['Title'];
//echo nl2br("\n");
//echo $intel['Course'];
$html=$html.'<td>'.$intel['Title'].'</td>';
$html=$html.'<td>'.$intel['Course'].'</td>';
$html=$html.'</tr>';
}
echo $html;
on your javascript:
$("button").click(function(){
var cat = $(this).attr("name");
$.get("trier.php",{input: cat}, function(data){
$("#feedback").html(data);
});
on your html (change <p> tag to <table> tag):
<button name = 'science'> Science</button>
<button name = 'engineering'> Engineering</button>
<button name = 'math'> Math</button>
<button name = 'law'> Law</button>
<button name = 'arts'> Arts</button>
<button name = 'business'> Business</button>
<button name = 'fiction'> Fiction</button>
<button name = 'selfhelp'> Self Help</button>
<button name = 'labequipment'> Lab Equipment</button>
<table id = 'feedback'></table>
<script type ="text/javascript" src ="jquery.js"></script>
<script type ="text/javascript" src ="catselect.js"></script>
I did not test on your php, but do hope it works... also JSFiddle it would look something like this in javascript and html only. Also do consider using use json for proper standard like how #Yanjun Lin suggest

How to replace content of <td> and <div> with new content in AJAX response?

For your understanding my issue I've put in here only the necessary code.
HTML Code :
<td style="text-align:center" id="brand_image_td_101">Some text goes here</td><!-- This is the td whose content need to be replaced with new content-->
<div id="brand_101"><!-- This is the div whose content need to be replaced with new content-->
<a href="#" id="promotion_status_101">
<button type="button" class="btn btn-default brmodalbtn" data-toggle="modal" data-target="#BrandImageModal" id="101">On</button>
</a>
</div>
The modal dialog is displayed on click of the button from above div, AJAX request goes to PHP page, from there error or success message comes, etc. etc.
Everything works fine till here. The issue I'm facing is in replacing the content of above <div id="brand_101">. I want to replace the content of above <div id="brand_101"> with following content :
<td style="text-align:center" id="brand_image_td_101"><img src="http://web_prj.com/pqr.php/uploads/a123.jpg" width="80" height="80"></td><!-- This is the new td content-->
<div id="brand_101"><!-- This is the new div content-->
<a href="#" id="promotion_status_101" onClick="change_promotion_status('http://web_prj.com/pqr.php', 'promotion_status', '101', '0'); return false;">
<button type="button" class="btn btn-default">Off</button>
</a>
</div>
This thing I want to achieve in jQuery functions's success response. But I'm not understanding how should I achieve this.
Following is the jQuery AJAX function that I 've written:
$('#form').submit(function(e) {
var form = $(this);
var br_id = $('#brand_id').val();//This variable contains value 101
var status = '0';
var module_url = $('#module_url').val();//This variable contains value http://web_prj.com/pqr.php
var upload_url = $('#upload_url').val();//This variable contains value http://web_prj.com/pqr.php/uploads/a123.jpg
var formdata = false;
if(window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
type : 'POST',
url : 'manufacturers.php',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
success: function(response) {
if(response.error == 0) {
$('#messages').addClass('alert alert-danger').text(response.error_message);
} else {
$('#BrandImageModal').modal('hide');
//location.reload();
}
},
dataType:"JSON"
});
e.preventDefault();
});
How should I replace the contents of and with new content created using the variables' values in AJAX function so that I could get the content as above?
Maybe I am misinterpreting, but you could try something like this:
//put the following into the the success function where you want to add new content
// create an string containing the html you want to insert
var newContent = '<button type="button" class="btn btn-default">Off</button> ';
// remove old content from the div. Now you just have an empty div
$('#branding-101').html('');
// add the new content to the div
$('#branding-101').html(newContent);
Or do you need to pull new values from the response? If that's the case, you would do the same thing, only you would build the string by concatenating values from the response text..

Categories

Resources