My JQuery Toggle not functioning properly - toggle

Why is my jQuery toggle function not working?
See this demo: http://project.4greality.com/category/budget-homes
My Code:
<script>
$(document).ready(function(){
$("a.switchThumb").toggle(function(){
$(this).addClass("swap");
$("div.containerDiv").fadeOut("fast", function() {
$("#containerDiv").fadeIn("fast").addClass("displayToggleNone");
});
},
function () {
$(this).removeClass("swap");
$("div.containerDiv2").fadeOut("fast", function() {
$("#containerDiv2").fadeIn("fast").removeClass("displayToggleNone");
});
});
});
</script>

I think you need something like below to toggle thumbnail and detailed view.
I am not sure why you try to fadeOut the div first and fadeIn the same again and then hide it.
Try below and let me know how it goes,
$(document).ready(function(){
$("a.switchThumb").toggle(function(){
$(this).addClass("swap");
$("#containerDiv").fadeOut("fast", function() {
$("#containerDiv2").fadeIn("fast");
});
},
function () {
$(this).removeClass("swap");
$("#containerDiv2").fadeOut("fast", function() {
$("#containerDiv").fadeIn("fast");
});
});
});

Related

Why my code is failing the npm run test case

const mongoose=require('mongoose');
const assert = require('assert')
describe('Finding records', function () {
var char;
beforeEach(function (done) {
char = new MarioChar({
name: 'Mario'
});
char.save().then(function () {
assert(char.isNew === false);
done();
});
});
it('Finds one record from the database', function (done) {
findOne({ name: 'Mario' }).then(function (result) {
assert(result.name === 'Mario');
done();
});
});
it('Finds one record from the database', function (done) {
findOne({ _id: char._id }).then(function (result) {
assert(result._id === char._id);
done();
});
});
});
The code is to find the records from MongoDB and
I have tried to pass these test case but these test case are failing therefore can someone please tell me where I am making mistake

Loading controller await problem with Ionic

In my ngOnInit page I call a function to present a Loading and then call my service to load data.
The problem is that the service call ends before the loading starts.
How is it possibile with await?
loading: any;
...
ngOnInit() {
this.presentLoading();
this.myService.get().subscribe((item)=>{
console.log('dismiss');
this.loading.dismiss();
}, ()=>{
this.loading.dismiss();
})
}
async presentLoading() {
this.loading = await this.loadingController.create({
message: 'Loading...',
duration: 20000
});
console.log('presentLoading')
await this.loading.present();
}
In console i can see:
dismiss
ERROR TypeError: Cannot read property 'dismiss' of undefined....
presentLoading
I’m using Ionic4.
In your case (based on the code) you have presentLoading function that returns a promise (async), so even though inside of it you are using await statements - inside the ngOnInit hook nothing instructs execution to await for the presentLoading.
You could do:
async ngOnInit() {
await this.presentLoading();
this.myService.get().subscribe((item)=>{
console.log('dismiss');
this.loading.dismiss();
}, ()=>{
this.loading.dismiss();
})
}
Also since you are using Onservables it may makes sense to call dismiss inside "completed" function:
async ngOnInit() {
await this.presentLoading();
this.myService.get().subscribe((item)=>{
console.log('dismiss');
}, (error)=>{
console.log(error);
}, (completed)=>{
this.loading.dismiss();
}
})
A note - making ngOnInit an async method does not "hurt", but its best to know a bit more waht implications it has: async/await in Angular `ngOnInit`

How to trigger events on a row in ag-grid?

I am trying to test ag-grid functionality and not able to trigger events.
it('should open Component on double click', () => {
component.gridOptions.api.setRowData(ordersStub);
fixture.detectChanges();
const node = component.gridOptions.api.getRowNode(ordersStub[0].id);
const nodeData = node.data;
const element = (fixture.debugElement.nativeElement as HTMLElement).querySelector(`[row-id="${nodeData.id}"]`);
const onRowDoubleClickedSpy = spyOn(component, 'onRowDoubleClicked');
element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, view: window, cancelable: true }));
expect(onRowDoubleClickedSpy).toHaveBeenCalled();
});
What am I doing wrong?
The event you are dispatching looks fine. So I think you need a delay between when the event is dispatched, and when you expect the component function to be called:
it('should open Component on double click', (done) => {
...
element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, view: window, cancelable: true }));
setTimeout(() => {
expect(onRowDoubleClickedSpy).toHaveBeenCalled();
done();
});
});
You could also use async tests:
it('should open Component on double click', async(async() => {
...
element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, view: window, cancelable: true }));
await fixture.whenStable();
expect(onRowDoubleClickedSpy).toHaveBeenCalled();
}));

context.application.createDocument doesn't work

I want to fill content to a new document (myNewDoc) and not the current document in context.
The following code however is only able to change the content of the current document:
Word.run(function (context) {
var myNewDoc = context.application.createDocument(getDocumentAsBase64());
context.load(myNewDoc);
var range = myNewDoc.getSelection();
range.insertText("<h1>Hello world.</h1>", Word.InsertLocation.start);
return context.sync().then(function () {
myNewDoc.open();
context.sync();
}).catch(function (e) {
console.log(e);
})
}).catch(errorHandler);
How can I edit the content of the new document instead?
Home.html
Replace https://appsforoffice.microsoft.com/lib/1/hosted/office.js to https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
<script
src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.js"
type="text/javascript">
</script>
Home.js
Word.run(function (context) {
var myNewDoc = context.application.createDocument(getDocx());
context.load(myNewDoc);
//this is OK
myNewDoc.properties.customProperties.add("code", "600000");
// this is NG
//var range = myNewDoc.getSelection();
//range.insertText("123", Word.InsertLocation.start);
return context.sync().then(function () {
myNewDoc.open();
}).catch(function (e) {
console.log(e);
})
}).catch(errorHandler);

wait for complete page load does not work as expected in Protractor

I am writing a test for login into non-angular application.
describe('login Test for App', function () {
beforeEach(function () {
browser.ignoreSynchronization=true;
browser.get(loginPageURL,2000);
});
it('It should Login a User', function () {
element(by.id('username')).sendKeys(constants.userName);
element(by.id('password')).sendKeys(constants.password);
element(by.id('Login')).click().then(function () {
// Waiting to open modal
browser.wait(function () {
return browser.getCurrentUrl().then(function (url) {
return url==dashboardUrl;
});
});
});
});
});
After login, I want to check currentUrl. But After login button click, It waits till dashboard url appeared.
But when after loginbutton click, It go to diffrent url, Then it also wait for dashboard url infinite.
I want to check current url after login event, if it is not dashboard url, then it should fail, and do not run next test suite cases, because login Test is failed.
Like-
When clickOn login button.
Wait for complete page load.
2.Then check current url, If it is not dashboard url, then test should failed, and not proceed for any test cases.
It is not best practice to wait for the pages url to load in order to know if the page is loaded, because there could be redirects or other things.
It is best practice to wait for a specific element on the next page(after log-in). Here is your code refactored to use a custom wait() function that will wait for an element to appear before continuing to retrieve the current url:
describe('login Test for App', function () {
browser.ignoreSynchronization = true;
it('should load the log-in page', function(done) {
browser.driver.get(loginPageURL).then(function() {
browser.driver.sleep(2000);
wait('#username', 10000);
done();
});
});
it('It should Login a User', function (done) {
element(by.id('username')).sendKeys(constants.userName);
element(by.id('password')).sendKeys(constants.password);
element(by.id('Login')).click().then(function () {
// Waiting to open modal
wait('#element_on_the_next_page', 10000);
browser.getCurrentUrl().then(function (url) {
// do anything with the url
done();
});
});
});
function wait(selector, timeout) {
browser.driver.wait(function() {
return browser.driver.isElementPresent(by.css(selector)).then(function(present) {
return present;
});
}, timeout);
browser.driver.wait(function() {
return browser.driver.findElement(by.css(selector)).isDisplayed().then(function(displayed) {
return displayed;
});
}, timeout).then(function() {
return;
});
}
});
Hope this helps!