I need to replace a url querystring, the part after ?, without refreshing/navigating to a new page. This is to make my page more seo/book mark friendly.
This functionality is available in angular with $location.path but Kendo does not fully support angular and referencing $location breaks the app navigation.
What is the KendoUI equivalent of $location.path?
I went with this solution that seems to work.
$timeout(function () {
window.history.replaceState({
path: newurl
}, '', newurl);
}, 500);
Related
I am new to UI coding and started using react-admin for putting some simple pages. Everything went well and we are able to host pages correctly. But we have noticed random issues where the background image is filling up the entire screen or sometimes the whole page gets reduced to the hamburger menu. I have disabled the registerServiceWorker to stop having my pages in cache. Not sure if this is causing the weird UI behavior.
I don't know why you get those issues, the description is way too generic and it seems you don't have any idea what the problem can be, probably due to being new to the area. Either way the kind of problem you appear to have is probably related to CSS which is a way give style to your page. But React Admin doesn't use CSS directly, you can use it that way, but for more dynamic way to style the page the Material-ui library uses a thing called JSS to apply the styles.
There are many libraries that are being used together in order to produce React Admin, you should have an understanding of the most important ones in order to do something fancy. My advice to you since you are new, and you pretend to use React Admin, first use what React Admin offers and when you feel comfortable using that components and have a general grasp how the framework works, after that start implementing your own components that don't have a direct relation to React Admin but use some of the same libraries of React Admin.
Also check if you are creating a React Admin app using the <Admin> component or are embedding React Admin in another app since the second is more probable to produce bugs.
After some debugging, I think i figured out the cause of this issue. I had a custom button to duplicate a row (basically post a create and route to edit page on the new id). For some reason, the rendering of that button seems to have caused this issue inconsistently. The actual button works fine but causes this inconsistent behavior. Below is the code for that button. Is there any issue with the below?:
export default class DuplicateButton extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = ({ redirect: false });
var redirectPath = '';
}
handleClick = (props) => {
var
{
push, record, resourceName
} = this.props;
let tempRecord = record;
var result = '';
console.log(this.props);
var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
result = resp.data;
let routePath = '/' + this.props.resource + '/' + result.id;
console.log(routePath);
this.redirectPath = routePath;
this.setState({ redirect: true });
return result;
});
}
render() {
if (this.state.redirect) {
console.log('Redirect to Edit page');
return <Redirect push to={this.redirectPath} />;
}
return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}
EDIT: I have abandoned the conditional structure and just create the window fresh each time. That works. Still wondering whether refresh() works with urls though.
I have a conditional structure that resembles this one:
What is the proper way to load new content into a kendo window?
If the kendo window already exists, refresh() the window rather than create it anew.
The difference is, I'm using an iframe with url.
The problem: I set a different query string with setOptions before invoking refresh(), but the original url is being requested from the server again.
if (!kwindow) {
kwindow = $("#messagewindow").kendoWindow({
iframe: true,
width: "400px",
height: "600px",
title: "original title",
content: "foo.htm?id=1",
type: "GET"
}).data("kendoWindow");
}else {
kwindow.setOptions({
iframe: true,
type: "GET",
title: aDifferentTitle,
url : "foo.htm?id=2"
});
kwindow.refresh();
}
kwindow.open();
I know the the setOptions method is passing the options to the kendo window because the titlebar of the window correctly shows aDifferentTitle. However, looking at the network traffic monitor, the url requested from the server is foo.htm?id=1 but it should be foo.htm?id=2.
I cannot see what is wrong with my code and would be grateful if someone could point out the error to me.
The answer you were looking for was
kwindow.options.content.url = url;
Then the refresh icon / methods will work on the new url
To refresh from different URL you need to pass this through an option object to the refresh method (you do not need to use setOptions). Here is snippet from the documentation:
var windowObject = $("#window").data("kendoWindow");
windowObject.refresh("/feedbackForm");
windowObject.refresh({
url: "/feedbackForm"
});
I used the following and it seems to work in an MVC project:
window.setOptions({
title: "New Title"
});
window.refresh({
url: "/ControllerName/Action"
});
window.open();
These are my first steps with the Firefox AddOn SDK. What I'm trying to create is a simple 'settings dialogue'. I thought about a html page containing forms for the values and a submit button. Following the first mozilla tutorials I created a widget:
var widget = require('widget').Widget({
label: 'Settings',
id: 'settings',
//panel: text_entry
contentURL: data.url('images/stgfavicon.ico'),
contentScriptFile: data.url('scripts/submit.js'),
onClick: function() {
tabs.open(data.url('forms/settings.html'));
}
});
But since settings.js is not the contentScriptFile I got no communication between settings.html and settings.js. Is it possible to get this done without some (complex looking) messaging system? And how to save the values best? A JSON file?
Some links/examples/API names would help me a lot. :)
That's because you're trying to attach your script to the widget (which is not an HTML file). You need to attach it to the actual html file after the tab opens.
tabs.open({
url: data.url('forms/settings.html'),
onOpen: function onOpen(tab) {
tab.attach({ contentScriptFile: data.url('scripts/submit.js'); });
}
});
I haven't tested that out so there may be an error.
You should also look at the simple-prefs module if these are settings that aren't going to be adjusted frequently.
I need to download data using servlet as CSV File.I am passing a parameter by clicking on the navigation tree from ExtJS 4.1 to the servlet via Ajax Request.Is there any alternate way to pass the parameter to the servlet as ajax can't force the open/save dialog to download?I have to pass the parameter by just clicking on the child of navigation tree itself.Can anybody help me pls?
I searched for the solutions and found like hidden Iframe.I don't know how to adapt this into mine?
Thanks a lot in advance.
Use a helper defined within a Namespace. And don't forget to remove it after you are done.
helper.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
Use it like
helper.util.HiddenForm('my/realtive/path', [["fieldname","fieldValue"]]);
If the server answer with a download the save window will popup.
I have no idea why this doesn't work, but none of my custom button actions (tasks) do anything in my component. In my view.html.php file I have:
JToolBarHelper::custom('reports.export_csv', 'csv', '', 'CSV', false);
JToolBarHelper::custom('reports.export_mailchimp', 'mailchimp', '', 'Mailchimp', false);
Then in my ReportsControllerReports file I have 2 methods (not just 2, there are some others but they aren't relevant), export_csv() and export_mailchimp(). Whenever I click the buttons I get a JS error which I assume is preventing the action from executing the code in those methods. Something about "b is undefined". I cannot find any differences between my code and that used in other Joomla (core) components, so if anyone could shed some light on this issue it would be greatly appreciated (as usual, the Joomla forums are totally useless).
#Cfyzz solution works.
I added this to view file:
<script type="text/javascript">
Joomla.submitbutton = function(pressbutton) {
switch(pressbutton) {
case 'google':
window.location = '<?=JRoute::_( 'http://google.com', false );?>';
break;
case 'stackoverflow':
window.location = '<?=JRoute::_( 'http://stackoverflow.com', false );?>';
break;
}
}
</script>
and this in view.html.php
JToolBarHelper::cancel('stackoverflow', 'Go Overflow');
JToolBarHelper::custom('google', 'checkin', '', 'Go Google', false);
Obviously you dont have to use "JRoute::_(" in this situation. I replaced inner links with 2 samples so it`s easier to understand.
You should override the Joomla's JS framework behavour
You should use the function in your custom JS file:
Joomla.submitbutton = function(pressbutton) {
switch(pressbutton) {
case 'export_cvs':
URL = JURI::base.'index.php?option=yourController&task=export_cvs&....
$.ajax({
url: URL,
type: post, etc
});
}
}
In my component everytrhing is ok and working properly