We Keep Coding

How to pass an array data from controller to blade file Laravel

I'm trying to pass an array from Controller to Blade
My Controller:
public function socaucuachuong($id){
$socaucuachuong = CauHoi::groupBy('chuong')->select('chuong', CauHoi::raw('count(id) as Total'))->where('idmonthi','=', $id)->get()->toArray();
return view('DeThi::dethi')->with('socaucuachuong', $socaucuachuong);
}
My Blade file:
$('select').select();
function get_units(id) {
var list = $('#dschuong');
list.empty();
var url = "{{ route('dethi.socaucuachuong') }}"+'/'+ id;
var success = function (result) {
if (result.length <= 0) {
var item = '<div class="input-field"><input type="text" disabled value="Môn này hiện chưa có câu hỏi nào"></div>';
list.append(item);
} else {
for (i = 0; i < result.length; i++) {
var item = '<div class="input-field"><label for="unit-' + result[i].chuong + '">Nhập số câu hỏi chương ' + result[i].chuong + ' (có ' + result[i].Total + ' câu) <span class="failed">(*)</span></label><input type="number" max="' + result[i].Total + '" class="unit_input" onchange="set_sum(' + result[i].Total + ')" name="unit-' + result[i].chuong + '" id="unit-' + result[i].chuong + '" required></div>';
list.append(item);
}
}
};
$.get(url, success);
}
My Route file:
Route::post('socaucuachuong', 'DeThiController#socaucuachuong')->name('dethi.socaucuachuong');

You can get array values in blade like this.
<script>
var socaucuachuong = #JSON($socaucuachuong); // this will be array value.
</script>

how to select all checkbox in javascript?

Script:-
<script type="text/javascript">
$(document).ready(function () {
var x = document.getElementById("currentPage").value;
if (x == null || x == "")
GetPage(parseInt(1));
else
GetPage(parseInt(x));
$('#pager').on('click', 'input', function () {
GetPage(parseInt(this.id));
document.getElementById("currentPage").value = parseInt(this.id);
});
});
function GetPage(pageIndex) {
//debugger;
$.ajax({
cache: false,
//url: "/EmailScheduler/",
url: '#(Url.RouteUrl("EmailScheduler"))',
type: "POST",
data: { "selectValue": pageIndex },
traditional: true,
dataType: "json",
success: function (data) {
//debugger;
$('#GridRows').empty();
$('#pager').empty();
var trHTML = '';
var htmlPager = '';
$.each(data.Customers, function (i, item) {
trHTML += ' <tbody class="table-hover"><tr>'
+ '<td class="text-left"><div class="checkbox" style="padding-left:50px;"><label><input type="checkbox" id=" ' + item.CustomerID + '" class="checkBoxClass"/></label></div></td>'
+ '<td class="text-left" id="tblFirstName"> ' + item.FirstName + '</td>'
+ '<td class="text-left" id="tblLastName"> ' + item.LastName + '</td>'
+ '<td class="text-left" id="tblEmailID"> ' + item.EmailID + '</td>'
+ '<td class="text-left" id="tblCustomerType"> ' + item.CustomerType + '</td>'
+ '<td class="text-left" id="tblCustomerDesignation" style="padding-left:40px;padding-right:30px;"> ' + item.CustomerDesignation + '</td></tr></tbody>'
});
$('#GridRows').append(trHTML);
if (data.Pager.EndPage > 1) {
htmlPager += '<ul class="pagination">'
if (data.Pager.CurrentPage > 1) {
htmlPager += '<li><input class="myButton" style="width:25px;height:25px;" type="button" id="1" style="font-weight:bold;" value="<<" /></li><li><input type="button" class="myButton" id="' + (data.Pager.CurrentPage - 1) + '"value="<"></li>'
}
for (var page = data.Pager.StartPage; page <= data.Pager.EndPage; page++) {
htmlPager += '<li class="' + (page == data.Pager.CurrentPage ? "active" : "") + '"><input type="button" class="myButton" id="' + page + '" value="' + page + '"/></li>'
}
if (data.Pager.CurrentPage < data.Pager.TotalPages) {
htmlPager += '<li><input type="button" class="myButton" id="' + (data.Pager.CurrentPage + 1) + '" value=">"/></li><li><input type="button" class="myButton" id="' + (data.Pager.TotalPages) + '" value=">>"/></li>'
}
htmlPager += '</ul>'
}
$('#pager').append(htmlPager);
},
error: function (jqXHR, textStatus, errorThrown) {
debugger;
}
});
}
$(document).on('click', '#GridRows .checkBoxClass',
function () {
var cid = $(this).attr('id');
debugger;
var CustomerIDArray = [];
var hidCID = document.getElementById("hfCustomerID");
if (hidCID != null && hidCID != 'undefined') {
var CustID = hidCID.value;
CustomerIDArray = CustID.split("|");
var currentCheckboxValue = cid;
var index = CustomerIDArray.indexOf(currentCheckboxValue);
//debugger;
if (index >= 0) {
var a = CustomerIDArray.splice(index, 1);
//alert("a" + a);
}
else {
CustomerIDArray.push(currentCheckboxValue);
//alert('pushed value:' + CustomerIDArray);
}
hidCID.value = CustomerIDArray.join("|");
//alert('Final' + hidCID.value);
}
else {
alert('undefined');
}
});
$(document).on('click', '#cbSelectAll', function () {
if (this.checked) {
//$(':checkbox').each(function () {
$("#GridRows .checkBoxClass").each(function () {
//debugger;
this.checked = true;
var selectall = document.getElementsByClassName(".checkBoxClass");
var custid = $(this).attr('id');
console.log('custid' + custid);
var hidSelectAll = document.getElementById("hfSelectAll");
var hidCustomer = document.getElementById("hfCustomerID");
hidCustomer = '';
var str = 'Select All';
hidSelectAll.value = str;
console.log(hidSelectAll);
});
$("#GridRows .checkBoxClass").change(function () {
if (!$(this).prop("checked")) {
$("#cbSelectAll").prop("checked", false);
var cid = $(this).attr('id');
console.log('cid' + cid);
var hidSelectAll = document.getElementById("hfSelectAll");
var str = 'Select All + unselected values';
hidSelectAll.value = str;
console.log(hidSelectAll);
}
});
}
else {
$(':checkbox').each(function () {
this.checked = false;
var hidSelectAll = document.getElementById("hfSelectAll");
var str = 'UnSelect All';
hidSelectAll.value = str;
console.log(hidSelectAll);
});
$(".checkBoxClass").change(function () {
if (!$(this).prop("checked")) {
$("#cbSelectAll").prop("checked", false);
var hidSelectAll = document.getElementById("hfSelectAll");
var str = 'unSelect All + selected values';
hidSelectAll.value = str;
console.log(hidSelectAll);
}
});
}
});
</script>
HTML:-
<div class="table-responsive" style="padding-left:20%;">
<table id="tCustomer" class="table-fill" style="float:left;">
<thead>
<tr>
<th class="text-left">
Select All
<div class="checkbox">
<input style="margin-left:15px;" type="checkbox" id="cbSelectAll" class="checkBoxClass"/>
</div>
</th>
<th class="text-left" style="padding-left:27px;">
First Name
</th>
<th class="text-left" style="padding-left:32px;">
Last Name
</th>
<th class="text-left" style="padding-left:40px;padding-right: 60px;">
Email-ID
</th>
<th class="text-left" style="padding-left:30px;padding-right: 40px;">
Customer Type
</th>
<th class="text-left" style="padding-left:15px;">
Customer Designation
</th>
</tr>
</thead>
</table>
<div id="GridRows" style="width:65%;">
</div>
</div>
<div id="pager"></div>
<input type="hidden" id="currentPage">
<input type="hidden" id="hfCustomerID"/>
<input type="hidden" id="hfSelectAll" />
In this When click on Select all checkbox then all values from should
be checked but when select all checked box is checked then only value
from current pagination got selected.
table contain is generated from ajax to avoid loss of checked value
while page load.

In your case
$(".checkBoxClass").prop('checked', true);
should work too.
The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements.
Read More: Here

In jquery you can achieve this by:
$('input[type="checkbox"]').prop('checked', true);
It will make all checkbox checked.

Tablesorter not loaded with dynamically generated content

I am trying to load jQuery tablesorter in a customized infowindow generated by cartodb.js. The idea is that when I click a data point on the map an infowindow will open, loading data dynamically from the database. While the information is loaded correctly and displayed as an ordinary table, the tablesorter is not loaded.
The relevant code:
<script>
$(document).ready(function()
{
$("#bewohner").tablesorter();
}
);
</script>
<script type="infowindow/html" id="infowindow_template">
<div class="infowindow-custom">
x
<div class="cartodb-tooltip-content-wrapper">
<div class="cartodb-tooltip-content" style="padding:2px">
<div id="strasse"></div>
<table id="bewohner" class='tablesorter table table-condensed'>
<thead>
<tr>
<th>
<th>Familienname
<th>Vorname
<th>Beruf</th>
<th>Etage</th>
<th>Tel.</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="cartodb-tooltip-container"></div>
</div>
</script>
....
cartodb.createLayer(map, layerUrl, layerOptions)
.addTo(map)
.on('done', function(layer) {
var infowindow = layer.getSubLayer(0).infowindow
infowindow.set('template', function(data) {
var clickPosLatLng = this.model.get('latlng');
var fields = this.model.get('content').fields;
if (fields && fields[0].type !== 'loading') {
var obj = _.find(fields, function(obj) {
return obj.title == 'strasse_original'
}).value
} // end test of status
$.get("http://******.cartodb.com/api/v1/sql?q=select * from vauban_1 where strasse_original= '" + obj + "' ORDER BY etage, familienname ASC", function(data) {
$('#strasse').append("<h4>" + data.rows[0].strasse_heute + " / " + data.rows[0].strasse_original +"</h4>");
for (var i = 0; i < data.total_rows; i++) {
$('#bewohner tbody').append("<tr><td>" + data.rows[i].zusatz + "<td>" + data.rows[i].familienname + "<td>" + data.rows[i].vorname + "<td>" + data.rows[i].beruf + "<td>" + data.rows[i].etage + "<td>" + data.rows[i].telefon + "</td></tr>");
}
});
return $('#infowindow_template').html();
});
})
It seems that I somehow have to trigger the tablesorter each time the infowindow is loaded, but I don't know how.

I the call for tablesorter was not placed correctly, as it has to be placed inside the function that updates the infowindow. Thus, a working version of the function is:
cartodb.createLayer(map, layerUrl, layerOptions)
.addTo(map)
.on('done', function(layer) {
var infowindow = layer.getSubLayer(0).infowindow
infowindow.set('template', function(data) {
var clickPosLatLng = this.model.get('latlng');
var fields = this.model.get('content').fields;
if (fields && fields[0].type !== 'loading') {
var obj = _.find(fields, function(obj) {
return obj.title == 'strasse_original'
}).value
} // end test of status
$.get("http://******.cartodb.com/api/v1/sql?q=select * from vauban_1 where strasse_original= '" + obj + "' ORDER BY etage, familienname ASC", function(data) {
$('#strasse').append("<h4>" + data.rows[0].strasse_heute + " / " + data.rows[0].strasse_original +"</h4>");
for (var i = 0; i < data.total_rows; i++) {
$('#bewohner tbody').append("<tr><td>" + data.rows[i].zusatz + "<td>" + data.rows[i].familienname + "<td>" + data.rows[i].vorname + "<td>" + data.rows[i].beruf + "<td>" + data.rows[i].etage + "<td>" + data.rows[i].telefon + "</td></tr>");
}
$("#bewohner").tablesorter();
});
return $('#infowindow_template').html();
});
})

IE: jQuery.show() only shows element when using alert() before/after show

I'm trying to add a simple 'wait box' on a javascript function, like this:
function caricaElenco(indice) {
(...)
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
(...)
$("[id*=Wait1_WaitBox]").hide();
}
And it's working good on Firefox, but not on Internet Explorer 11, that's not showing it. The HTML is:
<div id="ctl00_Wait1_WaitBox" class="updateProgress">
Attendere...<br />
<img src="../Images/wait.gif" align="middle" />
</div>
The weirdest thing is that I try this, for a simple check:
function caricaElenco(indice) {
(...)
alert($("[id*=Wait1_WaitBox]").css('display'))
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
alert($("[id*=Wait1_WaitBox]").css('display'))
(...)
$("[id*=Wait1_WaitBox]").hide();
}
And it's working, I mean that it's showing the alert with 'none' and after 'block'... And it's showing the box too! But not without the alert... Why?
UPDATE:
Tried with [id*="Wait1_WaitBox"], but it's the same. jQuery version is 1.8.2.
With
it's working only with the alert
I mean that if I do:
function caricaElenco(indice) {
(...)
alert('whatever');
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
alert('whatever');
(...)
$("[id*=Wait1_WaitBox]").hide();
}
It's showing the box, but if I do:
function caricaElenco(indice) {
(...)
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
(...)
$("[id*=Wait1_WaitBox]").hide();
}
It's not working (I mean not showing the 'wait box', but doing all the other stuff the function has to do in (...) correctly—load a gridview with an AJAX call) on Internet Explorer 11, in Firefox are both working. No JavaScript error.
UPDATE 2:
Almost entire javascript function:
// Fill part of gridView
function loadList(index) {
index = parseInt(index);
buffer = 100; // Number of rows to load
$("[id*=divGrid]").unbind('scroll');
$('[id*="Wait1_WaitBox"]').show(); // Show loading 'wheel'
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "PageName.aspx/webMethodName",
data: '{id:' + $("[id*=hdnID]").val() + ', index:' + index + '}',
dataType: "json",
async: false,
success: function (response) {
if (index == 0) {
(...)
$("[id*=grid] tr:last-child").remove();
var row = "<tr class='" + response.d[index].State + "'>";
row += "<td class="Column1"></td>";
(...)
row += "<td class="DateColumn"></td>";
(...)
row += "<td class='columnN'></td></tr>";
$("[id*=grid]").append(row);
}
row = $("[id*=grid] tr:last-child").clone(true);
$("[id*=grid] tr:last-child").remove();
if (index <= response.d.length) {
if (index + buffer > response.d.length)
var stop = response.d.length;
else
var stop = index + buffer;
(...)
for (var i = index; i < stop; i++) {
var j = 0;
(...)
$("td", row).eq(j).html("<span id='lblCodeNumber" + i + "' >" + response.d[i].CodeNumber + "</span>"); j++;
(...)
var effectDate = new Date(parseInt(response.d[i].effectDate.substr(6)));
$("td", row).eq(j).html(effectDate.getDate() + '/' + (effectDate.getMonth() + 1) + '/' + effectDate.getFullYear()); j++;
}
(...)
var toBeCounted = "";
var checked = "";
if (response.d[i].ToBeCounted != null)
toBeCounted = response.d[i].ToBeCounted .toString();
else
toBeCounted = "true";
if (toBeCounted == "true")
checked = "checked = 'checked'";
else
checked = "";
var rdToBeCounted = "<span><input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='s' id='sToBeCounted" + i + "' />";
rdToBeCounted += "<label for='s" + i + "'>YES</label>";
if (toBeCounted == "false")
checked = "checked = 'checked'";
else
checked = "";
toBeCounted += "<input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='n' id='nToBeCounted" + i + "' />";
rdToBeCounted += "<label for='n" + i + "'>NO</label></span>";
$("td", row).eq(j).html(rdToBeCounted);
$("[id*=grid]").append(riga);
(...)
riga = $("[id*=grid] tr:last-child").clone(true);
}
if (stop < response.d.length) {
$("[id*=divGrid]").scroll(function (e) {
if (element_in_scroll(".congruenti tbody tr:last")) {
loadList($(".congruenti tbody tr:last td:last").html());
};
});
}
$('[id*="Wait1_WaitBox"]').hide();
}
},
error: function (result) {
alert("Error! " + result.status + " - " + result.statusText);
}
});
}

At the end you seem to be hiding it again $("[id*=Wait1_WaitBox]").hide();.
You need to show what goes in between these two lines.
It works with alert because the execution of the script is frozen until you close the alert (and that final line is not executed yet).

sending post with no callback, getting too much recursion

So I'm working on a pre-existing site and I'm trying to add in a point where the code sends out some data. When it gets to my .post() I get the following error:
too much recursion
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
Line 16
Here's the flow:
Some link text has the following onclick handler:
<a class="lucida_12pxBlueLH16" onclick="changeCipherAdmin(6); return false;" href="#">Keyword: SLEEP</a>
function changeCipherAdmin(num) {
tempHTML = '';
tempHTML += '<select id="select_cipher' + num + '" name="select_cipher' + num + '" class="select_tanbg" onchange="updateKeyFieldsAdmin(this.value,' + num + ',1);">';
tempHTML += ' <option id="option' + num + '_admin1" value="1">Additive</option>';
tempHTML += ' <option id="option' + num + '_admin2" value="2">Affine</option>';
tempHTML += ' <option id="option' + num + '_admin3" value="3">Caesar</option>';
tempHTML += ' <option id="option' + num + '_admin4" value="4">Keyword</option>';
tempHTML += ' <option id="option' + num + '_admin5" value="5">Multiplicative</option>';
tempHTML += ' <option id="option' + num + '_admin6" value="6">Vigenère</option>';
tempHTML += '</select>';
document.getElementById('admin_cipher' + num).innerHTML = tempHTML;
document.getElementById('option' + num + '_admin' + ciphers[num]).selected = true;
updateKeyFieldsAdmin(ciphers[num], num, 0);
}
Based on that it runs the following function
function updateKeyFieldsAdmin(cipherNum, selectNum, resetNum) {
//tempHTML=''+possible_ciphers[cipherNum]+'';
//document.getElementById('admin_cipher'+selectNum).innerHTML=tempHTML;
if (resetNum == 0) {
keyA = keysA[selectNum];
keyB = keysB[selectNum];
}
if (cipherNum == 1) {
//0-25
//change letter to number, add encryption key (two characters?), reduce mod 26
//additive: use a:number
if (resetNum == 1) {
keyA = "";
keyB = "";
}
tempHTML = '<strong class="helvetica11pxTanB">Key (0-25)</strong> <input type="text" id="key_a' + selectNum + '" maxlength="2" class="form_field11px" style="width:19px; height:12px; text-align:right; color:#000000;" value="' + keyA + '" onkeyup="checkKeysAdmin(1,' + selectNum + '); return false;" autocapitalize="off" autocorrect="off" />';
}
else if (cipherNum == 6) {
//vigenere: use a:word--26 letters or less
if (resetNum == 1) {
keyA = "";
keyB = "";
}
tempHTML = '<strong class="helvetica11pxTanB">Keyword</strong> <input type="text" id="key_a' + selectNum + '" maxlength="26" class="form_field11px" style="width:99px; height:12px; text-align:right; color:#000000;" value="' + keyA + '" onkeyup="checkKeysAdmin(event,6,' + selectNum + '); return false;" autocapitalize="off" autocorrect="off" />';
}
document.getElementById('admin_key' + selectNum).innerHTML = tempHTML;
if ((cipherNum == 2 || cipherNum == 5) && !isNaN(keyA) && keyA != "") {
//update select field
if (cipherNum == 2) {
$('#key_a' + selectNum).val(keyA);
}
else {
for (i = 1; i < odd_nums_prime26.length; i++) {
if (keyA * 1 == odd_nums_prime26[i]) {
document.getElementById('key_a' + selectNum).selectedIndex = i;
document.getElementById('option' + selectNum + '_mult' + i).selected = true;
break;
}
}
}
}
if (resetNum == 1) {
checkKeysAdmin(cipherNum, selectNum);
}
}
Which then calls the below:
function checkKeysAdmin(e, cipherNum, row) {
encrypt_ready = true;
if (encrypt_ready == true) {
//keyA and keyB should already be updated...so:
keysA[row] = keysA;
keysB[row] = keysB;
ciphers[row] = cipherNum;
ciphertext[row] = encryptTextAdmin(plaintext[row], cipherNum);
document.getElementById('cipher' + row).innerHTML = ciphertext[row];
// This is my code where Im trying to send my data out
if (e.keyCode == 13 ) {
alert( 'here2' );
$.post('/challenges/save.php', { action:'updateJokeMessage',
messageId:message_ids[row],
joke:message_text[row],
punchline:plaintext[row],
encryptedPunchline:ciphertext[row],
cipherId:cipherNum,
keyA:keysA[row],
keyB:keysB[row]
});
alert( 'Done' );
}
return;
}
else {
//alert("not ready to encrypt");
document.getElementById('cipher' + row).innerHTML = '';
}
// me trying to stop the recursion
event.stopPropagation();
}
I've tried adding in a call back and putting in event.stopPropagation or returning etc. But can't figure out why. Any thoughts/help would be appreciated.

So it ended up being a var typo:
keysA[row] = keysA;
keysB[row] = keysB;
Which was basically assigning the object to one of it's elements, which caused the recursion when jquery tried to process that.

I strongly suspect that your problem is here:
keysA[row] = keysA;
keysB[row] = keysB;
You're making a circular structure, and jQuery is losing its mind when it's trying to trace its way through the parameter object.