We Keep Coding

how to render ajax return in cakephp 3.1

I have a table that have checkboxes inside. after select it how to return a sum of values from table in modal before confirm the form? and how to render the ajax response from controller?
in my view
$("#envia-vendas").ajaxForm({
url: '../vendas/confirmar',
type: 'post',
success: function (data) {
$('#myModal').modal('show');
console.log(data);
},
in my controller
//dostuf
if($this->request->is('ajax')){
$sum = $sum;
$this->render('ajax/confirmado', 'ajax');
echo 'bal';
$this->set('text', 'test');
$this->set('_serialize', ['text']);
}
how to print the result in the view without reloading page?

What this fiddle does is grabs all of your inputs, then pops up a modal after the values and names have been injected for confirmation.
It should give you a good starting point. What this is setup to do is give you the confirmation screen without the need for additional server calls.
Just set your action to the route that you want to pass the information to for server interactions.
HTML
<form id="test-form" method="post" action="your/action/here">
<input type="text" name="test" value="" />
<input type="submit" name="submit-form" value="submit" />
</form>
<div class="modal">
<div class="form-info-wrapper">
</div>
<a class="confirm">Confirm Information</a>
</div>
CSS
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: #FFF;
}
JS
jQuery(document).ready(function ($){
$('body').on('click', 'input[type=submit]', function (e) {
e.preventDefault();
var data = $(this).parent('form').serializeArray();
$('.form-info-wrapper').empty();
for(_data in data)
{
$('.form-info-wrapper').append(data[_data].name + ': ' + data[_data].value);
}
$('.modal').fadeIn();
});
$('.confirm').click(function (e){
e.preventDefault();
$('#test-form').submit();
});
});
https://jsfiddle.net/ojaeacps/2/

jQuery Autocomplete not working with modal

Hi I know this question has been asked many times but all the solutions I found are not working for me ....
I am able to make the ajax request and I am getting the response back but the autocomplete menu which is in a modal inside a template is not visible. As suggested i tried changing the z-index and made modifications but they did not work ... Below is my code
$("#startDestination").autocomplete({
appendTo: "#createRequest",
/*close: function (event, ui){
$("#startDestination").autocomplete("option","appendTo","#detailsModal"); // <-- and do this
}*/
});
// $("#startDestination").autocomplete("option", "appendTo", "#detailsModal");
$("#startDestination").autocomplete({
source: function (request, response) {
$.ajax({
url:"http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
dataType: "json",
function (data) {
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
var selectedObj = ui.item;
getcitydetails(selectedObj.value);
$("#startDestination").val(selectedObj.value);
return false;
},
open: function () {
$("#startDestination").removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$("#startDestination").removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
I have also tried to use appendTo and attach it to div elements of the modal.
Below is the code for my modal in a template
<div class="col-sm-6">
<div class="form-group">
<div id="test">
<label>Departure Destination</label>
<span class="input-icon input-icon-right">
<input type="text" name="startDestination_1" id="startDestination" class="form-control" ></input>
</span>
</div>
</
my style.css
.ui-autocomplete{
font-family: 'open sans', sans-serif;
z-index:2147483647 !important;
font-size: 16px;
}
my jquery-ui.css
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
z-index:2147483647 !important;
}
.ui-front {
z-index: 2147483647;
}
Any help would be appreciated.
Thank you in advance.

jQuery search bar only working one time per page

I am working on a page for pre-registration to events on my website. On this page, people need the ability to add names into as many slots as the event creator would like (so it needs to handle 3 person basketball teams and 50 person banquets). I have had a high quality facebook-like search bar made so that I can neatly search through the database and select the desired people. Sadly I have this search bar being created by a for loop that creates many different ID filled search bars but every one of them is left empty and the first search bar is the only one that is filled.
I found that it deals with the jQuery code at the top of my page. My question/issue is that I need this jQuery to work on multiple search bars on a single page. If anyone can help me accomplish this I'd be greatly appreciative.
The "top code" or JQuery code that pulls from the db successfully is:
$(function(){
$(".search").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
$.ajax({
type: "POST",
url: "../searchMyChap.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult").html(html).show();
}
});
}return false;
});
jQuery("#divResult").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#divResult").fadeOut();
}
});
$('#inputSearch').click(function(){
jQuery("#divResult").fadeIn();
});
});
</script>
<style type="text/css">
body{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.contentArea{
width:600px;
margin:0 auto;
}
/*
#inputSearch
{
width:350px;
border:solid 1px #000;
padding:3px;
}
*/
#divResult
{
position:absolute;
width:545px;
display:none;
margin-top:-1px;
border:solid 1px #dedede;
border-top:0px;
overflow:hidden;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
box-shadow: 0px 0px 5px #999;
border-width: 3px 1px 1px;
border-style: solid;
border-color: #333 #DEDEDE #DEDEDE;
background-color: white;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede;
font-size:12px; height:50px;
}
.display_box:hover
{
background:#0088cc;
//background:#3bb998;
color:#FFFFFF;
cursor:pointer;
}
The for-loop code that prints the search bars is as follows:
for($i = 0; $i < $looper; $i++)
{
echo'
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Member Name:</label>
<input type="text" class="form-control search" name="member'.$i.'" autocomplete="off" id="inputSearch" placeholder="Search...">
<div id="divResult" style="z-index:999; margin-top: 35px;" ></div>
</div>
</div>
</div>';
}

EDIT: Working JSFiddle
The first issue is that with each iteration of the for loop an element is created with id="divResult". An ID should be used once in the whole document. I have changed the for loop to produce an element with class="divResult" instead. If you use this change, remember that your CSS will need to be changed accordingly.
for ($i = 0; $i < $looper; $i++) {
echo '
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Member Name:</label>
<input type="text" class="form-control search" name="member'.$i.'" autocomplete="off" id="inputSearch" placeholder="Search...">
<div class="divResult" style="z-index:999; margin-top: 35px;"></div>
</div>
</div>
</div>';
}
Next we iterate over each .search element. Within each iteration we can find the corresponding 'result' element by using jQuery's next() function, which retrieves the immediately following sibling of an element. If the code is ever changed such that the 'results' element does not appear straight after the `.search' element, this will need changing.
$(function () {
$('.search').each(function(index) {
var $searchElement = $(this);
var $resultElement = $searchElement.next();
console.log(index, $searchElement, $resultElement);
$searchElement.on('keyup', function() {
var inputSearch = $searchElement.val();
var dataString = 'searchword=' + inputSearch;
if (inputSearch != '') {
$.ajax({
type: "POST",
url: "../searchMyChap.php",
data: dataString,
cache: false,
success: function (html) {
$resultElement.html(html).show();
}
});
}
return false;
});
$resultElement.on("click", function (e) {
var $clicked = $(this);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$searchElement.val(decoded);
});
$(document).on("click", function (e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
$resultElement.fadeOut();
}
});
$searchElement.on('click', function () {
console.log(index + ' clicked');
$resultElement.fadeIn();
});
});
});

ajax autocomplete textbox search arrow key selection is not working

I have a simple auto complete search box in codeignator that displays locations in mysql database results using php "LIKE" function.Everything works fine. i would just like to make it so that when the user starts typing he/she can use the arrow keys to scroll down and press enter on an item just like google. my code is below
<div class="banner_search_inner_box_search" style="margin-top: 15px;">
<input type="text" name="search" class="search" id="searchid" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
My css code
#result
{
position:absolute;
width: 457px;
/*padding:10px;*/
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:13px;
height:6px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
JS code
<script type="text/javascript" src="<?=PUBLICPATH?>js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var AJAXPATH = 'http://localhost/PCenter/';
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url:AJAXPATH + 'search/show_city',
data: dataString,
selectFirst: true,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
somebody please help me

Use the following plugin:
http://jqueryui.com/autocomplete/#remote
It allows you to fetch the results from a remote Data source via AJAX. You may have to change the format of the AJAX response (JSON response), to match the format which autocomplete requires.

how to remove c fakepath in webkit browser like chrome, safari, opera?

How to remove c fakepath in webkit browser like chrome, safari, opera ?
in IE And Firefox it's show only file name , it's OK
But in Chrome, opera, safari. It's show C:\fakepath\700.jpg
How can i remove C:\fakepath\ in Chrome, opera, safari.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<style type="text/css">
.inputWrapper {
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
/*This makes the button huge so that it can be clicked on*/
font-size:50px;
}
.hidden {
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(function() {
$(".inputWrapper").mousedown(function() {
var button = $(this);
button.addClass('clicked');
setTimeout(function(){
button.removeClass('clicked');
},50);
});
$('input[type=file]').change(function() {
var $this = $(this);
$this.parent().find('span').text($this.val());
});
});
});//]]>
</script>
<div class="inputWrapper" id="inputWrapper" style="height: 56px; width: 128px;">
<input class="fileInput hidden" type="file" name="file2"/>
<span></span>
</div>

Just use a regular expression to remove everything before (and including) the last \.
var path = "C:\\fakepath\\example.doc";
var filename = path.replace(/^.*\\/, "");
console.log(filename);
Obviously, you'd get path from your file input.

And you will get the name of first file.
document.getElementById("yourInputElement").files[0].name
If you want to get multiple filenames, you have to iterate over files.

Something like the following should work for you:
<script type="text/javascript">
$(function() {
$(".inputWrapper").mousedown(function() {
var button = $(this);
button.addClass('clicked');
setTimeout(function(){
button.removeClass('clicked');
},50);
});
$('input[type=file]').on('change', function(e) {
var filename = $(e.currentTarget).val().replace(/^.*\\/, "");
$this.parent().find('span').text(filename);
});
});
</script>

Use Below Code :
<label for="file" class="input input-file"><div class="button"><input type="file" onchange="this.parentNode.nextSibling.value = this.value" name="uploadfiliron" class="uploadimg" data-gotfile='uploadimg-1'>Browse</div><input type="text" readonly class="uploadimg-1"></label>
And This is script
<script>$('body').on('change','.uploadimg',function(e){
var filename = $(this).val().replace(/.*(\/|\\)/, '');
var getft = $(this).attr('data-gotfile');
console.log(getft+" "+filename);
if(filename=='')
{
$('.'+getft).val('No file chosen');
}
else
{
$('.'+getft).val('Your file name: '+filename);
}});</script>