I am a bit stumped as to why my Kendo Autocomplete is not posting to the server.
Can anyone see a problem with this?
#(Html.Kendo().AutoComplete()
.Name("LinkSearch")
.Filter("contains")
.MinLength(3)
.DataTextField("value")
.DataSource(source => {
source.Read(read =>
{
read.Action("_LinkSearch", "Record", new { area="record" })
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
)
<script>
function onAdditionalData() {
return {
searchTerm: $("#LinkSearch").val()
};
}
</script>
As far as I am concerned this should work. This is based on the examples on the Kendo page. The rest of the Kendo controls on the page work without any issues.
The box renders perfectly fine, but just doesn't post to the server when the user types in it and therefore never returns any data.
I have a breakpoint on the Action and am monitoring the network traffic, but it never even tries to hit the server.
Cheers
Gareth
It turns out that the problem was due to the Routing somewhere.
Record is a base controller and by changing the controller in the read.Action to the controller that was inheriting from the base controller it worked fine. As far as I am aware it should have worked either way, but for some reason it doesn't.
It took a couple of us a good couple of hours to get to the bottom of it.
Related
I've got a modal window that when you click 'Add', it does its thing, dismisses, and then when the promise is resolved, publishes some events that tell relevant components to update:
this._viewControl.dismiss().then(() =>
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
Problem is, sometimes it works and they update their views, sometimes not. The modal always dismisses and the events fire though.
Am I doing something fundamentally wrong here?
Thanks.
Problem is, sometimes it works and they update their views, sometimes
not.
As you can read in this answer, Application state change is caused by three things:
1) Events - User events like click, change, input, submit, …
2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -
3) setTimeout(),setInterval(), because JavaScript
It turns out that these are the only cases when Angular is actually interested in updating the view.
So if you want to update other things outside Angular way, you will have to let Angular know that something has changed and needs to we aware of updating things. You can do this by first importing ngZone like this:
import { ..., NgZone } from '#angular/core';
Declaring it in your constructor like this:
constructor(..., private ngZone: NgZone ) { //... }
And then surrounding your code inside a zone
this._viewControl.dismiss().then(() =>
this.ngZone.run(() => {
// Execute here what you want and Angular will update the view for you.
// ...
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
});
Have you tried onDismiss ?
this._viewControl.onDismiss(() => {
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
So, it turns out, if I empty out my collection when I'm refreshing, so..
e.g
updatePage() {
this.myCollection = [];
this.someService.getItems().then(items => {
this.myCollection = items;
});
}
then the page always shows the update. So I'm going to put this one down to a timing/change detection bug in Angular 2 and move on!
I have a simple casperjs test to submit a search form on my homepage. Then I assert that the title on the landing page is correct.
Works fine on my computer (OSX 10.9.2) but on my colleague's laptops (a Win 7 and Win 8), the test fails randomly because casper "thinks" it is still on the search page.
casper.test.begin('Search', function(test) {
casper.start("http://localhost:8080/site", function() {
this.fill(searchForm, { query: goodQuery }, true);
});
casper.then(function() {
// sometimes fails, says it's "My Project" main title
test.assertTitle('Search Result', 'Search result title is ok');
});
}
Introducing a casper.waitFor(3000) before checking the page title does not change the outcome. I've also tried to replace the then step by a waitForUrl, but it fails after 5 secs, saying it is still on the current page.
Plenty of other tests work fine on all computers but it's the only one with form submition.
Any hints on how to solve or properly work around this? I'd rather not simulate a click on the submit button (more coupling to the form internals) if possible (but it would be okay I guess).
Thanks
$ casperjs --version
1.1.0-beta3
$ phantomjs --version
1.9.7
EDIT: submitting the form and waitForUrldid not help. I found out that the test actually runs fine on its own, even on the Windows 7 machine. But when I run two tests:
01 search.js (the one described above)
02 menu.js (a simple one, merely containing assertExists)
'search.js' fails most of the time... and sometimes 'menu.js' fails instead! I suspect some mishandled concurrent access, although it consistently works on OSX. I must be doing something wrong. Both tests have the same structure:
casper.test.begin('Some test', function(test) {
casper.start(someUrl, function() {
// some test
});
casper.run(function() {
test.done();
});
});
Any clue?
Try :
casper.test.begin('Search', function(test) {
casper.start("http://localhost:8080/site", function() {
this.fill(searchForm, {
query: goodQuery
},false);
this.click("your selector for submit button");
});
casper.then(function() {//you should use waitForUrl/Selector/Text() instead
// sometimes fails, says it's "My Project" main title
test.assertTitle('Search Result', 'Search result title is ok');
});
casper.run(function() {
this.test.comment('------ Tests over ----\n');
test.done();
});
});
It's better to submit the form by clicking. Sometimes (often) it doesn't pass putting the fill arg at true. Just put the correct selector for the submit button.
You should wait for an item to appear on the following page. I would change your code to the following:
casper.test.begin('Search', function(test) {
casper.start("http://localhost:8080/site", function() {
this.fill(searchForm, { query: goodQuery }, true);
});
casper.waitForSelector('#someSelectorOnNextPage', function() {
test.assertTitle('Search Result', 'Search result title is ok');
});
}
I also experience same issue. Suprisingly adding empty then() handler fixes that in v1.1.0-beta3. I don't think this is expected behavior though:
casper.test.begin('Search', function(test) {
casper.start("http://localhost:8080/site", function() {
this.fill(searchForm, { query: goodQuery }, true);
});
// Do nothing here, just call it as a placeholder
// Here http://localhost:8080/site sends us to the next endpoint
casper.then(function() {});
// Now this is the final page we actually want to assert
casper.then(function() {
test.assertTitle('Search Result', 'Search result title is ok');
});
}
EDIT:
Although question author says casper.waitForUrl() didn't work for them, it did work for me as an alternative solution.
What does look strange is that in verbose mode whatever returns a 301 status code along with Location Header is recognized as HTTP 200 response by Casper.
EDIT 2:
Well obviously it doesn't happen every time, but what I noticed is that Casper sometimes doubles the previous response (that's why I thought it recognizes some specific HTTP codes as 200 mistakenly and that's why author's code functioned as if it stayed on same page after form submission) and sometimes not.
waitForUrl() fixes that obviously but there is still some underneath issue in Casper which scares me a bit and I hope I will find some time to report it with all the dumps to Casper issue tracker.
I'm a novice programming trying to put together a web application with Angular, node.js, and the graph database neo4j.
I would like to load content from my database dynamically based on the user selecting (or rejecting) terms (clicking buttons). Every time a button is clicked the relevant term is added to an array (either exclude or include). The idea is a new call to the database would be made each time a new term is selected.
I'm stuck right now on how to go about making calls to the database to retrieve the content. I'm trying to watch the arrays for changes using $watch. Something is going wrong and I'm having issues troubleshooting the problem.
Here is the controller code:
angular.module('myApp.controllers', []).
controller('content',function($scope,$http, queryTerms, $watch){
//watch arrays of terms for changes and fetch results based on what is selected
$watch(function() { return angular.toJson( [ queryTerms.includedTerms, queryTerms.excludedTerms ] ) },
function() {
$http({
method:'get',
url:'/query/getContent',
params: {includeTerms:queryTerms.includedTerms , excludeTerms:queryTerms.excludedTerms}
}).
success(function(data){
//feed content data to display for viewing
}).
error(function(data){
$scope.test = "Error :("
});
});
});
I'm getting the following error when I use $watch:
Error: Unknown provider: $watchProvider <- $watch
Is this a terrible stupid way to go about this in general? Any advice would be greatly appreciated- I'm learning as I'm going and so far the advice I've gotten on here has be amazing. Thanks!
Use $scope.$watch instead.
controller('content', function ($scope, $http, queryTerms) {
$scope.$watch(function () {
return angular.toJson([queryTerms.includedTerms, queryTerms.excludedTerms])
},...
While I managed to get a working AJAX call, it won't works with my already created actions, not on a newly created one.
My Typoscript looks like this:
lib.AJAXPrototype= PAGE
lib.AJAXPrototype {
typeNum = 896571
config {
disableAllHeaderCode = 1
xhtml_cleaning = 0
admPanel = 0
debug = 0
no_cache = 1
additionalHeaders = Content-type:text/html
}
}
AJAX_Plugintyp < lib.AJAXPrototype
AJAX_Plugintyp {
typeNum = 89657201
10 < tt_content.list.20.myext_myplugin1
}
My AJAX call looks like this:
$.ajax({
url: "index.php",
data: "tx_myext_myplugin1[controller]=Mycontroller1&tx_myext_myplugin1[action]=ajax&type=89657201",
success: function(result) {
alert(result);
}
});
My ajaxAction:
/**
* action ajax
*
* #return void
*/
public function ajaxAction() {
$test = 'sometext';
$this->view->assign('test', $test);
}
My Ajax.html (View/Output):
<f:section name="main">
<f:flashMessages />
<div id="ajaxd">{test}</div>
</f:section>
I won't get anyoutput from this, I created this Action just for the Ajax Output. However, if I use any other controller/action combination, it works!
What could I possibly have done wrong with the new Action?
Two things about ajax and Extbase
First Placing JS directly in the view often fails, because Fluid is trying to parse JavaScript's arrays as own array/variable. Very uncomfortable. Solution is placing JS in separate files (therefore I asked you a question about this). See this question/answer
Second thing is Firebug (or other similar tool). With ultra long paths of Extbase links it's easy to make some annoying mistake in it, and then you need to compare carefully char by char.
Firebug will help you to find AJAX problem really fast, just open it switch to the Net tab and then you'll see what is sent with ajax after some action and what it returns. Most probably you were receiving something like:
Uncaught TYPO3 Exception:
The action "xxxxx" (controller "Yyyy") is not allowed by this plugin...
But the only way to check it is debugging with Firebug :)
Okay, so RIGHT NOW it works.
This might sound crazy, but I didn't really change anything for it to work.
I did forget to add it to the ext_localconf.php:
Tx_Extbase_Utility_Extension::configurePlugin(
$_EXTKEY,
'Myplugin1',
array(
'Mycontroller' => 'list, ajax',
),
// non-cacheable actions
array(
'Mycontroller' => 'list, ajax',
)
);
However, I did this yesterday and afterwards, it didn't work. Today I tried some random editing in the typoscript again (changing pagetype etc.) and suddenly it worked! However, I went back to the exact state I had yesterday and it still worked.
I'm confused, no idea if I just had to rearrange the typoscript or if it had to write it again for some reason, but I'm happy it works now!
i know its sounds a bit crazy, but so many clients have problems with not saving their article properly.
I just wanted to use a simple method to trigger the onclick of the APPLY button inside a joomla article in edit mode.
Primarily back end editing as i have a good admin template that allows me to show clients the bare bones.
I know that by clicking apply the page reloads but thats better than nothing.
How on earth do i add do this?
I was hoping something like this would work but i dont quite know how to trigger a button that seems to reside inside a toolbar function of some sort.
I have this:
<script type="text/javascript">
$(document).ready(function() {
$('??????').trigger('click');
});
</script>
What would replace the question marks?
Also i know i would need to put a timer into the jquery code but how do i get the link below to trigger?
http://mydomain.com/administrator/index.php?option=com_content§ionid=1&task=edit&cid[]=97
In the toolbar.content.html.php file joomla has this:
class TOOLBAR_content
{
function _EDIT($edit)
{
$cid = JRequest::getVar( 'cid', array(0), '', 'array' );
$cid = intval($cid[0]);
$text = ( $edit ? JText::_( 'Edit' ) : JText::_( 'New' ) );
JToolBarHelper::title( JText::_( 'Article' ).': <small><small>[ '. $text.' ]</small></small>', 'addedit.png' );
JToolBarHelper::preview( 'index.php?option=com_content&id='.$cid.'&tmpl=component', true );
JToolBarHelper::save();
/////////////////////////////////////
JToolBarHelper::apply(); // < // THIS IS WHAT I WANT TO TRIGGER
/////////////////////////////////////
if ( $edit ) {
// for existing articles the button is renamed `close`
JToolBarHelper::cancel( 'cancel', 'Close' );
} else {
JToolBarHelper::cancel();
}
}
...... more stuff here
}
I know this might sound crazy but wouldnt it be great if autosave could happen even without a reload, but i guess that would mean posting all the data using jquery rather than the php post and reload page method.
Anyways im not expecting a miracle here but if anyone could help that would be great.
Cheers in advance
John
PS:
i just tried something like this hoping maybe it will work but it just reloads the page:
function autosave()
{
window.location = "index.php?option=com_content§ionid=<?php echo $_GET['sectionid'];?>&task=edit&cid[]=<?php echo $row->id;?>"
}
You won't be able to do it without forcing a reload unless you decide to re-write the whole of com_content with an ajax implementation.
Looking at the code you've posted I guessing Joomla! 1.5 - which by default has MooTools 1.12 or 1.2.5 (if you enabled the MooTools upgrade plugin in later versions of 1.5.x) - so more of a question but why not use that?
You will have to modify the admin template to embed the JS you need, 1.5 has few triggers and none that are really worth using in the admin screens (unless you're up for a fair bit of PHP coding)
Somewhere in the <head> tag of com_content's Article view you will need to add this:
<script type="text/javascript">
var interval = 30 //seconds
var timer = setTimeout(submitbutton('apply'),(interval * 1000));
}
</script>
Please note I haven't tried this just typed it straight into here.
Since you're on 1.5 have you tried the Simple Content Versioning extension - it has autosave functionality that appears to be what you want - and probably works whereas who knows with my code in #3.