Span click find the second div - javascript

I asked a previous question in this post :Jquery Span click find next div
In order to get the the first div after my span selector.
I used
$(element.parentNode.nextElementSibling).toggle();
in order to show/hide the first div "list-type-demandes"
now i need to toggle the second div "preview-checked-demandes" and i tried :
$(element.parentNode.nextElementSibling.nextElementSibling).toggle();
don't work. any idea ?
here my php/html code :
foreach ($unassociated as $key => $value){
//echo '<br/>';
echo '<label style="color: #1c5081">
<span id="open-list" name="open-list" class="open-list" onclick="openList(this)"><b>+</b></span>
<span id="close-list" name="close-list" class="close-list" onclick="closeList(this)" style="display: none"><b>-</b></span>
'.$key.'</label>';
echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';
foreach ($value as $key1 => $value1) {
$appel_projet_type_demande = null;
if($appel_projet->getIdAp()){
$appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
}
if ($appel_projet_type_demande) {
$checked = 'checked';
} else {
$checked = '';
}
//var_dump($key1 , $this->candidature->getIdAp() , $checked);
echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
}
echo '</div>';
//checked items preview
echo '<div class="preview-checked-demandes" style="padding-left: 10px ; display: block">';
foreach ($value as $key1 => $value1) {
$appel_projet_type_demande = null;
if($appel_projet->getIdAp()){
$appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
}
if ($appel_projet_type_demande) {
$checked = 'checked';
} else {
$checked = '';
}
if($checked){
echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
}
}
echo '</div>';
}?>
here my javascript :
function openList(element) {
$(element.parentNode.nextElementSibling).toggle();
$(element.nextElementSibling).toggle();
$(element).toggle();
}
function closeList(element) {
$(element.parentNode.nextElementSibling).toggle();
$(element.previousElementSibling).toggle();
$(element).toggle();
}

Solution - 1
DEMO
<script>
$( function() {
$('.action_list').click(function(){
// Hide and show the action_list list item
$(this).parent().find('.action_list').show();
$(this).hide();
//you can also use nextAll(). nextAll() returns all the next elements, eq(1) returns the second one amongst them.
$(this).parent().nextAll().eq(1).toggle();
});
} );
</script>
Solution -2
DEMO
You can also try the below solution. I added the details within the code.
<script>
$( function() {
$('.action_list').on('click', function(){
// Hide and show the action_list list item
$(this).parent().find('.action_list').show();
$(this).hide();
//On click of open-list and close-list class, getting the target to be toggled from data attribute
var target = $(this).data('target');
$('.'+target).toggle();
});
});
</script>
<?php
$i=1;
foreach ($unassociated as $key => $value){
//echo '<br/>';
/******************* Added details ************************************
1- Add class of div which you have need to toggle with data attribute
2- Add 'action_list' class in open-list and close-list item
**************** End details ******************************************/
echo '<label style="color: #1c5081">
<span id="open-list" name="open-list" data-target="target_'.$i.'" class="action_list open-list"><b>+</b></span>
<span id="close-list" name="close-list" data-target="target_'.$i.'" class="action_list close-list" style="display: none"><b>-</b></span>
'.$key.'</label>';
echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';
foreach ($value as $key1 => $value1) {
$appel_projet_type_demande = null;
if($appel_projet->getIdAp()){
$appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
}
if ($appel_projet_type_demande) {
$checked = 'checked';
} else {
$checked = '';
}
//var_dump($key1 , $this->candidature->getIdAp() , $checked);
echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
}
echo '</div>';
/******************* Added details *****************
Added - Add class target (target_'.$i.') to toggle on click of open-list and close-list
/******************* End details ************ */
echo '<div class="preview-checked-demandes target_'.$i.'" style="padding-left: 10px ; display: block">';
foreach ($value as $key1 => $value1) {
$appel_projet_type_demande = null;
if($appel_projet->getIdAp()){
$appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
}
if ($appel_projet_type_demande) {
$checked = 'checked';
} else {
$checked = '';
}
if($checked){
echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
}
}
echo '</div><div style="clear:both"></div>';
$i++;
}?>

Related

Why after AJAX post, the URL redirect to a URL with the POST params like GET params in this case?

In the addonmodule Controller.php:
I append this order_detail function:
/**
* #param $vars
*/
public function order_detail($vars){
$modulelink = $vars['modulelink']; // eg. addonmodules.php?module=addonmodule
$version = $vars['version']; // eg. 1.0
$LANG = $vars['_lang']; // an array of the currently loaded language variables
$orderid = 28;//isset($_REQUEST['orderid']) ? $_REQUEST['orderid'] : '';
$sql = "SELECT tblhosting.id, tblhosting.regdate, tblhosting.domain, tblhosting.billingcycle, tblhosting.nextduedate, tblhosting.nextinvoicedate, tblhosting.termination_date, tblhosting.domainstatus, tblhosting.username, tblhosting.notes, tblhosting.dedicatedip, tblhosting.assignedips FROM tblhosting ";
// $sql .= "LEFT JOIN tblorders ON ";
// $sql .= "tblhosting.orderid = tblorders.id ";
$sql .= ("WHERE tblhosting.orderid = " . $orderid);
$tblhostings = Capsule::select($sql);
$table_tbody = "";
for($i = 0; $i < count($tblhostings); $i ++) {
$item = $tblhostings[$i];
$row = "<tr>";
$row .= ("<td><input type='text' id='tblhosting-id' name='id' class='form-control' readonly=\"readonly\" style='width:80px;' value='" . $item->id . "'></td>");
$row .= ("<td><textarea id='tblhosting-domain' name='domain' class='form-control' style='width:320px;'>" . $item->domain . "</textarea></td>");
//$row .= ("<td>" . $item->billingcycle . "</td>");
$row .= ("<td ><div style='width:80px;'>" . $item->nextduedate . "</div></td>");
$row .= ("<td ><div style='width:80px;'>" . $item->nextinvoicedate . "</div></td>");
//$row .= ("<td>" . $item->termination_date . "</td>");
//$row .= ("<td>" . $item->username . "</td>");
$row .= ("<td><textarea id='tblhosting-dedicatedip' name='dedicatedip' class='form-control' style='width:200px;'>" . $item->dedicatedip . "</textarea></td>");
$row .= ("<td><textarea id='tblhosting-assignedips' name='assignedips' class='form-control' style='width:200px;'>" . $item->assignedips . "</textarea></td>");
$row .= ("<td>" . $item->domainstatus . "</td>");
$row .= ("<td><div style='width:80px;'>" . $item->regdate . "</div></td>");
$row .= ("<td><textarea id='tblhosting-notes' type='textarea' name='notes' class='form-control' style='width:200px;'>" . $item->notes . "</textarea></td>");
$row .= ("<td> <button id='modify' type='submit' class='btn btn-warning'>modify</button> <button id='send-email' type='button' class='btn btn-success'>Send email</button> </td>");
$row .= "</tr>";
$table_tbody .= $row;
}
$div = "<div class='container'><div><h2>order ID: {$orderid} :</h2></div>";
$div .= "<div >";
$div .= "<form '><table class='table'>";
$div .= "<thead><tr>";
$div .= "<th>product ID</th>";
$div .= "<th>product name</th>";
//$div .= "<th>billingtype</th>";
$div .= "<th>nextdue</th>";
$div .= "<th>nextvoice</th>";
//$div .= "<th>terminate time</th>";
//$div .= "<th>username</th>";
$div .= "<th>dedicated IP</th>";
$div .= "<th>assigned IP</th>";
$div .= "<th>status</th>";
$div .= "<th>regdate</th>";
$div .= "<th>note</th>";
$div .= "<th>ope</th>";
$div .= "</tr></thead>";
$div .= "<tbody>";
$div .= $table_tbody;
$div .= "</tbody>";
$div .= "</table>";
$div .= "</div></div>";
$js = "<script>";
$js .= "
var origin_url = window.location.href;//\"http://192.168.33.10/whmcs-nlidc.com/whmcs/admin/addonmodules.php?module=addonmodule&action=order_detail&orderid=100\";
var url_array =origin_url.split(\"/admin/\")
var url = url_array[0] + \"/admin/api/admin_apis.php\";
jQuery(document).ready(function(){
$('#modify').click(function(){
//alert('modify');
var id = $('#tblhosting-id').val();
var domain = $('#tblhosting-domain').val();
var dedicatedip = $('#tblhosting-dedicatedip').val();
var assignedips = $('#tblhosting-assignedips').val();
var notes = $('#tblhosting-notes').val();
var params = {
admin_api:'update_tblhosting_support',
id: id,
domain: domain,
dedicatedip: dedicatedip,
assignedips: assignedips,
notes: notes,
}
$.post(url, params,function(data,status){
//alert(\"Data: \" + data + \"nStatus: \" + status);
var data_obj = JSON.parse(data);
if (status == 'url' && data_obj.status == 200) {
alert('update success');
alert(window.location.href(www.baidu.com);)
}else {
//alert('update fail');
}
});
})
});
jQuery(document).ready(function(){
$('#send-email').click(function(){
alert('send email');
})
});
";
$js .= "</script>";
$html = $div . $js;
return <<<EOF
$html
EOF;
}
}
I want to use this way to update the tblhosting entries. You see my jQuery code want to use post method to update the tblhosting entry.
when I click update button, it will execute the update url, but however it will redirect to this URL
http://192.168.33.10/whmcs/admin/addonmodules.php?id=28&domain=10.93.240.193-194(15M%29+HK-Z7-A15++E5-2650%282CPU%29%2F32G%2F500G+ssd%2F++&dedicatedip=10.93.240.193-194&assignedips=10.93.240.193%0D%0A10.93.240.194&notes=02442%2F66655%0D%0A10&intellisearch=1&token=ac271aed87528e68969608329e8a1f4d2a35c858&value=
As we know the ajax will not refresh a whole page, and will not redirect by default after request, why there goes different?
Who know the way to avoid the redirect?
I also tried use
window.location.href(origin_url);
to redirect to back after the wrong redirect, but it will not execute.

Sum of Column in HTML and PHP

I am needing to get the total of a row from a MySQL data base that is listed in an HTML table.
I have tried using separate sql select statements with the as statement for the new row (i.e. SELECT SUM(product_price) AS order_total FROM orderplace WHERE orderplace_number = '$item') as well as using it in the original select statement.
Here is my original code without the total added up. I would like the total in a different row spanning across all columns. Thanks in advance!
<table width="100%">
<tr>
<th>Product ID</th>
<th>Item Name</th>
<th>Description</th>
<th>Price</th>
<th>Actions</th>
</tr>
<?php
$cart = $_COOKIE['crochetdamour'];
if ($cart) {
$i = 1;
include('includes/dbc.php');
$items = explode(',', $cart);
foreach ($items AS $item) {
$sql = "SELECT * FROM orderplace WHERE orderplace_number = '$item'";
$result = mysqli_query($con, $sql);
if ($result == false) {
$mysql_error = mysqli_error($con);
echo "There was a query error: $mysql_error";
} else {
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr><td align="left" id="prodid" name="prodid">' . $row['product_id'] . '</td>';
echo '<td align="left" id="prodname" name="prodname">' . $row['product_name'] . '</td>';
echo '<td align="left" class="desctd" id="proddesc" name="proddesc">' . $row['product_size'] . ', ' . $row['product_gender'] . ', ' . $row['product_theme'] . ', ' . $row['product_specs'] . '</td>';
echo '<td align="left" id="prodprice" name="prodprice">' . $row['product_price'] . '</td>';
echo '<td align="left">Remove From Cart</td></tr>';
} //end while
$i++;
} //end else
} //end foreach
} //end if
?>
</table>
You have to this:
foreach ($items AS $item) {
$sum = 0; //<-------------
$sql = "SELECT * FROM orderplace WHERE orderplace_number = '$item'";
$result = mysqli_query($con, $sql);
if ($result == false) {
$mysql_error = mysqli_error($con);
echo "There was a query error: $mysql_error";
} else {
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr><td align="left" id="prodid" name="prodid">' . $row['product_id'] . '</td>';
echo '<td align="left" id="prodname" name="prodname">' . $row['product_name'] . '</td>';
echo '<td align="left" class="desctd" id="proddesc" name="proddesc">' . $row['product_size'] . ', ' . $row['product_gender'] . ', ' . $row['product_theme'] . ', ' . $row['product_specs'] . '</td>';
echo '<td align="left" id="prodprice" name="prodprice">' . $row['product_price'] . '</td>';
echo '<td align="left">Remove From Cart</td></tr>';
$sum += $row['product_price']; //<--------------
} //end while
$i++;
} //end else
echo $sum; //<----------------
} //end foreach
Hope it will helps

Lazy Load and ajax calls issue

I want to separate a list of 30 articles, into chunks of 5.
For this purpose, I wrote the following code:
private static function makeChunk($array = array(), $howMany = 5) {
$shortChunked = array_chunk($array, $howMany);
$count = count($shortChunked);
$html = '';
$i = 0;
foreach ($shortChunked as $key => $chunk) :
$class = '';
if ($key == 0)
$class = ' first active';
if ($key == ($count - 1) && $count>1)
$class = ' last';
$html .= '<div class="my-chunk chunk'.$class.'">';
foreach($chunk as $article) {
if ($i == 0) {
$img = '<img class="img-responsive" src="' . $article['image'] . '" alt="' . $article['imageAlt'] . '" />';
} else {
$img = '<img class="img-tab-ll img-responsive" src="' . get_template_directory_uri() . '/img/imageLoading.gif" data-src="' . $article['image'] . '" alt="' . $article['imageAlt'] . '" />';
}
}
$html .= '</div>';
$i++;
endforeach;
return $html;
}
This is working just fine, but Im considering also lazy loading the first chunk.
I noticed that if I also lazy load the first chunk, images are not showing up, unless I press the button to load the next series (next chunk), so it seems to me that Im missing something related to ajax/lazyload.
Any advises?

i want to use multiple select2 onchange function in a dynamic way

I want to put select2 function in my code but don't know where to put that .select2() function
i have this .append($(<?php echo json_encode($property_address1); ?>))
my model `
function property_address1()
{
$query = $this->db->query('SELECT host,price,city,property_thumbnail, apartments_type, contactnumber, contactperson,photographlinks,emailid, propertyaddress FROM tbl_contacts')->result();
$output = '<select id="neww" class="property_add_ form-control">';
foreach ($query as $row)
{
//echo $row->location;
$output .= "<option value='". $row->propertyaddress ."'";
$output .= " data-propertyaddress='" . $row->propertyaddress ."'" ;
$output .= " data-host_name='" . $row->host ."'" ;
$output .= " data-apartments_type ='" . $row->apartments_type."'" ;
$output .= " data-city ='" . $row->city."'" ;
$output .= " data-property_thumbnail='" . $row->property_thumbnail."'" ;
$output .= " data-price='" . $row->price."'" ;
$output .= " data-contactperson='" . $row->contactperson ."'" ;
// $output. = $row->pincode.", ".$row->city.", ".$row->location;
$output .= " data-photographlinks='" . $row->photographlinks ."'" ;
$output .= " data-emailid='" . $row->emailid ."'" ;
$output .= " data-contactnumber='". $row->contactnumber . "'>" ;
$output .= $row->host . ' , '.$row->propertyaddress . ' ,'.$row->price. ' ,'.$row->apartments_type. ' , '. $row->contactperson . ' , ' . $row->contactnumber. "</option>";
}
$output .= '</select>';
//var_dump($output);
return $output;
}`
my controller
public function test($id = null)
{
$this->layout->set(
array(
'property_address1' => $this->mdl_quotes->property_address1()
)
);
$this->load->model('mdl_quotes');
$this->layout->buffer('content', 'quotes/test');
$this->layout->render();
}
Dhaval Panchal check this updated screenshot
This is screenshot for better understanding.. please have a look Thanks
Insert CSS & JS file in your page then after JS file insert this code in your page.
<script type="text/javascript">
$(document).ready(function() {
$('#neww').select2();
});
</script>
To update options, see below code.
var option = new Option("text", "id");
$("#neww").append(option);
$("#neww").trigger("change");

AngularJs Select Generated Through PHP

I have created a simple PHP function for my AngularJS application. I want to select default option and it should be visible. Unfortunately, It's not selecting my desired value.
My Function is as follows:
function qtyList($selectName, $selectQty){
$str = '<select ng-model="qty" ng-change="updateCart('.$selectName.',qty)">';
for($i=1; $i<=100; $i++){
if($selectQty == $i)
$str .= '<option ng-selected="selected">'.$i.'</option>';
else
$str .= '<option>'.$i.'</option>';
}
$str .= '</select>';
return $str;
}
Please help with any suggestion.
Make sure the angular model (qty) also has the correct value.
<?php
function qtyList($selectName, $selectQty)
{
$str = '<select ng-init="qty =\'' . $selectQty . '\'" ng-model="qty">';
for ($i = 1; $i <= 100; $i++) {
$str .= '<option value="' . $i . '">' . $i . '</option>';
}
$str .= '</select>';
return $str;
}
echo qtyList('testName', "5");

Categories