JQuery Booklet Hash Only Works Once - jquery-plugins

I spotted a post ( Jquery click function only fires once ) from someone experiencing a similar issue but I haven't been clever enough to ascertain whether or not the fix that was discovered can be applied to my problem; so I'm hoping that someone might be able to provide some more specific help?
I am having no joy whatsoever in trying to get the goto page stuff to fire more than once. I have the following in the head...
<script type="text/javascript">
$(function() {
var mybook = $('#mybook').booklet();
var hash = $(".selector").booklet( "option", "hash" );
$(".selector").booklet( "option", "hash", true );
$(function() {
$('#mybook').booklet({
closed: true,
autoCenter: true
});
});
});
</script>
Then for Page 6 I have…
<div style="text-align: center" title="sixth page">
<h3>Go to page 3</h3>
</div>
Clicking on the link works the first time around but never again thereafter. If anyone can offer any insights or steer me in the right direction I'll be eternally grateful.
I'm relatively inexperienced; so do please let me know if I haven't given enough detail, here. Many thanks :) x

Hope this could help:
This is the Javascript:
$(function() {
$('#mybook').booklet({
closed: true,
});
$('#goto-page').click(function(e){
e.preventDefault();
$('#mybook').booklet("gotopage", "02");
return false;
});});
Change the number 02 to your desire page.
Here the html:
<div id="goto-page">
<h3>Jump to Page 2</h3>
</div>

Related

Getting value from inside div using XPATH

I have the following div
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
from which I would like to extract the itemid -> 3600542198158
I was using the following Xpath which does however not return any value:
//div[#data-dmid='product-detail-page']/#itemid
Could please someone advise how to built the Xpath correctly for it
#
Unfortunately I have to renew my question.
I was looking for the code with Firefox inspection tool.
Looking at the html source code which is different to the output with the inspection tool I have the following part which will be interesting:
<div class="onCanvas content-with-footer">
<div id="container-main" class="content-main">
<div data-dmid="uvp-banner-container" style="height: 54px; width: 100%"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var props = {};
ReactInit.initReactComponent("contentViewService", "UvpBannerContainer", props, document.querySelector("[data-dmid='uvp-banner-container']"));
});
</script>
<div id="react-product-detail-page"></div>
<script>
var props = {
gtin: 3600542198158,
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "ProductDetailPage", props, document.getElementById("react-product-detail-page"));
$(document).ready(function () {
var props = {
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "PriceLegend", props, document.getElementById("react-price-legend"));
});
</script>
I would need to get the gtin (plain number) of the second script.
I would like to use the xpath in a scraping tool why only plain xpath code will work for me.
Thank you again and please excuse my previous not fully correct question.
I am assuming that you don't mind JavaScript and jQuery since you didn't specify:
var itemId = $("div[data-dmid]").attr("itemid");
console.log(itemId);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
I got the answer with help of another post on Stackoverflow.
Reading a javascript variable's value
The correct code for my updated question is
substring-before(substring-after(//div[#class='onCanvas content-with-footer']//script[2][contains(.,'gtin')]/text(), "gtin: "), ",")
Thank you for any help.

Timed out waiting for asynchronous script result while executing protractor scripts with appium

I have a problem while running more than one test in protractor : Timed out waiting for asynchronous script result after 60010 s
The code of tutorial script which is executed just after the login script :
Here the code i'm using in my config file from A Code proposed in another question but it didn't solve my problem !
onPrepare: function() {
return browser.getProcessedConfig().then(function(config) {
var browserName = config.capabilities.browserName;
browser.manage().timeouts().setScriptTimeout(60000);
});
PS : Even if i put an incorrect location for the element i have the error of time out and not this element cannot be found ! as if that line of code "the click into tutorial button" is never executed
Is it because tutorial make an ajax call ?
Here my html code :
</div></md-card-content> </md-card><!-- end ngIf: !expandChart --> </div> </div> </div></md-content> </div></div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <!--<script>--> <!--!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){--> <!--(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),--> <!--r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)--> <!--}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');--> <!--ga('create', 'UA-XXXXX-X');--> <!--ga('send', 'pageview');--> <!--</script>--> <script src="scripts/vendor.js"></script> <script src="cordova.js"></script> <script src="scripts/scripts.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script> <div class="introjs-overlay" style="top: 0;bottom: 0; left: 0;right: 0;position: fixed;opacity: 0.8;"></div><div class="introjs-helperLayer " style="width: 538px; height:366px; top:64px;left: 195px;"></div><div class="introjs-tooltipReferenceLayer" style="width: 538px; height:366px; top:64px;left: 195px;"><div class="introjs-tooltip" style="left: 546px;"><div class="introjs-tooltiptext">Watchlist view. Swipe the row in the grid to the left to show the delete action.</div><div class="introjs-bullets"><ul><li><a class="active" href="javascript:void(0);" data-stepnumber="1"> </a></li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div><div class="introjs-progress" style="display: none;"><div class="introjs-progressbar" style="width:12.5%;"></div></div><div class="introjs-arrow left" style="display: inherit;"></div><div class="introjs-tooltipbuttons"><a class="introjs-button introjs-skipbutton" href="javascript:void(0);">Don't show it again!</a>PreviousNext</div></div></div></body></html>​
1. Regarding with route check
In case after first spec, user got logged in and the route changed. Make sure all are navigated before any test executed.
expect(browser.getCurrentUrl()).toContain('#/the_route_of_logged_in');
// '#/' is just illustration. You can remove it to make it shorter
// => like this ...toContain('the_route_of_logged_in');
2. Regarding with click on tutorial
browser.wait(EC.elementToBeClickable(tutorial), 10000);
Do the browser.wait with EC for click-able button before attempt to click it (it seem like you got good approach here)
=> SUMMING UP you can give this a try:
'user strict';
var EC = protractor.ExpectedConditions;
describe('tutorials', function () {
it('should make click into tutorial button', function () {
expect(browser.getCurrentUrl()).toContain('the_route_of_logged_in');
var tutorial = $('.introjs-nextbutton');
browser.wait(EC.elementToBeClickable(tutorial), 8000, 'Timed out');
tutorial.click();
browser.sleep(8080); // regardless we are not reaching this point. But I will suggest to reduce this sleep time like 1000 (1s).
});
});
3. (optional) in case 2 points above does not help
In your all of your spec login-spec.js and tutorial-spec.js. Add process.nextTick(done); in a afterAll() block to ensure if there are no any Jasmine Reporters being stuck after a spec.
describe('foo', function(){
afterAll(function(done){
process.nextTick(done);
});
it('should bar...', function() {});
}
P.S. Beware that I am totally have no clue if my suggestions/approach could help. As debugging with e2e-test always painful... because we are always likely not knowing "where are the errors come from". So all I can do is giving you suggestions.
(sometimes it took me hours to just observe the behaviors of browser to identify an issue of e2e-test)
And DO NOT COPY PASTE my code into your code. I typed it with the images you provide, I can make some typos there.
Add parameter to conf.js under capabilities:
maxSessions: 1,
it should help.
Also your timeoutinterval might be too high 30000 should be enough.
Or on prepare change line to :
browser.manage().timeouts().implicitlyWait(5000);
#EDIT:
change to sth similar to this found something like this
baseUrl is 10.0.2.2 instead of localhost because it is used to access the localhost of the host machine in the android
emulator/device
baseUrl: 'http://10.0.2.2:' + (process.env.HTTP_PORT || '8000'),
Capabilities new command:
newCommandTimeout: 60
Also use of promises might be helpfull instead of timeouts
someethingToDo.click().then(function(){
return somethingToDo.click();
}).then(function(){
//morecode
});
I think you might have an issue with how your timeouts are set up. Remove all timeout references from your config file and try something like this (adjust accordingly to include other configurations as needed):
exports.config = {
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 62000,
}
}
Finally i tried to solve my problem by adding this call back
describe("long asynchronous specs", function() {
beforeEach(function(done) {
done();
}, 10000);
});
Here is a link from jasmine Asynchronous_Support that help me understand time out problems.
Hope that can help you,

Autofocus on the textbox in html razor code

I want the cursor to be focused on the textbox when I load the page. I tried by adding autofocus="" but I couldn't find any difference in that.
Any help would be greatly appreciated!
#Html.TextBoxFor(
m => m.UserName,
"#xyz.com",
new { #class = "form-control input-lg", #id = "username"})
If you are ok with jquery, you can try using
<script type="text/javascript">
$(function () {
$("#username").focus();
});
</script>
You could use plain java script like this:
<script type="text/javascript">
document.getElementById("username").focus();
</script>
The autofocus attribute isn't implemented in all browsers. It's a good subset of browsers with most newer browsers having it, but not all. It is likely you were using a browser that does not support the autofocus attribute. Dive into HTML 5 has a good listing of the browser support.
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
});
}); </script>

AJAX fails updating the designated div

I used AJAX quite a lot. Take the following code as an example, it sometimes fails updating the designated content div. Instead, the whole page is update. It's odd that sometimes it's OK, but other times it's not. The problem seems to occur randomly, and it is very annoying. Can somebody shed some light on it? Thanks.
<div id="content"></div>
...
<a href="/admin?arg1=systemSetting" class="adminMenu">
<button class="adminButton">System settings</button>
</a>
<script>
$(document).ready(function() {
$('a.adminMenu').click(function() {
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
});
</script>

Dojo is submitting Extraneous Ajax Requests from disconnected/unrelated controls

I'm experiencing some strange behaviour with checkboxes on a Dojo page. In the code below I have created a search form which makes an Ajax/xhrGet request when the search text is changed - this all works as expected.
However I also have a checkbox on the same page which, when clicked, is also submitting an Ajax request. Since I have not connected the checkbox to the search I have no idea why this is happening.
Is this a bug or is there something more subtle going on here?
Any ideas/suggestions?
TIA,
BrendanC
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.Tooltip");
</script>
<div dojoType="dijit.layout.ContentPane" splitter="false" region="trailing"
style="width: 200px;">
<script type="text/javascript"> var srch = dojo.byId ("djsearch"); dojo.connect(srch, "onchange", "getbyname"); </script>
Search
<input dojoType="dijit.form.TextBox" name="dojosearch" value="Find"
trim="true" id="djsearch" propercase="true" style="width: 6em">
<p></p>
Tag Summary
<div id='tagsummary'></div>
</div>
I found the cause of my problem. Hopefully this will help someone else in the future.
Basically I did not issue the dojo.connect correctly - this needs to be done inside the 'addOnLoad' handler. In my initial code I was issuing the connect request on the page, but not in the required addOnLoad handler. The following code works correctly.
Hopefully this will help someone else in the future.
<script>
// Add the dojo.connect below
dojo.addOnLoad(function() {
// Connection s/b in 'addOnLoad' to work correctly
var srch = dojo.byId ("djsearch");
dojo.connect(srch, "onchange", "getbyname");
});
</script>

Resources