This is probably an easy one for those who know this thing. :)
Given this:
$(this).fullCalendar('renderEvent',
{
title: 'Class',
start: date,
end: date.setHours(2),
allDay: false
}, true );
Which doesn't work... what's the syntax for setting the end time to two hours past the time that was clicked on? So if the user clicks on 8 AM, I want it to automatically end two hours later, at 10 AM.
And... is it possible to make it so the event length cannot be resized? As in, remove the little UI thing that they can click on to increase or decrease the size?
Thanks!
I figured it out (mostly). in the above example, end: date.setHours(2) of course doesn't work. Upon inspecting the date object passed into dayClick, I found fromNow and when I tried date.fromNow(2), it worked!
The only issue I have now (unrelated to my original question) is that it's prompting me for the event name even though I'm specifying it in the code. Here's the final, working version of what I posted above:
$('#calendar').fullCalendar('renderEvent',
{
id: 0,
title: 'Class',
start: date,
end: date.fromNow(2),
allDay: false
}, true );
Related
I was trying to automate a text submit form using cypress. The 'Create student' button is disabled even after all the fields have been filled
Please see the cypress error
code :
it('should be able to add a new student and update the details, remove from the class and delete the account', function () {
cy.visit(
'https://readingeggs.blake-staging.com/district_ui#/reading/manage-schools/students/195286/new'
)
cy.findByLabelText('First Name').type('ark')
cy.get('#first-name').should('have.value', 'ark')
cy.findByLabelText('Last Name').type('last')
cy.get('#last-name').should('have.value', 'last')
cy.get('[data-test-select-grade]').select('1')
cy.get('#grade-dropdown').should('have.value', '1')
cy.get('[data-test-select-teacher]').select('Lehner, Abbey')
cy.get('#teacher-dropdown').should('have.value', '3068134')
cy.get('[data-test-submit-new-student]').click()
cy.get('#main')
.findByRole('alert')
.should('include.text', `Successfully created a student`)
})
})
Be careful using click({force:true}) as suggested in the error message, there may be another problem that your test will now ignore!
You can first try an assertion that the button is not disabled.
Sometimes the test can run too quickly, and the web page has not yet enabled the button before the test tries to click it.
Adding .should('not.be.disabled') will retry this check for up to 4 seconds, which should be enough time for the page to complete changes.
cy.get('[data-test-submit-new-student]')
.should('not.be.disabled')
.click()
If using .should('not.be.disabled') does not work (I agree, it should be the first thing to try), try adding a trigger event to each input - in case the .type() command is not triggering the validation change.
cy.findByLabelText('First Name').type('ark').trigger('change')
cy.get('#first-name').should('have.value', 'ark')
cy.findByLabelText('Last Name').type('last').trigger('change')
cy.get('#last-name').should('have.value', 'last')
cy.get('[data-test-select-grade]').select('1').trigger('change')
cy.get('#grade-dropdown').should('have.value', '1')
cy.get('[data-test-select-teacher]').select('Lehner, Abbey').trigger('change')
cy.get('#teacher-dropdown').should('have.value', '3068134')
cy.get('[data-test-submit-new-student]').click()
If still no joy, use .click({force:true})
By the way, cy.get('[data-test-select-grade]').select('1') looks a bit suspicious. The select command can take a display value as a string or a position value as a number. The screenshot shows "K" is selected, so I would expect either of these to work
cy.get('[data-test-select-grade]').select(1) // number passed
// or
cy.get('[data-test-select-grade]').select('K') // string passed
One option would be to use {force: true} with click().
it('should be able to add a new student and update the details, remove from the class and delete the account', function () {
cy.visit(
'https://readingeggs.blake-staging.com/district_ui#/reading/manage-schools/students/195286/new'
)
cy.findByLabelText('First Name').type('ark')
cy.get('#first-name').should('have.value', 'ark')
cy.findByLabelText('Last Name').type('last')
cy.get('#last-name').should('have.value', 'last')
cy.get('[data-test-select-grade]').select('1')
cy.get('#grade-dropdown').should('have.value', '1')
cy.get('[data-test-select-teacher]').select('Lehner, Abbey')
cy.get('#teacher-dropdown').should('have.value', '3068134')
cy.get('[data-test-submit-new-student]').click({force: true})
cy.get('#main')
.findByRole('alert')
.should('include.text', 'Successfully created a student')
})
Simple thing happens with a Firefox 22 and higher: if you have a frame with a name "name1" and you renamed it to "name2" then the "name1" still will be present in a window.frames array but it's value would be undefined. The same thing happens if you call delete window.frames["name1"];.
The problem is that you couldn't directly place any item into frames array with a name "name1" in this case. Also you couldn't add the property name1 into that window object.
The only way to do this is change the some frame name to "name1". However our current application logic need to access the same frame both by "name1" and "name2" in the same time.
Here the sample: http://jsfiddle.net/tigeral/2VwFV/2/ .Please compare results in both Firefox 21 and 22.
Does anyone know a workaround how to make follow code working ?
window.frames["name1"].name = "name2";
// what I need to do here ?
window.frames["name1"] = window.frames["name2"];
alert(window.frames["name1"].name);
P.s. the similar question was already posted on Stack Overflow, but my case requires a different solution. window.frames["frame_name"] doesn't work in Firefox when frame has been removed and readded
I have found a solution.
If you need to force set the frames["name1"] value just once you can use Object.defineProperty(frames, "name1", {value: frames["name2"]}); sentance.
But if you also want to unlock the frames["name1"] value for the future changes then you'd better use Object.defineProperty(frames, "name1", {value: frames["name2"], writable: true});
You can check this solution here: http://jsfiddle.net/2VwFV/3/ or in sample below:
window.frames["name1"].name = "name2";
Object.defineProperty(frames, "name1", {writable: true});
window.frames["name1"] = window.frames["name2"];
alert(window.frames["name1"].name);
More info about Object.defineProperty(...) method could be found by follow link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
In ExtJS 4.1.3 we have a filter setup on a text field to run 'onchange' of the text field. This is the function onchange:
var store = this.getStore();
value = field.getValue();
if (value.length > 0) {
// Param name is ignored here since we use custom encoding in the proxy.
// id is used by the Store to replace any previous filter
store.filter({
id: 'query',
property: 'query',
value: 'LegalName|#|#|' + value
});
} else {
store.clearFilter();
}
Now, we are running into an issue where when I type something in the text field too fast I am getting errors and am getting stuck on a load screen. When I type in the same thing slowly it works. Considering typing it in slowly makes it work, but fast makes it fail and the data coming back from the server is the same in both instances, I'm assuming it's an issue with ExtJS. Has anyone seen an issue like this? What are potential problems and fixes. I can't figure out why it's breaking. Here is the trail I get:
Uncaught TypeError: Cannot convert null to object ext-all-debug.js:51752
Ext.define.cancelAllPrefetches ext-all-debug.js:51752
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8638
Ext.define.continueFireEvent ext-all-debug.js:25117
Ext.define.fireEvent ext-all-debug.js:25095
Ext.define.clear ext-all-debug.js:44718
Base.implement.callParent ext-all-debug.js:3735
Ext.define.clear ext-all-debug.js:47485
Base.implement.callParent ext-all-debug.js:3735
PageMap.Ext.Class.clear ext-all-debug.js:52358
Ext.define.filter ext-all-debug.js:51377
Ext.define.onTextfieldChange /TEST/app/view/ContractGrid.js?_dc=1354553533935:447
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8638
Ext.define.continueFireEvent ext-all-debug.js:25117
Ext.define.fireEvent ext-all-debug.js:25095
Ext.override.fireEvent ext-all-debug.js:58382
Ext.define.checkChange ext-all-debug.js:30310
call ext-all-debug.js:8426
Any thoughts?
I was able to fix the issue by changing the buffer setting on the store. Looks like I had set 'buffered' to true in the store and once I removed it, the issue went away.
I am stuck here - last thing to get done before going production.
The date coming from oracle is on the following format: "8/14/2012 10:46:48 AM"
I am using the following on the jqgrid:
{ name: 'CreationDate', index: 'CreationDate', formatter: 'date', formatoptions: { 'srcformat': 'ISO8601Long', 'newformat': 'm/d/Y - g:i A' }, sorttype: 'date', width: 95, align: 'right', resizable: false },
I have the following displaying on the grid: "08/14/2012 - 10:46AM"
The problem is when I try to use the advanced filter it doesn't work. My guess is because of the time, any suggestions on how to solve this?
UPDATE
Oleg, I copied the code you posted with your changes and still nothing. I am using the advanced filter. Thanks for all your help, I really, really appreciate it. I wish I could send you some beer to Germany :o)
I think the main problem is that you use g format inside of newformat which are not currently supported in jqGrid for the local filtering/searching. You can try to use H format instead. Alternatively you can use the fix which is described in the answer.
UPDATED: The demo shows that one can use Advanced Searching dialog with formatter: 'date', formatoptions: { 'srcformat': 'ISO8601Long', 'newformat': 'm/d/Y - g:i A' } after applying the fix which I referenced. You can just try the demo and input the same data (10/04/2012 - 5:55 PM) which I used on the picture below. You have to see the following results:
UPDATED 2: During preparing of another demo for you I found one more bug in internal parseDate function. The problem is that the current implementation of parseDate function works correct only if the date which are need be parsed contain the same elements as specified the format. For example the date 10/04/2012 will be incorrect parsed using 'm/d/Y - g:i A' format. To fix the bug one can include the line
if(typeof date[k] === "undefined") { continue; }
as the first line of the body of the loop. The fixed version of jquery.jqGrid.src.js you can get here.
In the demo I use multipleSearch: true option of jqGrid searching. As the result one can specify the interval of dates like
10/04/2012 <= x <= 10/05/2012
The corresponding Searching Dialog will look like on the picture below and you will be able to filter by intervals of dates
After having exported data using jqGridExport we import using jqGridImport. First problem was that the bottom bar options did not come back so I added that code after. So code looks like:
$("#list").jqGridImport({imptype: 'jsonstring', impstring: gridSettings})
.jqGrid('navGrid','#pager', { edit: false, add: false, del: false, search: true, refresh:true },
{},{},{},{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true},{});
The critical part of the gridSettings string is:
"postData":{"_search":true,
"nd":1301031279941,
"rows":20,
"page":1,
"sidx":"a.ID",
"sord":"asc",
"filters":{"groupOp":"AND","rules": [{"field":"fname","op":"bw","data":"T"}]}
}
Everything comes up fine except for the search. The one line of search from postData above is correct but there is a second search line, which I can only describe as the default search line. If I go in and remove that line from the multiple search box everything is as it should be.
So my question is first, why does multipleSearch not come back up when I restore using jqGridImport?
Second is there a way to programmatically remove the second search line?
The behavior of the bottom bar with the navigator is correct because it is implemented not as the part of grid. So you really have to set it additionally. You can write you own export and import of the settings.
The situation with the additional last line which will be added in the searching dialog is really a small problem which can be fixed with the following code:
var grid = $("#list");
...
grid.searchGrid(prmSearch);
if (typeof(grid[0].p.postData.filters) === "string" &&
grid[0].p.postData.filters.length>0) {
$("#fbox_"+grid[0].id).searchFilter().del();
}
$("#fbox_"+grid[0].id).searchFilter().close();
You can see the corresponding demo here. It is a small modification of the demo from my another old answer.
By the way the new filter which will be used in the next version of jqGrid will not have the problem (see the demo here).