The following is working for me:
$('#datatable').on('page.dt', function() {
alert("changed");
});
Whenever I am changing the page,the alert is shown.But if I want to alert the page no. which is clicked then what's the way
table.page.info() returns the current pagination information. That is current page, number of pages, recordsDisplay, recordsTotal and more.
var table = $('#datatable').DataTable();
$('#datatable').on('page.dt', function() {
var info = table.page.info();
var page = info.page+1;
alert('changed - page '+page+' out of '+info.pages+' is clicked');
});
see demo -> http://jsfiddle.net/qpLtLfaz/
Related
var webpage = require('webpage').create();
var filename = 'demo.png';
webpage.open('https://www.example.com/', function() {
webpage.render(filename);
phantom.exit();});
In the above code when the example web site loads it displays a bootstrap popup. now in phantom js i want to take a screenshot of the web page without the popup. please help me on how to hide this popup through phantomjs..
You need to hide/turn modal off before making a screenshot:
var page = require('webpage').create();
var filename = 'demo.png';
page.open('https://www.example.com/', function() {
// Delay script by a second to give
// javascript some time to load and execute modal
setTimeout(function(){
page.evaluate(function(){
// You'll need to find the modal id to hide it programmatically
$('#themodal').modal('hide');
});
page.render(filename);
phantom.exit();
},
1000);
});
Another way is to just remove the modal window elements from DOM:
page.evaluate(function(){
// These classes are for Bootstrap 4
$('.modal, modal-backdrop').remove();
});
I'm trying to get to controls inside a frame that is located inside a frame that is located inside another frame.
The last (deepest) frame is used only for login - that I manage to do.
The problem is that after the login I basically need to return to the upper frame and click a button. For some reason I keep getting the error:
NoSuchElementError: no such element
BTW, all the code in the frames is non-angular.
This is my code for the test:
it('Should get to drive sample app', function () {
login.get();
login.clickLogin();
browser.ignoreSynchronization = false;
login.goToUsecases(); //getting to the page
$('[href="/developers/api/1542"]').click();
browser.sleep(5000);
//iframe issue starts here
browser.switchTo().frame(0);
browser.ignoreSynchronization = true;
browser.switchTo().frame(0);
browser.switchTo().frame(0);
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
// login succeeded
browser.sleep(10000);
browser.driver.switchTo().defaultContent();
browser.driver.findElement(by.id('home')).click();
browser.sleep(10000);
});
The problem is that after the login I basically need to return to the upper frame and click a button.
From what I see in your code, you are switching to the default content, but, as you said, the button is inside the upper iframe, switch to it:
browser.driver.switchTo().defaultContent();
browser.switchTo().frame(0);
browser.driver.findElement(by.id('home')).click();
You can try this may be this helps you.. As this works for me for handling different windows.
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1];
browser.ignoreSynchronization = true;
browser.switchTo().window(newWindowHandle).then(function () {
browser.sleep(500).then(function () {
browser.ignoreSynchronization = true;
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
//login succeeded
});
//to close the current window
browser.driver.close().then(function () {
//to switch to the previous window
browser.switchTo().window(handles[0])
browser.driver.findElement(by.id('home')).click()
browser.sleep(10000);
});
});
});
Instead of ::browser.switchTo().frame(0);
try giving the locate of the iframe where you want to switch too.. that might help.
// Switch to iframe context in order to see inside iframe
browser.switchTo().frame(element(by.tagName('iframe')));
I have an issue with my Node-Webkit MenuItem click function which I believe I have narrowed down to changing the URL from within the Javascript on my loading page. I have a 5 second timer which changes the page when complete. If I set the document location to a web page on a web server (could be anything even www.google.com) from within the javascript in my loading.html page, my MenuItem Click functions do not work
$(document).ready(function() {
window.setTimeout(function() {
document.location = "http://localhost:8080/myapp/index.htm";
}, 5000);
});
If I change the document location to a html page which is contained within my app.nw package, my MenuItem click functions work and the page will change to any of my
http://localhost:8080/myapp pages
$(document).ready(function() {
window.setTimeout(function() {
document.location = "test.html";
}, 5000);
});
Here is my Node-Webkit javascript file contained within the app.nw package which places a menu bar on the application window.
var gui = require('nw.gui');
var win = gui.Window.get();
var rootMenu = new gui.Menu({ type: 'menubar'});
var sysMenu = new gui.Menu();
sysMenu.append(new gui.MenuItem({
type: 'normal',
label: 'Google',
click: function (){
Window.window.location.assign("http://localhost:8080/myapp/customers.htm");
}
}));
gui.Window.get().menu = rootMenu;
Has anyone else come across this or am I doing something the wrong way?
Thanks
I have a ContentPane defined as follows:
<div id="searchResultsContentPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='splitter:false, region:"center"'></div>
I am trying to dynamically set the href when a button in another ContentPane is pressed:
var searchResultsContentPane = dijit.byId("searchResultsContentPane");
searchResultsContentPane.set("href", "modules/content_panes/callrecords.php");
For some reason this doesn't seem to be working. The content pane flashes loading then goes back to white and FireBug doesn't give me usable info. This is all it shows:
If you cant read that it says in red:
GET http://cdr.homelinux.net:10001/Mike/modules/content_panes/callrecords.php
callrecords.php loads just fine if I set it with html as a data-dojo-props property.
Thanks
Page was refreshing. Used the following code to properly load the content pane.
function sendSearchForm() {
// format taken from http://dojotoolkit.org/reference-guide/1.7/dojo/xhrPost.html
var form = dojo.byId("search_form");
dojo.connect(form, "onsubmit", function(event) {
dojo.stopEvent(event);
var xhrArgs = {
form: dojo.byId("search_form"),
handleAs: "text",
load: function(data){
loadAdvancedSearchResultsTable();
//var searchResultsContentPane = dijit.byId("searchResultsContentPane");
//searchResultsContentPane.set("href", "modules/content_panes/test_module.html");
},
error: function(error){
// TODO Handle errors
}
}
// Call the asynchronous xhrPost
//dojo.byId("response").innerHTML = "Form being sent..."
var deferred = dojo.xhrPost(xhrArgs);
});
}
dojo.ready(sendSearchForm);
I am using Jquery UI Tabs for my website.
<script type='text/javascript'>
//<![CDATA[
jQuery(window).load(function(){
jQuery('#myTabs').tabs({ fx: { opacity: 'toggle' }});
jQuery('.next-product').click(function(){
var jQuerytabs = jQuery('#myTabs').tabs();
var selected = jQuerytabs.tabs('option', 'selected');
jQuerytabs.tabs('select', selected+1);
});
jQuery('.previous-product').click(function(){
var jQuerytabs = jQuery('#myTabs').tabs();
var selected = jQuerytabs.tabs('option', 'selected');
jQuerytabs.tabs('select', selected-1);
});
As you can see that i have been using the previous next button to move from one tab to another.
My question is "When i click on next and if the last tab is open then automatically the first tab should get open, and similarly When i click on previous and if the first tab is open then automatically the last tab should get open"
Please help me out, i am stuck from over 3 days now and no solution. I have searched a lot on net but no solution for this.
You can count the number of .ui-tabs-panel elements.
jQuery(window).load(function() {
var $tabs = jQuery('#myTabs');
$tabs.tabs({
fx: {
opacity: 'toggle'
}
});
var amount = $tabs.find('.ui-tabs-panel').length;
jQuery('.next-product').click(function() {
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
});
jQuery('.previous-product').click(function() {
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
});
});
DEMO
Notes:
select your tab element already and re-use the selector var $tabs = jQuery('#myTabs');, it'll be more efficient
no need to re-call .tabs() on your click handlers