I am using a fancy box iframe to create an overlay to display the contents of another page. I have a webhierarchicaldatagrid and on clicking a template column link the overlay is created. It seems to be working only for the first row of the grid and for all the other rows it is just opening the page without any overlay.Is there anything which I am missing in the code. Below is the code I am using:
<ig:TemplateDataField Key="Sipoc" Width ="06%">
<ItemTemplate>
<a class="iframe" id="ifrm" href="<%# String.Format("Sipoc.aspx?proj_id={0}&func_id={1}&subfunc={2}&jurisdiction_id={3}&proj_name={4}&owner_id={5}", Eval("Proj_Type_ID"), Eval("Function_Name"), Eval("Sub_Function_Name"), Eval("Jurisdiction_Name"),Eval("Proj_Type_Name"),Eval("Proj_Type_Owner_ID")) %>">
<asp:Image ID="Image1" ImageUrl='<%# Convert.ToString(Eval("Sipoc")) == "True"? "Sipoc.jpg": " " %>' runat="server" Visible='<%# Convert.ToString(Eval("Sipoc")) == "True"? true: false %>' ></asp:Image>
</a>
</ItemTemplate><header Text="Sipoc" />
</ig:TemplateDataField>
$(document).ready(function () {
$("#ifrm").fancybox({
'width': '100%',
'height': '100%',
"padding": 0,
"overlayShow": true,
"overlayOpacity": 0.5,
"zoomSpeedIn": 500, // has nothing to do with AJAX-ZOOM
"zoomSpeedOut": 500, // has nothing to do with AJAX-ZOOM
"hideOnContentClick": false, // important
"centerOnScroll": false,
"imageScale": true,
"easingIn": "swing",
"easingOut": "swing"
});
});
Related
TLDR; the cell editor does not rerender when we invoke the api.refreshCells method.
The following code renders a simple table with 2 rows. The value of the data is irrelevant since it uses both a custom cell renderer and a custom cell editor that reaches into context to pluck a value.
When context updates we need to call refreshCells, since no change is detected to the actual cell data value.
Note when clicking increment the value of the context is incremented and the value of the cells updates accordingly. Observe the console log messages for each view renderer.
Now double click cell to enter into edit mode and then click the increment button. Note that the cell editor is not re-rendered when the increment takes place.
I can get the editor to update using events but the props (and so the context) are stale.
Presume this is a design decision, but I need to rerender the cell editor component when my context data updates. Any ideas?
https://plnkr.co/edit/3cCRnAY14nOWt3tl?open=index.jsx
const EditRenderer = (props) => {
console.log('render edit cell')
return (
<input
value={props.context.appContext.cellValue}
/>
);
};
const ViewRenderer = (props) => {
console.log('render view cell')
return <React.Fragment>{props.context.appContext.cellValue}</React.Fragment>;
};
const Grid = () => {
const [rowData] = useState([{ number: 10 }, { number: 3 }]);
const columnDefs = useMemo(
() => [
{
field: 'number',
cellEditor: EditRenderer,
cellRenderer: ViewRenderer,
editable: true,
width: 200,
},
],
[]
);
const [context, setContext] = useState({ cellValue: 1 });
const gridApiRef = useRef();
return (
<React.Fragment>
<p>Context value: {JSON.stringify(context)}</p>
<button
onClick={() => {
setContext({ cellValue: context.cellValue += 1 });
gridApiRef.current.refreshCells({force: true});
}}
>
Increment
</button>
<div style={{ width: '100%', height: '100%' }}>
<div
style={{
height: '400px',
width: '200px',
}}
className="ag-theme-alpine test-grid"
>
<AgGridReact
onGridReady={(e) => {
gridApiRef.current = e.api;
}}
context={{ appContext: context }}
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
</div>
</React.Fragment>
);
};
render(<Grid />, document.querySelector('#root'));
I am using react-paypal-js for the payments in the code as follows (Next.JS)
import { useEffect } from "react";
import {
PayPalScriptProvider,
PayPalButtons,
usePayPalScriptReducer
} from "#paypal/react-paypal-js";
import {
Badge,
Button,
Center,
Flex,
Heading,
Image,
Link,
Stack,
Text,
useColorModeValue,
} from '#chakra-ui/react';
const ButtonWrapper = ({ type }: any) => {
const [{ options }, dispatch] = usePayPalScriptReducer();
useEffect(() => {
dispatch({
type: "resetOptions",
value: {
...options,
intent: "subscription",
},
});
}, [dispatch]);
return (<PayPalButtons
createSubscription={(_data, actions) => {
return actions.subscription
.create({
plan_id: "P-3RX065706M3469222L5IFM4I",
})
.then((orderId) => {
return orderId;
});
}}
style={{
label: "subscribe",
color: "silver"
}}
/>);
}
export default function CheckoutPage() {
return (
<Center py={6}>
<Stack
borderWidth="1px"
borderRadius="lg"
w={{ sm: '100%', md: '540px' }}
height={{ sm: '476px', md: '20rem' }}
direction={{ base: 'column', md: 'row' }}
color={"white"}
// bg={useColorModeValue('white', 'gray.900')}
boxShadow={'2xl'}
padding={4}>
<Stack
flex={1}
flexDirection="column"
justifyContent="center"
alignItems="center"
p={1}
pt={2}>
<Heading fontSize={'2xl'} fontFamily={'body'}>
Checkout
</Heading>
<PayPalScriptProvider options={{
"client-id": "test",
components: "buttons",
intent: "subscription",
vault: true,
}}>
<ButtonWrapper type="subscription"></ButtonWrapper>
</PayPalScriptProvider>
</Stack>
</Stack>
</Center>
);
}
But due to dark mode on the website, the buttons appear to be really weird and I tried changing the color with classnames but it doesn't change to black.
I doubt if we can do anything to change the color but it seems as if this is not the issue if I plan to use the script in browser render as shown here
Please help me out on how can I change the background color to black
Updated image:
Using this Storybook demo as a simpler starting point, you can just add a black background div:
<div style={{ maxWidth: "750px", minHeight: "200px", backgroundColor: "black"}}>
<PayPalScriptProvider
options={{
"client-id": "test",
components: "buttons",
intent: "subscription",
vault: true,
}}
>
<ButtonWrapper type="subscription" />
</PayPalScriptProvider>
</div>
This seems to produce what you want. It's only viable for Subscriptions, not one-time checkouts, because for Subscriptions the black "Debit or Credit Card" button does not open an inline form.
For one-time payments, if including that black button the inline form it expands would have dark text that does not look correct on a dark background. The only viable option for a dark background site that includes this black button would be to put the buttons within a light-colored well, similar to the following (using plain HTML/JS to keep this example simple and universal, but the same can be done with react)
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=USD"></script>
<div id="paypal-button-container" style="background-color:white; padding:5px; border-radius:5px;"></div>
<script>
paypal.Buttons({}).render('#paypal-button-container');
</script>
On a dark background page, this gives:
I'm working on MapBoxgl and I want to add several markers.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href=" /assets/css/bootstrap.min.css " rel="stylesheet" />
<link href=" /assets/css/mapbox-gl.css " rel="stylesheet" />
<link href=" /assets/css/main.css " rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="/assets/js/mapbox-gl.js"></script>
<script src="/assets/js/map-style.js"></script>
</body>
</html>
This is map-style.js:
var map = new mapboxgl.Map({
container: 'map',
center: [57.3221, 33.5928],
zoom: 5,
style: style
});
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [30.61, 46.28]
},
properties: {
title: 'point 1',
description: 'point 1 Description',
message: 'point1',
iconSize: [25, 25]
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [30.62, 46.2845]
},
properties: {
title: 'point 2',
description: 'point 2 Description',
message: 'point 2',
iconSize: [25, 25]
}
}]
};
map.on('load', function () {
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'markers';
el.style.backgroundImage = 'url(assets/marker-azure.png)';
//el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
});
And following is main.css portion related to map and marker:
#map { position:absolute; top:0; bottom:0; width:100% }
.markers {
display: absolute;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
So, my problem is that when I add width property to markers, their icon be displayed correctly (with a bit stretch) but they are in wrong coordinate and move on zoom, like picture below:
On the other hand, if width property is eliminated, they are in right place and does not move on zooming, but they are very stretched and in fact as wide as screen (following image):
It's noteworthy that I've used bootstrap. Can it be the reason of this? If not, what's the problem?
Thanks
import 'mapbox-gl/dist/mapbox-gl.css';
Adding import css works for me.
I found the solution and share it here with others who will encounter this problem. The problem caused because of using a not-most-recent version of the library. After upgrading to the latest release, I could get rid of that problem.
Note that these kinds of problems sometimes occur, when you use npm. Make sure that the library is downloaded completely and It's the latest release.
Latest releases of MapBox can be found at here.
had similar issue, the marker seemed to change position on zoom in/out, fixed it by setting offset, thought to share if it can help others, here is the fiddle
// add marker to map
var m = new mapboxgl.Marker(el, {offset: [0, -50/2]});
m.setLngLat(coordinates);
m.addTo(map);
(Using mapbox 1.13.0)
I had a similar issue where the popups weren't displaying and would change position based on zoom.
Mapbox officially states that you need to include the css file to have markers and popups work as expected.
https://docs.mapbox.com/mapbox-gl-js/guides/install/
HOWEVER, you can also copy that css directly into a component and use that as an element. For example:
export default function MarkerMapTest(props) {
const mapContainer = React.useRef(null)
const map = React.useRef(null)
const elemRef = React.useRef(null)
React.useEffect(() => {
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/dark-v10",
center: [151.242, -33.9132],
zoom: 14,
})
const marker = new mapboxgl.Marker({
element: elemRef.current,
})
.setLngLat([151.242, -33.9132])
.addTo(map.current)
}, [])
return (
<div
style={{ width: 600, height: 600, backgroundColor: "gray" }}
ref={mapContainer}
>
<div
style={{
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: "red",
position: "absolute", // !
top: 0, // !
left: 0, // !
}}
ref={elemRef}
/>
</div>
In my case the svg I used had some space around the real content. That way it seemed for me that the marker was moving. A simple fix was to remove the space around the content (e.g. with the "Resize page to drawing or selection" option of inkscape: https://graphicdesign.stackexchange.com/a/21638)
Also it is important to set display: block on the svg-marker. See: https://stackoverflow.com/a/39716426/11603006
I cannot get the button to close the Modal, or for the click outside of the modal to close the window. I do not get an error and I have the same problem using a simple Controller, or the ControllerAs syntax.
My sample Modal code:
angular.module('MyApp').controller('TestCtrl', ["$scope", "$mdDialog",
function($scope, $mdDialog) {
var alert;
$scope.showInfoModal = showGameInfoModal;
// Internal method
function showGameInfoModal(schedule) {
$scope.schedule = schedule;
alert = $mdDialog.show({
clickOutsideToClose: true,
disableParentScroll: true,
escapeToClose: true,
scope: $scope, // use parent scope in template
preserveScope: true, // do not forget this if use parent scope
// Since GreetingController is instantiated with ControllerAs syntax
// AND we are passing the parent '$scope' to the dialog, we MUST
// use 'vm.<xxx>' in the template markup
templateUrl: 'Modules/Test/Test2.html',
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
};
},
controllerAs: 'dc'
});
}
}
]);
And then the Partials HTML:
<md-content>
<md-toolbar flex layout="row" layout-align="center">
<h5>{{schedule.GameDate</h5>
</md-toolbar>
<section layout="column" layout-align="center">
<div ng-init="coords={latitude: false, longitude: false}">
<gm-map options="{center: [43.6576221, -79.607505], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
<gm-marker options="{position: [43.6576221, -79.607505], draggable: false}">
<gm-infowindow options="{content: 'Max Ward 2'}"></gm-infowindow>
</gm-marker>
</gm-map>
</div>
</section>
<section>
<div class="md-actions">
<md-button ng-click="dc.closeDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
</div>
</section>
</md-content>
In searching for more examples, I found that I missed the <md-dialog> tags.
<md-dialog aria-label="Game Info and Map">
<md-content>
<md-toolbar flex layout="row" layout-align="center">
...
</md-toolbar>
</md-content>
</md-dialog>
I'm using asp.net mvc to create a webpage that renders a jqGrid for data in my azure table. The grid will callback into my controller and using the debugger, I can visually verify data is being generated correctly. The issue is that once the data is returned as a JSON string, the jqGrid throws this error:
b.jgrid.getAccessor(p, d.cell) is undefined
http://localhost:54758/jquery.jqGrid.min.js
Line 65
I've looked online for documentation but have been unsuccessful in returning anything except what appears to be repository snapshots. I've stripped down my code to only have one column of data (shown below) returned as a string and still nothing.
If I add the line "datatype: 'local'," to my jqGrid options, the error isn't thrown. However, data is still not being rendered either. None of the other questions suggested in "Similar Questions" solved my issue. The data is just an Id field and is a simple C# string.
Below is the aspx file contents used to render the jqGrid:
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
<%--Must load language tag BEFORE script tag--%>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
autowidth: true,
url: '/HouseData/GridData/',
datatype: 'local', <---instead of 'local' I also tried 'jsonstring'
mtype: 'POST',
colNames: ['House Name'],
colModel: [
{ name: 'houseName', index: 'houseName', key: true, width: 80, align: 'right', hidden: false }],
pager: jQuery('#pager'),
rowNum: 20,
rowList: [5, 10, 20, 50],
sortname: 'houseName',
sortorder: "desc",
height: 400,
viewrecords: true,
imgpath: ''
});
});
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div id="main">
<h2>Show House Name</h2>
<div class="disignBoxFirst">
<div class="boxContent">
<%: Html.Partial("HouseDataSearch") %>
</div>
</div>
<hr />
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
</asp:Content>
The function used to compose the json string, contained in the C# file "HouseDataController.cs", is below (initially I didn't have the "datatype" option in the aspx file shown above for the jqGrid):
public JsonResult GridData(string sidx, string sord, int page, int rows, string houseName)
{
//Setup values to return to the view for display of user entered values
ViewData["HouseName"] = houseName;
//Get table data
CloudStorageAccount storageAccount = CloudStorageAccount.FromConfigurationSetting("ConnectionString");
ReportStorageDataServiceContext storageContext = new ReportStorageDataServiceContext(storageAccount.TableEndpoint.ToString(), storageAccount.Credentials);
int houseCount = 0;
IQueryable<HouseDataModel> houses = storageContext.CreateQuery<HouseDataModel>("HouseDataTable").Where(h => h.isAvailable == true);
List<HouseDataModel> queryDetails = new List<HouseDataModel>();
foreach (HouseDataModel house in houses)
{
queryDetails.Add(house);
houseCount++;
}
//Figure out paging
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = houseCount;
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = (from house in queryDetails select new { User = house.houseName }).ToArray()
};
return Json(jsonData);
}
The error message was caught using Firebug. If this is not specific/detailed enough or if it was resolved in another thread please advise.
Thanks!
Try this:
jQuery("#list").jqGrid({
autowidth: true,
url: '/HouseData/GridData/',
datatype: 'local', <---instead of 'local' I also tried 'jsonstring'
mtype: 'POST',
colNames: ['House Name'],
colModel: [
{ name: 'houseName', index: 'houseName', key: true, width: 80, align: 'right', hidden: false }],
pager: jQuery('#pager'),
rowNum: 20,
rowList: [5, 10, 20, 50],
sortname: 'houseName',
sortorder: "desc",
height: 400,
viewrecords: true,
imgpath: '',
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id",
userdata: "userdata",
},
});
I added the jsonReader part. I had the same problem and this seems to fix it.
Try changing the jqgrid's mtype to 'GET' and datatype to 'json':
datatype: 'json'
mtype: 'GET'
and change your GridData controller action's return to:
return Json(data, JsonRequestBehavior.AllowGet);