I'm trying to place text to the left of my sweetalert box. How can i do it please?
Picture in attache, i would like to place text bordered to the left.
Actual view
My script:
Swal.fire({
title:'<strong>Info produit : '+data.id+'</strong>',
type: 'info',
html: '<b>Designation : </b>'+data.designation+'<br><b>Unite : </b>'+data.unite+'<br><b>Prix : </b>'+data.prix+'<br><b>Categorie : </b>'+data.categorie+'<br><b>Sous Categorie : </b>'+data.sous_categorie+'<br><b>Fournisseur : </b>'+data.fournisseur+'<br><b>Statut : </b>'+data.statut,
showCancelButton: false,
})
Swal.fire({
html: '<div class="align-left">text aligned left</div>',
})
.align-left {
text-align: left;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
Related
Is it possible to display in some pop up or tooltip image when user make mouse over url that is displayed inside table cell.
I have made it for now like this and this display image inside cell:
{
field: 'image',
title: 'Image',
lockable: false,
template:
'<div class="tooltipcontent">' +
'<img src="' + '#= image #' + '" alt="" />' +
'</div>',
width: '300px'
}
I would do something like this:
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<img style="width:100px" src="#=url#">
</script>
</div>
$("#grid").kendoGrid({...});
$("#grid").kendoTooltip({
filter: "td:nth-child(1)", //this filter selects the first column's cells
position: "right",
content: function(e) {
var dataItem = $("#grid").getKendoGrid().dataItem(e.target.closest("tr"));
return kendo.template($("#template").html())(dataItem);
}
}).data("kendoTooltip");
Example: Row template tooltip
I'm converting from jqgrid (4.6.0) to free-jqgrid (4.14.1). Everything seems to work, but I'm not getting my context menu when I right-click on the grid (the toolbar search button still works). Is there an additional import or something I need? Here's what I'm currently bringing in:
jqueryui/1.12.1/themes/smoothness/jquery-ui.css
free-jqgrid/4.14.1/css/ui.jqgrid.css
free-jqgrid/4.14.1/plugins/css/ui.multiselect.css
jquery/3.2.1/jquery.min.js
jqueryui/1.12.1/jquery-ui.min.js
free-jqgrid/4.14.1/plugins/min/ui.multiselect.js
free-jqgrid/4.14.1/i18n/grid.locale-en.js
free-jqgrid/4.14.1/jquery.jqgrid.min.js
free-jqgrid/4.14.1/plugins/jquery.contextmenu.js
TIA
Edit:
grid.contextMenu(menuId, {
bindings : myBinding,
onContextMenu : function(e) {
var p = grid[0].p,
i,
lastSelId,
$target = $(e.target),
rowId = $target.closest("tr.jqgrow").attr("id"),
isInput = $target.is(':text:enabled') || $target.is('input[type=textarea]:enabled') || $target.is('textarea:enabled');
if (rowId && !isInput && jqGridGetSelectedText() === '') {
i = $.inArray(rowId, p.selarrrow);
if (p.selrow !== rowId && i < 0) {
// prevent the row from be unselected
// the implementation is for "multiselect:false" which we use,
// but one can easy modify the code for "multiselect:true"
grid.jqGrid('setSelection', rowId);
} else if (p.multiselect) {
// Edit will edit FIRST selected row.
// rowId is allready selected, but can be not the last selected.
// Se we swap rowId with the first element of the array p.selarrrow
lastSelId = p.selarrrow[p.selarrrow.length - 1];
if (i !== p.selarrrow.length - 1) {
p.selarrrow[p.selarrrow.length - 1] = rowId;
p.selarrrow[i] = lastSelId;
p.selrow = rowId;
}
}
return true;
} else {
return false;
// no contex menu
}
},
menuStyle : {
backgroundColor : '#fcfdfd',
border : '1px solid #a6c9e2',
maxWidth : '600px',
width : '100%'
},
itemHoverStyle : {
border : '1px solid #79b7e7',
color : '#1d5987',
backgroundColor : '#d0e5f5'
}
});
Edit:
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.contextmenu-ui.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<title>jqGrid Loading Data - Million Rows from a REST service</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#jqGrid").jqGrid({
url : 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype : "GET",
datatype : "jsonp",
colModel : [{
label : 'OrderID',
name : 'OrderID',
key : true,
width : 75
}, {
label : 'Customer ID',
name : 'CustomerID',
width : 150
}, {
label : 'Order Date',
name : 'OrderDate',
width : 150
}, {
label : 'Freight',
name : 'Freight',
width : 150
}, {
label : 'Ship Name',
name : 'ShipName',
width : 150
}],
viewrecords : true,
width : 780,
height : 250,
rowNum : 20,
pager : "#jqGridPager"
}).jqGrid('navGrid', "#jqGridPager", {
add : true,
edit : true,
view : true,
del : true,
search : true,
refresh : true
}).jqGrid("createContexMenuFromNavigatorButtons", $("#jqGrid").jqGrid("getGridParam", "pager"))
});
</script>
</body>
</html>
It seems to me, that the reason of your problems are not migration from jqGrid (4.6.0) to free jqGrid (4.14.1), but migration to jQuery UI 1.12.1. The CSS style of jQuery UI Menu is changed many times in version 1.10.x, 1.11.x and 1.12.x. The plugins jquery.contextmenu.js and jquery.contextmenu-ui.js are old. They are based on the code published 10 years ago (see the date 16 July 2007 in comments of jquery.contextmenu.js file). If you don't really require to use jQuery UI 1.12.1, then I'd suggested you just use jQuery UI 1.11.4 instead. It changes the look of the context menu to the following:
If you do require to use jQuery UI 1.12.1 then you should change the default settings used by jquery.contextmenu-ui.js with respect of the following code:
$.contextMenu.defaults({
menuShadowStyle: {
"box-shadow": "8px 8px 8px #aaaaaa",
margin: "-2px",
padding: "0"
},
itemIconSpanStyle: {
"float": "none",
top: "-2px",
position: "relative"
}
});
It's important that you updates jquery.contextmenu-ui.js to the latest version from GitHub. If you have to use the jquery.contextmenu-ui.js 4.14.1 from CDN then you need to add additional CSS rules additionally to above call of $.contextMenu.defaults method
.jqContextMenu .ui-menu .ui-icon {
position: relative;
}
.jqContextMenu li span {
float: none !important;
}
see http://jsfiddle.net/OlegKi/avxvy1z0/
Hi i have dropzone Js Upload just working, but i need to add i border to the picture that i clicked on the Thumb Preview of dropzone js.
How i Can do that ?
I have this code :
defaultButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
//_this.removeFile(file);
$.ajax({
type: 'POST',
url: "{!! route('setDefaultPhoto' ) !!}" ,
data: { id : file.serverid },
dataType: 'JSON'
});
});
Just use:
.dz-image { border: 1px solid #000 }
I am building search functionality in multi-tab where user search criteria will be one tab, and user search results will be in other tab. When I am searching first time, I got my results with proper page navigation bar in second tab. But when user goes back to previous tab(search tab) and search again my grid results are refreshed with proper values but my navgrid is not appearing. I could not find dom for navgrid in firebug as well where initially that dom present with first time search.
Following are the code snippets.
function dispSearchResults() {
var no = document.getElementById("stNo").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var dateOfBirth = document.getElementById("dateOfBirth").value;
document.getElementById("searchContainerModal").innerHTML='<table
id="searchResultsTab" style="width:100%"></table>';
jQuery("#searchResultsTab").jqGrid({
url : contextPath + '/web/getSearchViewResults.json',
datatype : "json",
mtype: "POST",
postData:{'NO': no, 'FIRST_NAME':firstName, 'LAST_NAME':lastName,
'DATE_OF_BIRTH':dateOfBirth},
colNames : [ 'no', 'First Name', 'Last Name', 'Date Of Birth'],
colModel : [ {
name : 'No',
index : 'No',
width : 100,
align : "center",
formatter: fmtStateno
}, {
name : 'firstName',
index : 'firstName',
width : 220,
align : "left",
formatter: fmFName
}, {
name : 'lastName',
index : 'lastName',
width : 220,
align : "left",
formatter: fmLName
}, {
name : 'dateOfBirth',
index : 'dateOfBirth',
width : 120,
align : "left",
formatter: fmBirthDate
}],
altRows : true,
altClass : 'oddRow',
loadComplete : function() {
document.getElementById("sResultsTab").style.visibility =
"visible";
if (jQuery("#searchResultsTab").getGridParam("records")==0) {
jQuery("#searchResultsTab").addRowData(
"blankRow", {"No":"No data was found",
"firstName":"", "lastName":"", "dateOfBirth":""}
);
}else{
$("tr.jqgrow:odd").addClass('oddRow');
}
},
onCellSelect: function(rowid,iCol,cellcontent,e) {
// alert(rowid);
cContent = cellcontent;
rId = rowid;
},
height : 240,
width : 1165,
rowNum : 25,
rowList : [25,50,75,100],
loadonce: true,
pagination:true,
pager : '#searchPagerDiv1',
sortname : 'no',
viewrecords : true,
sortorder : "desc",
caption : "Search Results",
gridview : true,
jsonReader : {
root : "rows",
page : "currentPage",
total : "totalPages",
repeatitems : false,
id : "id"
}
}).navGrid("#searchPagerDiv1",reloadAfterSubmit: false,
{edit:false,add:false,del:false});
});
$("#tabs").tabs("select", "#searchResultsTb");
}
Here are the code snippets
main jsp for tabs
------------------
<div id="mainContentDiv"<
<div id="tabs" style="background-color: transparent; height:auto"<
<ul id="Tabs1"<
<li id="sCriteriaTab"<<a href="#searchTab"<Search Criteria </a<
</li<
<li id="sResultsTab"< <a href="#searchResultsTb"<Search
Results</a< </li<
</ul<
<div id="searchTab" style="background-color: transparent" class="height250"<
<%# include file="../search/SearchCriteria.jsp" % <
</div<
<div id="searchResultsTb" style="background-color: transparent;"<
<%# include file="../search/SearchResults.jsp" %
<
</div<
SearchCriteria.jsp
-------------------
<form id="searchForm" name="searchForm"<
<div class="personDetailsDiv" id="personNameInfoDiv"<
<div style="float:right"<
<font class="standardInputTitle"<no</font<
<input id="No" name="No" class="standardInputText marginRight50" value=""
type="text"<</div< </div<
........
............
<div class="button-row"<
<a href="javascript:dispSearchResults()" class="button rounded blue effect-
3"<Search</a<
</div<
</div< </form<
SearchResults.jsp
----------------
<div id="searchContainerModal" style="width:100%"<</div<
<div id="searchPagerDiv1"<</div<
<div id="searchPagerDiv" style="width:100%"<
<div id="searchZeroRec" style="display:none;"< Zero Records Found ...
</div<
</div<
Appreciate your help !!!!
How will you display a JQGrid within a dialog?
in html page place table tag which will be used to construct grid inside dialog div like
<div id="dialog-div">
<table id="JqGrid">
</table>
<div id="pager" style="text-align: center; </div>
</div>
then in js first set dialog settings like
$("#dialog-div").dialog({
width: 'auto',
resizable: false,
height: '395',
autoOpen: false,
open: function (event, ui) {
ConstructJqGrid();
},
});
function ConstructJqGrid(){
jQuery("#JqGrid").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
...
})
}
This is how I did it, with AJAX to get the page containing my jqGrid :
$.ajax({
[...],
success: function( data ){
var popup = document.createElement( "div" );
// Appending
$( popup ).append( data );
$( "body" ).append( popup );
// Dialoging
$( popup ).dialog({
[...]
});
}
});
PS : I don't know the rules about necroposting but since the answer was never given, I chose to answer it.
If you are using the jquery-ui dialog use this page,the first example will show you how to create a dialog with #dialog. Then this page will have a have a basic JQGrid example which you will embed into your #dialog. If you are using a different type of a dialog, the process should be similar.