I am trying to wrap my head around the history API. I am reading this along with this: http://diveintohtml5.info/history.html. It is relevant to me because, I am creating a single-page-application. There are two areas of the chapter's code that I don't understand:
function addClicker(link) {
....
swapPhoto(link.href);
history.pushState(null, null, link.href);
....
}
In the above code - what is link.href? I think I understand that the href is referring to the link attribute, and the link is being passed to the addClicker method. Is this just the way in which you have to refer to the href attribute of the link that is being passed in?
Secondly:
function swapPhoto(href) {
....
req.open("GET","http://diveintohtml5.info/examples/history/gallery/" + href.split("/").pop(), false);
....
}
What is happening with the above line? I've been trying to figure out what the open() function does with that second parameter...
I am trying to make it so that when a user logs in through a login form (and submit button) - the profile page gets brought up (I am making an SPA) - and then the user could go back to the main page configuration after logging in. So I think I am trying to do something like:
addClicker(document.getElementById("[SUBMIT BUTTON]"));
However, the submit button doesn't have a href attribute...so I am not sure how to proceed.
Related
I have a simple HTML website that shows info from JavaScript file which takes data from API. Main function in JavaScript file is:
function mainFunction(param) {
some code - if param1 then add something to HTML, if param2 then add something else, if paramN something else and so on, based on the data from API
}
What I'm struggling with is... I want by default to load website with specific parameter in function so it always shows specific content:
window.onload = function() {
mainFunction(param1);
};
... unless I click a link:
<a id="someID" href="#" onClick="mainFunction(param2);">x</a>
on the website - then I want my content on page to change.
However, after clicking that link nothing changes. If I remove:
window.onload = function() {
mainFunction(param1);
};
then page won't load with default content (blank page) but clicking the link surprisingly works and content do change to what I wanted. Therefore, I'm thinking maybe I can't overwrite parameter which is passed to function in windows.onload?
Ideally I would like to have say... 3 links in the footer of HTML page and each of them would have different onClick with specific parameter (eg. param10, param11, param12) to pass to mainFunction(). Clicking one of them will pass parameter to function and function will return & show specific content on the website. Clicking another will pass different parameter to function and function will return & show specific (but this time different) content on the website. Keep in mind that by default always param1 should be loaded on page load because maybe links won't be clicked at all during page visit so change of content won't be necessary.
If there is some more explanation needed (or more code) please do tell me!
Title is probably a little messy. Basically what I'm trying to do is to create a custom function that will modify an object properties, then return that object, and then call a function.
A little background on what I'm doing : Trying my best with the Zendesk API to use a web widget on my webpage. Basically this web widget is configured to be a HelpCenter on startup, which then shows a button for either live chat or email, depending on the state. The main property in question here is called 'suppress' which disables one of the widget pages (chat, email & helpCenter). And my goal is to make that custom function 'suppress' 2 of the 3 widget pages so it only shows one. Then a API func called zE.activate() would open up the widget.
I know this is a lot of text, let me show you the code I've got so far :
<script>
function setChatPopOutProps(window) {
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
},
helpCenter: {
suppress: true
}
}
};
return window.zESettings;
};
function chatPopOut() {
setChatPopOutProps(window);
zE.activate();
};
</script>
Now when I click on the button that has chatPopOut() assigned, the zE.activate() works since it opens up the widget, but basically the setChatPopOutProps(window) didn't seem to work.
I also tried the following :
Not returning window or window.zESettings
Putting everything under a single function by putting zE.activate() at the end of zESettings or just after the return window or window.zESettings
If you need to see the widget in action to have an idea, you can see it right here. Click on the green button on the bottom right, type anything, and you'll see the contact form button pop up. This button changes for a chat button when a live chat agent is available.
Now I know this is something that I should normally work out with Zendesk directly, which I tried, but they told me that there's nothing that can do what I'm trying to accomplish, but I really feel like this has something to do with the way I'm doing things in javascript and not the way the API is built..
Does anyone have an idea ? I would really appreciate it.
P.S. This is my 2nd post, so I apologize in advance for mistakes I probably made in this question.
Sadly, it turns out that what you are trying to accomplish just isn't possible. As the zE.settings get applied when the widget is first initialized, so there is no way to dynamically alter the widget settings without doing an action such as refreshing the page and re-initializing the widget. As far I can see from your code, I dont think you want to refresh the page everytime, and reinitialize the widget just to apply those settings that you listed above.
I'm in the SeleniumIDE , but calling out to javascript.
Seems like this would be a fairly common scenario for others too.
I have a good test suite but the first thing it does is login.
I would like the suite to start off be making sure I am logged out and if not, logging me out.
I can tell if I am logged in by the presence of a 'Logout' hyperlink
But I only want to click on logout IF I am currently logged in, otherwise I want to do nothing, as trying to click on a non-existent element would raise an error if I am not already logged in)
So logically this is:
if ui element(logout link in my case) exists
click on logout link
else
do nothing
end
I am using the Selenium IDE and calling javascript - Given that I can't do if then in the basic seleniumIDE I was hoping I could do this in javascript itself.
something like:
store javascript{if ([a with text 'Logout' exists]) then click on it end;} id1
although instead of click on it [this], it would also be ok (though more brittle) if I just visited the url which is
http://my-apps-domain/users/sign_out
but I'm not sure of the exact syntax.
The relevant HTML is:
<li>Logout</li>
If it exists I would like to click on the a (or visit the url directly), otherwise nothing.
I would like to find a non-jquery solution if possible.
Update: I have found that even javascript{window.location.replace('http://google.com') } closes my seleniumIDE window and replaces it with google but doesn't affect the actual window where the tests themselves were running.
Triggering a click event in raw JavaScript can be tricky (check out this answer: https://stackoverflow.com/a/10339248/2386700)
However, if you can also use jQuery, that would simplify things. For example, if the logout button has an id like "logout" then you could do something like this:
var logoutButton = $('#logout');
if (logoutButton != null) {
logoutButton.click();
}
Since you don't have control over the HTML, I suggest referencing the link in another manner. The URL seems very reliable for that purpose:
var logoutLink = document.querySelector('a[href="/users/sign_out"]');
if(logoutLink != null) {
window.location.href = logoutLink.href;
}
You don't need to fire any kind of click event, because page navigation can easily be done with window.location.
UPDATE:
Another idea is to assign your button an id, then click it with selenium:
var logoutLink = document.querySelector('a[href="/users/sign_out"]');
if(logoutLink != null) {
logoutLink.setAttribute("id", "logoutLink");
}
I have a simple index page in which the door open and the user see the menu. Now when user reaches the contact us page and he moves to index page again.. he found the door closed.. I dont want that..I want when user once open the door ,again reaching the index file he see the menu..
For this <a href="index.htmlPLUSE CODE TO OPEN DOOR USING JS"/>
This is line is very self explanatory..I want when user navigates to home page the function for JS calls automtically.
I can't really use the document.ready() or onload calls as I used them already.. May be I need to use some conditional statement.
Anyone who can help
You can pass parameters to the url (/index.html?open=true), and read them using JavaScript:
function isOpen() {
return decodeURI(
(RegExp(open + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
(from Get escaped URL parameter)
I'm trying to do what is supposed to be fairly simple with facebook connect, but having no luck.
When a user logs in, I want to show that users details (refreshed without reloading the page), and when the user logs out, I need to go back to a logged in state.
The code I have is
function update_user_box()
{
jQuery('span#loggedin').html('<fb:profile-pic uid="loggedinuser" facebook-logo="true"></fb:profile-pic><fb:login-button size="small" onclick="fbLogout()" autologoutlink="true"></fb:login-button>');
jQuery('span#fbLogin, ul#otherLogin').hide();
jQuery('div#popForecast li.otherLogin, ul.showList li.otherLogin').remove();
jQuery('span#logged').text('1');
FB.XFBML.Host.parseDomTree();
}
function fbLogout()
{
FB.Connect.logout();
jQuery('span#fbLogin').show();
jQuery('span#loggedin').empty();
jQuery('span#logged').text('0');
}
FB.init('c0529b8c11709f2317ae643d854e3866', 'xd_receiver.htm');
FB.ensureInit(function(){
FB.Connect.ifUserConnected(update_user_box);
});
I can log the user in and out, but nothing else changes.
I can't even trigger an alert from my functions.
For some reason the html I'm using won't display within the pre tags, however, on reloading the page, the user is displayed (or not as it should), so it is just not being triggered directly from the javascript functions. But refreshing the page launches the correct function.
The error I get in firebug is
'fbLogout undefined'
, but clearly it is defined. Does it matter where I define it?
Currently all of the javascript/jquery is in the head within script tags. Though I've tried moving it down into the page and didn't have luck their either.
Turns out I was over thinking this. FB does a lot of the work for you.
I was calling the functions on the login and logout events, but with FB.Connect.isUserConnected function, FB keeps an eye on this for you.
My code is exactly the same except
1) i no longer have onclick events in the fb:login button
2) the FB.Connect.isUserConnected function now looks like this
FB.Connect.isUserConnected(update_user_box, fbLogout);