We Keep Coding

I'm not able to get data-id (dynamic HTML. in the last left position) in ajax using codeigniter

This is view code.
The first time works properly. In dynamic HTML, not able to get data-id '(onclick event)' in js.
I would like to when I'll add any user tree work infinitely.
when we click any user via ajax get the child from ajax this is the concept basically.
but I'm unable to get data-id in the next level via ajax.
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://image.flaticon.com/icons/svg/145/145867.svg" title="<?php echo $tree[0]->fname . " " . $tree[0]->lname ?>" alt="Member">
<div class="member-details">
<small><?php echo $tree[0]->partner_id; ?></small>
</div>
</div>
</div>
</a>
<ul class="active">
<li>
<a href="javascript:void(0);" data-id="<?php echo $tree[1]->branch_left; ?>">
<div class="member-view-box">
<div class="member-image">
<img src="https://image.flaticon.com/icons/svg/145/145867.svg" title="<?php echo $tree[1]->fname . " " . $tree[1]->lname ?>" alt="Member">
<div class="member-details">
<small><?php echo $tree[1]->partner_id; ?></small>
</div>
</div>
</div>
</a>
<ul id="<?php echo $tree[1]->branch_left; ?>"></ul>
</li>
<li>
<a href="javascript:void(0);" data-id="<?php echo $tree[1]->branch_right; ?>">
<div class="member-view-box">
<div class="member-image">
<img src="https://image.flaticon.com/icons/svg/145/145867.svg" title="<?php echo $tree[2]->fname . " " . $tree[2]->lname ?>" alt="Member">
<div class="member-details">
<small><?php echo $tree[2]->partner_id; ?></small>
</div>
</div>
</div>
</a>
<ul id="<?php echo $tree[1]->branch_right; ?>"></ul>
</li>
</ul>
</li>
</ul>
--------------------------
This is controller
public function get_tree_by_ajax()
{
$this->Dashboard_m->get_tree_by_ajax($_POST);
}
----------------------------
This is model code.
public function get_tree_by_ajax()
{
$pid = $this->input->post('pid');
if (!empty($pid)) {
$data = $this->db
->get_where('tree', ['v_id' => $pid])
->row();
$arr = array(
'0' => $data->branch_left,
'1' => $data->branch_right,
);
if (!empty($arr && $data)) {
foreach ($arr as $val) {
$tree = $this->db
->select('t1.*,t2.*')
->from('vendor t1')
->join('tree t2', 't2.v_id=t1.vid', 'LEFT')
->where(['t1.vid' => $val])
->order_by('vid', 'ASC')
->limit(3)
->get()
->result();
$arr1[] = $tree;
}
// print_r($arr1);
// exit;
$x = $arr1[0];
$y = $arr1[1];
if (!empty($data->branch_left) && !empty($data->branch_right)) {
echo "
<ul class='active'>
<li>
<a href='javascript:void(0);' data-id='" . $x[0]->v_id . "'>
<div class='member-view-box'>
<div class='member-image'>
<img src='https://image.flaticon.com/icons/svg/145/145867.svg' title='" . $x[0]->fname . $x[0]->lname . "' alt='Member'>
<div class='member-details'>
<small>" . $x[0]->partner_id . "</small>
</div>
</div>
</div>
</a>
<ul id='" . $x[0]->v_id . "'></ul>
</li>
<li>
<a href='javascript:void(0);' data-id='" . $y[0]->v_id . "'>
<div class='member-view-box'>
<div class='member-image'>
<img src='https://image.flaticon.com/icons/svg/145/145867.svg' title='" . $y[0]->fname . $y[0]->lname . "' alt='Member'>
<div class='member-details'>
<small>" . $y[0]->partner_id . "</small>
</div>
</div>
</div>
</a>
<ul id='" . $y[0]->v_id . "'></ul>
</li>
</ul>
";
} elseif (!empty($data->branch_left)) {
echo "
<ul class='active'>
<li>
<a href='javascript:void(0);' data-id='" . $x[0]->v_id . "'>
<div class='member-view-box'>
<div class='member-image'>
<img src='https://image.flaticon.com/icons/svg/145/145867.svg' title='" . $x[0]->fname . $x[0]->lname . "' alt='Member'>
<div class='member-details'>
<small>" . $x[0]->partner_id . "</small>
</div>
</div>
</div>
</a>
<ul id='" . $x[0]->v_id . "'></ul>
</li>
</ul>
";
} elseif (!empty($data->branch_right)) {
echo "
<ul class='active'>
<li>
<a href='javascript:void(0);' data-id='" . $y[0]->v_id . "'>
<div class='member-view-box'>
<div class='member-image'>
<img src='https://image.flaticon.com/icons/svg/145/145867.svg' title='" . $y[0]->fname . $y[0]->lname . "' alt='Member'>
<div class='member-details'>
<small>" . $y[0]->partner_id . "</small>
</div>
</div>
</div>
</a>
<ul id='" . $y[0]->v_id . "'></ul>
</li>
</ul>
";
} else {
echo 'not';
}
}
}
}
--------------------------
this is ajax
<script>
$("a").click(function() {
var pid = $(this).data("id");
alert(pid);
$.ajax({
url: "<?php echo base_url(); ?>get-tree-data",
method: "POST",
data: {
pid: pid
},
success: function(result) {
if (result == 'not') {
alert('No partner here !!');
} else {
$("#" + pid).html(result);
}
console.log("Response======>" + result);
// alert(result);
}
});
});
</script>

Download .js file with php

I got following files:
index.php:
<html>
<head>
<title>Admin Panel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2 align="center">Admin Panel</a></h2>
<br />
<div align="right">
<button type="button" name="create_folder" id="create_folder" class="btn btn-success">Get current file</button>
</div>
<br />
<div class="table-responsive" id="folder_table">
</div>
</div>
</body>
</html>
<div id="uploadModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload File</h4>
</div>
<div class="modal-body">
<form method="post" id="upload_form" enctype='multipart/form-data' action="upfile.php">
<p>Select Js File
<input type="file" name="upload_file" accept=".js"/></p>
<br />
<input type="hidden" name="hidden_folder_name" id="hidden_folder_name" />
<input type="submit" name="upload_button" class="btn btn-info" value="Upload" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="filelistModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">File List</h4>
</div>
<div class="modal-body" id="file_list">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
load_folder_list();
function load_folder_list() {
var action = "fetch";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: action
},
success: function(data) {
$('#folder_table').html(data);
}
});
}
$(document).on('click', '.upload', function() {
var folder_name = $(this).data("name");
$('#hidden_folder_name').val(folder_name);
$('#uploadModal').modal('show');
});
$('#upload_form').on('submit', function() {
$.ajax({
url: "upfile.php",
method: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
});
});
$(document).on('click', '.view_files', function() {
var folder_name = $(this).data("name");
var action = "fetch_files";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: action,
folder_name: folder_name
},
success: function(data) {
$('#file_list').html(data);
$('#filelistModal').modal('show');
}
});
});
$(document).on('click', '.remove_file', function() {
var path = $(this).attr("id");
var action = "remove_file";
$.ajax({
url: "action.php",
method: "POST",
data: {
path: path,
action: action
},
success: function(data) {
$('#filelistModal').modal('hide');
load_folder_list();
}
});
});
});
</script>
action.php:
<?php
function format_folder_size($size)
{
if ($size >= 1073741824) {
$size = number_format($size / 1073741824, 2) . ' GB';
} elseif ($size >= 1048576) {
$size = number_format($size / 1048576, 2) . ' MB';
} elseif ($size >= 1024) {
$size = number_format($size / 1024, 2) . ' KB';
} elseif ($size > 1) {
$size = $size . ' bytes';
} elseif ($size == 1) {
$size = $size . ' byte';
} else {
$size = '0 bytes';
}
return $size;
}
function get_folder_size($folder_name)
{
$total_size = 0;
$file_data = scandir($folder_name);
foreach ($file_data as $file) {
if ($file === '.' or $file === '..') {
continue;
} else {
$path = $folder_name . '/' . $file;
$total_size = $total_size + filesize($path);
}
}
return format_folder_size($total_size);
}
if (isset($_POST["action"])) {
if ($_POST["action"] == "fetch") {
$folder = array_filter(glob('*'), 'is_dir');
$output = '
<table class="table table-bordered table-striped">
<tr>
<th>Folder Name</th>
<th>Total File</th>
<th>Size</th>
<th>Upload File</th>
<th>View Uploaded File</th>
</tr>
';
if (count($folder) > 0) {
foreach ($folder as $name) {
$output .= '
<tr>
<td>' . $name . '</td>
<td>' . (count(scandir($name)) - 2) . '</td>
<td>' . get_folder_size($name) . '</td>
<td><button type="button" name="upload" data-name="' . $name . '" class="upload btn btn-info btn-xs">Upload File</button></td>
<td><button type="button" name="view_files" data-name="' . $name . '" class="view_files btn btn-default btn-xs">View Files</button></td>
</tr>';
}
} else {
$output .= '
<tr>
<td colspan="6">No Folder Found</td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
if ($_POST["action"] == "fetch_files") {
$file_data = scandir($_POST["folder_name"]);
$output = '
<table class="table table-bordered table-striped">
<tr>
<th>File Name</th>
<th>Download</th>
</tr>
';
foreach ($file_data as $file) {
if ($file === '.' or $file === '..') {
continue;
} else {
$script = 'download.php';
$downloadlink = $script . '/' . $_POST["folder_name"] . '/' . $file;
$path = $_POST["folder_name"] . '/' . $file;
$output .= '
<tr>
<td contenteditable="false" data-folder_name="' . $_POST["folder_name"] . '" data-file_name = "' . $file . '" class="change_file_name">' . $file . '</td>
<td><button name="remove_file" class="remove_file btn btn-danger btn-xs" id="' . $path . '">Get it</button></td>
</tr>
';
}
}
$output .= '</table>';
echo $output;
}
function test()
{
if ($_POST["action"] == "remove_file") {
if (file_exists($_POST["path"])) {
readfile($_POST["path"]);
}
}
}
}
download.php
<?php
//file path in server
$path = $_POST["folder_name"] . '/' . $file;
// check if file exist in server
if (file_exists($path)) {
header("Cache-Control: public");
header('Content-Description: File Transfer');
header('Content-Type: application/x-javascript');
header('Content-Disposition: attachment; filename="' . basename($path) . '"');
header('Content-Length: ' . filesize($path));
// Clear output buffer
flush();
readfile($path);
exit();
} else {
echo "File not found.";
}
?>
The Problem now is that when I download the javascript files from my server then it downloads the file but without any content in it. On the server the files have content in it, so it must be a problem while downloading it from the website. I think the problem is at the download.php but in my opinion the syntax are correct. It could be also a problem at the remove_file fucntion in the index.php and action.php. See $(document).on('click', '.remove_file', function() in index.php

I'd say you need html for this. I don't know if you can use PHP for this. If you really need to use PHP:
<?php
echo "<a href='file.js' download>Click Here to Download</a>";
?>
Essentially, what this does is create a link, in which the user clicks to download the file.

Pass html element value to laravel Blade IF

i need help how to pass &{currentQuestion.id_soal} to laravel if, example:
#if($s->id == &{currentQuestion.id_soal} )
this is the script:
output.push(
`<div class="slide">
#foreach ($soal as $key => $s)
#php
$ids = ${currentQuestion.id_soal}
#if($s->id == $ids )
<p>{!!$s->soal!!}</p>
#endif
#endphp
#endforeach
<img src="{{ asset('/soal_gambar${currentQuestion.gambar}')}}" style="max-width: 100%;" onerror="this.style.display='none'"/>
<div class="answers"> ${answers.join("")} </div>
</div>`
);

Use this {!! $data !!}, it displays content without escaping HTML special characters.
Source : https://laravel.com/docs/5.8/blade#displaying-data

How do I select the value of a clicked checkbox?

I have four checkboxes. Based on the checkbox that is checked (or unchecked) I need to addClass (or removeClass) a css class to any certain divs with class of filter-result AND containing a child div with a class that matches the value of the checkbox checked. (This is to show/hide search results, so checking/unchecking the boxes will show/hide various search results that have corresponding classes.)
I can write four jquery functions using ids that are almost identical except for the ids, or I can write one jquery function using variables. I'd prefer to write only one, for obvious reasons. I'm new to jQuery, JavaScript, PHP, etc., so I expect my error is super elementary here.
This is the HTML/PHP:
<!-- HTML for the checkboxes -->
<label>
<input type="checkbox" class="filterBox" value="devotion" id="toggleDevotion" checked/> Devotions
</label>
<label>
<input type="checkbox" class="filterBox" value="blog" id="toggleBlog" checked/> Blog Posts
</label>
<label>
<input type="checkbox" class="filterBox" value="product" id="toggleProduct" checked/> Products
</label>
<label>
<input type="checkbox" class="filterBox" value="program" id="toggleProgram" checked/> Programs
</label>
<!-- HTML/PHP for the wordpress search results -->
<div class="rowSectionInner results-container">
<?php if (have_posts() && strlen(trim(get_search_query())) != 0 ) { ?>
<?php while (have_posts()) { the_post(); ?>
<?php // Render a separation line. ?>
<?php if ($hasLoopedOnce) { ?>
<?php } $hasLoopedOnce = true; ?>
<?php // Render the search result. ?>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
<?php echo get_the_date(); ?> <?php echo rename_post_types(get_post_type()); ?>
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
This is the jQuery I have written that works, but is super clunky:
$('#toggleDevotion').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Devotion")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Devotion")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
$("#wrapper").css({"display": "flex", "flex-direction": "column"});
$("#container").css("flex-grow", "1");
} else {
$(".no-results").css("display", "none");
}
});
$('#toggleBlog').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Blog")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Blog")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
} else {
$(".no-results").css("display", "none");
}
});
$('#toggleProduct').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Product")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Product")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
} else {
$(".no-results").css("display", "none");
}
});
$('#toggleProgram').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Program")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Program")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
} else {
$(".no-results").css("display", "none");
}
});
This is the jQuery I have written to try to combine the main show/hide toggle into one function:
$(".filterBox").click(function() {
var $lemon = $(this).val();
if( $(this).is(':checked')) {
$(".siteSearch_date:contains($lemon)").closest('.filter-result').removeClass('remove');
} else {
$(".siteSearch_date:contains($lemon)").closest('.filter-result').addClass('remove');
}
});
I expect it to apply or remove remove class from divs with class of .filter-result - but I get no response whatsoever from anything, including the console. What am I missing?

The correct syntax for the selector is:
$(".siteSearch_date:contains('"+$lemon+"')")
Edit---
The following snippet should simulate your code adding a bakground as example, is this what you wanted to achieve?
$(".filterBox").click(function() {
var $lemon = $(this).val();
if( $(this).is(':checked')) {
$(".siteSearch_date:contains('"+$lemon+"')").closest('.filter-result').removeClass('remove');
} else { $(".siteSearch_date:contains('"+$lemon+"')").closest('.filter-result').addClass('remove');
}
});
.remove{
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" class="filterBox" value="devotion" id="toggleDevotion" checked/> Devotions
</label>
<label>
<input type="checkbox" class="filterBox" value="blog" id="toggleBlog" checked/> Blog Posts
</label>
<label>
<input type="checkbox" class="filterBox" value="product" id="toggleProduct" checked/> Products
</label>
<label>
<input type="checkbox" class="filterBox" value="program" id="toggleProgram" checked/> Programs
</label>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
product
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
blog
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
product
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
program
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
devotion
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>

Bootstrap Model Window Not Showing by Calling Through JQuery

What I am trying to do is that pop up a bootstrap js model by using jquery call that is
$("#id").modal("show")
but it's not working in any case, there are several cases mentioned in this link but none is working in my case.
also I have gone through the following links
bootstrap model is not working
Bootstrap modal window not showing
calling to bootstrap model for a link
Bootstrap modal - popup window not showing
https://getbootstrap.com/docs/4.0/components/modal/
but I am not able to get any help, I can trigger the model by having an extra button and calling click() function of button by jquery, this works fine but not modal case.
My Modal code is here
<div class="modal fade" id="addLocationTagModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabelLocation">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="idButtonCloseLocation" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabelLocation">Enter Location</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="form-group">
<?php
$preferredLocation = "";
if (strtolower(getUserPreferredLocation($row_user, $conn)) !== "no") {
$preferredLocation = getUserPreferredLocation($row_user, $conn);
}
?>
<input type="text" class="form-control" value="<?php echo $preferredLocation; ?>" placeholder="Location" id ="locationSuggested" name="locationSuggested" />
<span>
<span id="suggesstionBoxLocation" ></span>
</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="pLace-order">
<button type="button" name="buttonLocation" onclick="getTagSelected();" class="btn btn-success" value="submit">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery call is here
<script>
function detachStore(url){
//alert(url);
//document.getElementById("buttonDeleteStore").click(); // Click on the checkbox
// For Testing Purpose to set the data-target
jQuery.noConflict();
$(document).ready(function () {
$("#addLocationTagModel").modal("toggle");
alert("Hello");
//$("#buttonDeleteStore").click();
// $('#addLocationTagModel').appendTo("body").modal('show');
});
}
And HTML and mixed PHP code is here below, I have onclick function on the element call that is working perfectly.
<td>
<?php
$i = 1;
foreach (unserialize($row['store_id']) as $store_id) {
$stores = $conn->query("select * from tb_stores where ID = " . $store_id);
while ($stores_row = $stores->fetch_assoc()) {
$store_price = $conn->query("select * from tb_add_price_of_products where product_id=" . $row["ID"] . " and store_id=" . $stores_row["ID"]);
$store_price_row = $store_price->fetch_assoc();
//echo $store_price_row["price"];
if ($i == 1) {
echo "<a href='#' data-toggle='modal' title='$"
. $store_price_row["price"] . "-" . $stores_row["location"] . "'"
. " onclick=\"detachStore('" . $url . "product-registry?action=delete-store&product_id=". $row["ID"] . "&store_id=" . $stores_row["ID"] . "');\" >"
. $stores_row['name'] . "</a>";
} else {
echo ", <a href='#' data-toggle='modal' title='$"
. $store_price_row["price"] . "-" . $stores_row["location"] . "'"
. " onclick=\"detachStore('" . $url . "product-registry?action=delete-store&product_id=". $row["ID"] . "&store_id=" . $stores_row["ID"] . "');\" >"
. $stores_row['name'] . "</a>";
}
$i++;
}
}
?>
<button type="button" id="buttonDeleteStore" data-toggle="modal" data-target="#add_price_modal">Button</button>
</td>
I have spent hours on it, even no JavaScript error, May be I am doing something wrong at some place, if anybody can pull it out that would be appreciated.

I was going through some other post
TypeError: $(...).modal is not a function with bootstrap Modal
and I replaced
$("#id").modal("show")
with
jQuery("#id").modal("show")
and this trick worked here and it started working. Still I don't know the reason like why it wasn't working with $.
One more thing, we need to include the jQuery.noConflict(); above then the statement to avoid repetitions.