Pop-up html:
<div class="row" id="get_uv_detail" style="display:none">
<div class="box border">
<div class="box-body">
<div class="uv-more-detail" style="max-height:450px;padding-right:10px" ></div>
</div>
</div>
</div>
In controller i have function that returns data like this:
[{"name":"p1"},{"name":"p2"}]
How can I append it in the pop-up?
I have to display data like this:
Name
-----
p1
p2
Here is my script:
.done(function(data) {
$('.uv-more-detail').append(data);
});
// pop-up display
bootbox.dialog({
message: msg,
title: title,
buttons: {
main: {
label: "Close",
className: "btn-primary",
callback: function() {
$(".bootbox").modal("hide");
}
}
}
});
This is the same answer as link provided by #ParthTrivedi:
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].name+ "</td>");
tr.append("<td>" + json[i].date+ "</td>");
$('table').append(tr);
}
});
});
For more answers: Parsing JSON objects for HTML table
Related
I am creating an e-commerce website and have to display the categories inside li tag checkbox. what I tried so far I wrote below. I couldn't get the output.
I have written inside the li tag like this but it didn't work for me.
<li class="list-group-item list-group-item-action" id="categories"><input type="checkbox"></li>
below I attached the full code.
Form Design(HTML)
<div align="left">
<li class="list-group-item list-group-item-action active" ><h4>Category</h4></li>
<li class="list-group-item list-group-item-action" id="categories"><input type="checkbox"></li>
</div>
Jquery
function getCategory(){
$.ajax({
type: 'GET',
url: 'get_category.php' ,
dataType: 'JSON',
success: function (data)
{
for (var i = 0; i < data.length; i++)
{
var catname = data[i].catname;
var id = data[i].id;
// $(this).prepend($('<input type="checkbox"/>'));
$('#categories').append('' + '<b>'+ data[i].catname + '<b>' + '');
}
},
error: function (xhr, status, error)
{
console.log(xhr.message)
}
});
}
get_category.php
<?php
include("db.php");
$stmt = $conn->prepare("select id,cat_name,status from category where status = '1' order by id DESC");
$stmt->bind_result($id,$catname,$status);
if ($stmt->execute()) {
while ( $stmt->fetch() ) {
$output[] = array ("id"=>$id, "catname"=>$catname,"status"=>$status);
}
echo json_encode( $output );
}
$stmt->close();
//}
Try this:
<div><ul id="displayResults"></ul></div>
Then, inside the php file:
function getCategory(){
$.ajax({
type: 'GET',
url: 'get_category.php' ,
dataType: 'JSON',
success: function (data)
{
for (var i = 0; i < data.length; i++)
{
var catname = data[i].catname;
var catid = data[i].id;
var catstatus = data[i].status;
if(catstatus){
$('#displayResults').append('<li id=cat_'+catid+' class="list-group-item list-group-item-action"><b>'+ data[i].catname + '<b><input id="cat_'+ catid +'" type="checkbox" value="true" checked="true"></li>');
}else{
$('#displayResults').append('<li id=cat_'+catid+' class="list-group-item list-group-item-action"><b>'+ data[i].catname + '<b><input id="cat_'+ catid +'" type="checkbox" value="true"></li>');
}
}
},
error: function (xhr, status, error)
{
console.log(xhr.message)
}
});
}
I don't see a call to the function getCategory.
Also insert the checkbox attribute in $('#categories').append(.<input type="checkbox">' + '<b>'+ catname + '<b>' + '');)
Here my code for the checkbox view:
<script>
$(document).ready(function(){
getCategory();
});
function getCategory(){
$.ajax({
type:'GET',
url: 'get_category.php' ,
success: function (data)
{
var res = JSON.parse(data);
for(var i = 0; i < res.length; i++) {
var id = res[i].id;
var catname = res[i].catname;
$('#categories').append('<input type="checkbox">' + '<b>'+ catname + '<b>' + '');
}
},
error: function (xhr, status, error)
{
console.log(xhr.message)
}
});
}
</script>
<div align="left">
<ul class = "list-group">
<li class="list-group-item list-group-item-action active" ><h4>Category</h4></li>
<li class="list-group-item list-group-item-action" id="categories"></li>
</ul>
</div>
Hope this can help you.
I'm using laravel5.5 Ajax paging. I am the HTML part assembled in the controller. When I clicked on page second, I jumped to this method. How to make the compiled HTML code continue to display on the page?
After clicking on the second page, a string of JSON data is returned. This is a problem. How can we make the data on the second page continue to display in the original page?
PHP
//Screen video, playback volume and key points.
public function accept（Request $ request）{
$id=$_GET['id'];
$summer=$_GET['key'];
$name=DB::table('vd_category')->where('address',$summer)->value('name');
if($id=='1'){
$video=DB::table('vd_video_'.$summer)->orderBy('state','desc')->paginate(25);
}else if($id=='2'){
$video=DB::table('vd_video_'.$summer)->orderBy('thumbs','desc')-
>paginate(25);
}
$data='';
foreach($video as $list){
$data.='<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0
5px;"><div class="movie-item">';
$data.="<a style='position:relative;display:block;' title='$list-
>video_name' target='_blank' href='details?id=$list->id&key =$summer'>";
$data.="<img alt='$list->video_name' title='$list->video_name'
src=\"uploads/$list->image_address\" height=\"230px\" width='100%'>";
$data.="<button class='bdtag'></button>";
$data.="</a>";
$data.="<div class=\"meta\"><div
style=\"width:100%;overflow:hidden;height:20px;\">";
$data.="<a href='/details?id='$list->id'&key='$summer'
target='_blank' title='$list->video_name' class=\"movie-name\">$list-
>video_name</a>";
$data.="<span class=\"otherinfo\"> 5.0分</span></div><div
class=\"otherinfo\">类型：$name</div></div></div></div>";
}
$datav['1']=$data;
$datav['2']="<div>"."{$video->appends(['id' =>
$id,'key'=>$summer,'name'=>'page'])->links()}"."</div>";
return json_encode($datav);
}
HTML
<div id="data">
#foreach($video as $list)
<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0 5px;">
<div class="movie-item">
<a style="position:relative;display:block;" title="{{$list-
>video_name}}" target="_blank" href="/details?id={{$list->id}}&key=
{{$status}}">
<img alt="{{$list->video_name}}" title="{{$list-
>video_name}}" src="{{asset('uploads')}}/{{$list->image_address}}"
height="230"
width="100%">
<button class="bdtag"></button>
</a>
<div class="meta">
<div style="width:100%;overflow:hidden;height:20px;"><a
href="/details?id={{$list->id}}&key={{$status}}" target="_blank" title="
{{$list-
>video_name}}" class="movie-name">{{$list->video_name}}</a><span
class="otherinfo"> 5.0分</span></div>
<div class="otherinfo">类型：{{$namme}}</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<div id="datav" style="background:#FFF;padding-left:15px;">
{{$video->appends(['id' => $page,'name'=>'page'])->links()}}
</div>
JavaScript
<select name="" required id="where_id" style="float: right;padding-
left:10px;border-left:8px;width: 90px;height: 30px;">
<option value="">Click screening</option>
<option value="1">Sort by play volume</option>
<option value="2">Ranking by points</option>
</select>
<input type="hidden" id="summer" value="{{$status}}">
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
}
});
});
</script>
It has been solved.js has been modified.
That is, the parameters carried by the URL through the Ajax request to the
back-end again, and then the back-end returned JSON data inserted into the
specified location again, probably this is the solution, my English is not
very good, please forgive me.
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
fun();
});
function fun() {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
});
}
function pagedata(){
$(".page-item a").click(function (){
var href=this.href;
this.href="javascript:void(0);";
var id=getQueryVariable('page',href);
var key=getQueryVariable('key',href);
var page=getQueryVariable('page',href);
$.ajax({
type: "get",
url: "accept",
dataType: 'json',
data: {id: id, key: key,page:page},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
})
})
}
// Intercept the parameter values carried by URL, such as page parameters
//and some custom parameters.
function getQueryVariable(name,url) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var data=url.slice(url.indexOf('?'));
var r =data.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
</script>
I have a listing of products each with differnt ID. Now on frontend I want to get prodouct data(say, name,price and a addtocart button) on mousover.
Here is my code:
This is in loop to get all products:
HTML:
<div class="prod">
<a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
<div style="display: none; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" class="mouse_hover_470">
<input type="hidden" id="prod_id" value="470">
<h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
<div class="price-box">
<span id="product-price-470" class="regular-price">
<span class="price">$387.15</span>
</span>
</div>
<div class="actions">
<button onclick="setLocation('http://dev614.trigma.us/chocolate/index.php/checkout/cart/add/uenc/aHR0cDovL2RldjYxNC50cmlnbWEudXMvY2hvY29sYXRlL2luZGV4LnBocC90c2F2b3JpdGUuaHRtbA,,/product/470/form_key/4BR7w0TqeeO9AC0g/')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
var bla = jQuery('#prod_id').val();
jQuery(".pi_" + bla).mouseover(function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).mouseout(function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
But Iam getting only data of first product on mouseover. Its not working for rest of products
Looks like you are executing the above block of code in a loop, once per each product. In that case the problem is jQuery('#prod_id').val(); it will always return the value of first element with id prod_id.
In your case you don't have to do that, you can
jQuery(function ($) {
$('.prod .product-image').hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
});
There is a much, much easier way to do this:
jQuery(document).ready(function() {
jQuery(".product-image").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
Demo: JSBin
You can use each() function in jQuery
NOTE: Instead of using id="prod_id", use class, i.e class="prod_id". Since you told that the div is dynamically created it is using the same id attribute
Now loop the product div on ready function
jQuery(document).ready(function() {
jQuery('.prod').each(function(){
var bla = jQuery('.prod_id').val();
jQuery(".pi_" + bla).on('mouseover',function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).on('mouseout',function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
});
You can checkout this jQuery each()
Ashi,
try using
var bla = jQuery(input[id*='prod_id']).val();
instead of
var bla = jQuery('#prod_id').val();
This will give you all the hidden inputs so loop all of them and bind the mouseover event.
For example:
jQuery(input[id*='prod_id']).each(function(){
var bla = jQuery(this).val();
//carry out your logic..
// you can use jquery().live('mouseover'function(){}) for dynamically created html
});
Hope this will work!!
Cheers!!
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
http://jsfiddle.net/roXon/dJgf4/
I wish to get the file size and show inside my disabled textbox.
I googled and there is very less info about this.
Following bellow is my code
In PHP:
<div class="inputWrapper">
<div class="usetitle">* <?php echo Yii::t('labels', 'gameapk'); ?> :
<div class="div_upload_file_container">
<div style="position:absolute; margin: 0; padding:0; height:27px">
<input style="display:none" id="btnUploadFile" name="btnUploadFile" type="file" />
</div>
<div class="div_upload_file_container_inner">
<div class='word'>
</div>
<div style='clear:both'></div>
</div>
</div>
<div style="height:50px"></div>
<div id="uploaded_file"></div>
</div>
<div class="error2"><div id="err_btnUploadFile"></div></div>
</div>
In JS FILE:
//file
$('#btnUploadFile').uploadify({
'swf': base_url + '/js/plugins/uploadify321/uploadify.swf',
'uploader': "index.php?r=apk/uploadfile",
'folder' : '/temp',
'queueID': 'uploaded_file',
'queueSizeLimit' : 1,
'progressData': 'speed',
'removeCompleted': false,
'width': $('.div_upload_file_container').width(),
'height': 28,
'fileTypeDesc': 'Apk Files (*.apk)',
'fileTypeExts': '*.apk;',
'fileSizeLimit': '100GB',
'uploadLimit' : 1,
'itemTemplate': uploadedFileItem(),
'buttonText' : UPLOAD_FILE,
'onSelect': function (file) {
},
'onUploadStart': function (file) {
},
'onUploadSuccess': function (file, data, response) {
console.log (data);
$('#' + file.id).html(file.name);
var obj = JSON.parse(data);
statusCode = obj.statusCode;
if (statusCode == '200'){
console.log (data);
var today = obj.today;
var tmp_folder_with_date = obj.tmp_folder_with_date;
var filesize = obj.filesize;
var hashfilename_filename = obj.hashfilename_filename;
var full_path = obj.full_path;
file_cnt ++;
var html = '';
html = '<div>';
html += '<div style="float:left">';
html += file_cnt + '.';
html += '</div>';
html += '<div style="float:left; margin: 0 0 0 10px">';
html += file.name;
html += '</div>';
html += '<div style="clear:both"></div>';
html += '</div>';
$('#' + file.id).html(html);
}
var params = {
fileid: file.id,
fileName: obj.fileName,
fullSavePath_original: obj.fullSavePath_original,
fullSavePath_resize: obj.fullSavePath_resize,
fullSavePath_tobesave: obj.fullSavePath_tobesave,
fullSavePath_tobesaveURL: obj.fullSavePath_tobesaveURL,
filesize: obj.fileSize,
fullPath_TempFolder: obj.fullPath_TempFolder,
orientation: obj.orientation,
tobesave_file_width: obj.tobesave_file_width,
tobesave_file_height: obj.tobesave_file_height,
todayTempFolder: obj.todayTempFolder
};
DisplayNewUploadedPhotos(params);
},
'onUploadComplete': function (file) {
},
'onCancel': function (event,ID,fileObj,data) {
},
'onDialogClose': function (queueData) {
},
'onInit': function (instance) {
},
'onQueueComplete': function (queueData) {
},
'onClearQueue': function (queueItemCount) {
}
});
function uploadedFileItem() {
var html = '';
html = '<div id="${fileID}" class="fileUploadedItem">';
html += '<div style="margin:10px 0 0 0"></div>';
html += '<div class="uploadify-progress-bar"></div>';
html += '<div style="margin:10px 0 0 0">';
html += '<center>Cancel</center>';
html += '</div>';
html += '</div>';
return html;
}
obj.filesize is the file size ... Am I correct ? If I was correct , what should I do to get obj.filesize from JS to my textbox ?
I have an idea to do that suddenly:
$("#appsize").attr('value', obj.filesize);
HAHA THANKS =D
I'm trying import images to HTML using PHP, but NivoSlider not loaded that.
I looked for the cause of the problem.
I am printing a alert message of response and the right.
Here is the HTML and AJAX query:
<div id="workcontent" class="pcontent" style="display:none;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
</div>
</div>
<script>
$(document).ready(function() {
var wl = $('#worklist div');
wl.on('click', function(){
var name = $(this).attr('id');
console.log(name);
$.ajax({
url: 'read.php',
type: 'POST',
data: { data : name }
}).done(function (response) {
$('#slider').prepend(response);
alert(response);
});
});
});
</script>
<div id="back"></div>
<div id="backcontainer">
<div id="back">
Back
</div>
</div><!--End backcontainer-->
</div><!--End content-->
And here is the other jQuery:
<script>
$(document).ready(function() {
$('#slider').nivoSlider(function(){alert('OK');});
});
</script>
This alert don't show! ):
Finally, here is the PHP code:
<?php
if (isset($_POST["data"])){
if ($_POST["data"] == "") {
echo "data ures";
} else {
$data = $_POST["data"];
$fname = "content/".$data."/*.*";
$files = glob($fname);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
echo '<img src="'.$num.'" data-thumb="'.$num.'">';
}
}
} else {
echo "nem jott data";
}
?>
Sorry for my bad english
NivoSlider doesn't take a function as an argument.
Also .nivoSlider() is probably called before the AJAX call returns it's response.
A better solution would be:
$(document).ready(function() {
$.ajax({
url: 'read.php',
type: 'POST',
data: { data : name }
}).done(function (response) {
$('#slider').prepend(response).nivoSlider( {} );
});
});
Now you can be fairly sure #slider contains the images from the response body so NivoSlider can act on them.