Open multiple tabs at once with JavaScript - javascript

I am trying to open a few tabs at once from my shopping cart page using Javascript. I have looked at a few similar questions and I already know that you can use several window.open(url) but I'm not really looking forward to that... I currently have this code
function buyAll()
{
$.ajax({
url:'Basket',
type:'POST',
data: { listOfWines : $.toJSON(chosenIds), action : 'buyAll' },
success : function(responseText)
{
for (var i = 0; i < allSliders.length; i++)
{
var cellsCollection = document.getElementById(allSliders[i].id).closest('tr').children;
var row = document.getElementById(allSliders[i].id).closest('tr');
$(cellsCollection)
.animate({ padding: 0 }, 800)
.wrapInner('<div />')
.children()
.slideUp(function() { $(row).remove(); });
}
showSnackOpened();
}
});
for(i = 0; i < allSliders.length; i++)
{
var url = allSliders[i].getAttribute('data-redir');
window.open(url, '_blank');
}
}
Forgive me if the code isn't the best or there's a bit of a mix with the jQuery (JS isn't my best-known language) I take an array of elements on the shopping cart and get a particular attribute of these elements, which is the URL I need to redirect the user to. Once I have the list of URLs I try to iterate over them and open the new tabs. However, the browser obviously blocks the pages from the second onward.
Also, Chrome's tabs API won't be of any use to this project, since not all of the users will be using Chrome.
Any help is much appreciated!

Related

loads specific url's & clicks a button automatically

I'm new to javascript & i want to do this simple thing.
I want to make a script which goes to coded url's & clicks on a button each time the script is executed.
Suppose,i have these links -
I want the javascript to to go on these links after running it & trigger another small js for both links after they are fully loaded.
Here's what i tried
var linkArray = ('https://facebook.com/user1','https://facebook.com/user2');
for (var i = 0; i < linkArray.length; i++) { window.open({
url: linkArray[i]
});
}
linkArray.onload="blabla();"
function blabla()
{
var inputs = document.getElementsByClassName('_42ft _4jy0 _63_s _4jy4 _517h _51sy');for(var i=1; i<inputs.length;i++) {inputs[i].click();}
}
Can anyone please help?
Thanks in advance! :-)
Please change to this, this would works
var linkarray = ('https://facebook.com/user1', 'https://facebook.com/user2');
var linkArray = [https://facebook.com/user1,https://facebook.com/user2];
isn't valid, please set your array like this:
var linkArray = ['https://facebook.com/user1', 'https://facebook.com/user2'];

Browser freezing when updating backbone model?

I am working with the facebook api, I am trying to update an existing model in my localstorage collection with some attributes from a facebook object.
fbUser: function(e) {
var self = this;
var faceid = $(e.currentTarget).data('face');
FB.api('/'+faceid, function(response) {
console.log(response.name)
self.model.set({'name': response.name});
});
}
The above works, but lags the browser up and causes a (not responding) "warning: unresponsive script" error.
This method executes on a click event within the view, I have another method that loads in a list of people from facebook and appends to the element. Let me show you that code.
I am loading members from a group. Then loading all those members and for each appending them as a list item with a custom attribute that contains their profile id.
loadFbMembers: function() {
var self = this;
FB.api('/554870764588961/members/', function(response){
for (var i=0; i < response.data.length; i++) {
FB.api('/'+response.data[i].id, function(response) {
var userImage = '<img src="https://graph.facebook.com/'+response.id+'/picture?width=32&height=32" style="border-radius: 100em; width: 50px; height: 50px;">';
self.$el.find('.test-list').append('<li class="fb-player" data-face="'+response.id+'">'+userImage+response.name+'</li>');
});
}
});
}
I feel like this is obviously not ideal? I am not sure why this is causing so much lag.

Firebug/Javascript Aborts

I am new to Javascript. I am trying to navigate to a page and "scrape" the screen. I am using Firefox, Greasemonkey and Firebug. I amd trying to use location.href which might be the problem. I want to navigate to a page, parse the contents, use the contents to navigate to other pages. Here is an example (my site is different, but I am getting the same error/result):
location.href='http://www.w3schools.com/html/html_examples.asp';
/* parse and find text */
location.href='http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro';
alert('finished');
No matter what I do, Firebug/Greasemonkey just quits after the first location.href. The alert will show, but even if I have a breakpoint set there, it will run right past it. Any help is much appreciated.
Scenario 1: A lot of dynamically generated links (fetched with GM_xmlhttpRequest)
//...
//#include http://www.w3schools.com/html/html_examples.asp
//#grant GM_xmlhttpRequest
//...
var urls = [];
//parse text to generate some links on the fly and store them in urls[]
var i = 0, numUrls = urls.length, reportEntries = [], count = 0;
for(; i < numUrls; i++) {
GM_xmlhttpRequest({
method: 'GET',
url: urls[i],
onload: function(response) {
var returnedHtml = response.responseText;
//extract more information from returnedHtml and store it in reportEntries[i]
if(++count >= numUrls) {
//print reportEntries[] to form a report
alert('finished');
}
}
})
}
Note: If you need to save report as a text file to local disk, Greasemonkey is not a viable option as it does not have the privilege to open local files. None the less you can save it to online storage such as pastebin.com.
Scenario 2: Limited number of static links
//...
//#include http://some.landing/page
//#include http://www.w3schools.com/html/html_examples.asp
//#include http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
//...
if('http://some.landing/page' == location.href) {
location.href = 'http://www.w3schools.com/html/html_examples.asp';
}
else if('http://www.w3schools.com/html/html_examples.asp' == location.href) {
/* parse and find text */
location.href='http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro';
}
else if('http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro' == location.href) {
alert('finished');
}

What is the Best Method for Loading a URL Returned from a JSON List in JQuery / Javascript

I am trying to AJAX some content into the #BlogContainer div and cannot seem to get my click function working properly. It seems to be falling apart in the if statement, but I can't figure out why. I have tested with alert and the return from the JSON is coming through as it should. The initial load also works fine its just the iterating through the JSON return and returning the url to the load function that doesn't seem to be working.
The effect that I want to achieve is to load page content (blog entries) into the #BlogContainer div using .load and the URLs from the JSON file which point to the content, iterating to the next with each click on the #Nexus div.
My main question is what is the best method for loading dynamically through a JSON return? I had an each function which did the exact same thing as well (it seemed to return the correct result, but would not actually load the content). I decided to use the for loop instead since what I read indicated it was slightly more efficient, though I doubt it would have much impact in my case.
I am completely new to JS / JQ and previously had everything functioning the way I wanted using JQueryTools, but I thought the best way to learn would be to do it myself (with a little help of course :) ).
HTML
<div id="BlogContainer"></div>
<div id="NexusRef" alt="03151201.htm">'03151201.htm'</div>
JSON
{
"0": "'03151201.htm'",
"1": "'01191201.htm'",
"2": "'00000103.htm'",
"3": "'00000102.htm'",
"4": "'00000101.htm'"
}​
Javascript
$(function() {
$('#Navigation').load('navi.htm');
$('#BlogContainer').load('03151201.htm');
$('#TT1').load('ajtt1.htm');
$('#TT2').load('ajtt2.htm')
});
$(function() {
$('#Nexus').click(function() {
$.getJSON("BlogRoll.json", function(data) {
var i = 0;
var n = ($('#NexusRef').html());
var length = data.length;
for (i = 0; i < length; i++) {
if (data[i] == n) {
$(function() {
$('#BlogContainer').load(data[i + 1]);
});
} else {
alert(data[i + 1]);
}
}
});
});
});​
this should do it
$(function() {
//assuming you have this JSON to work with:
var pages = {
"0": "'03151201.htm'",
"1": "'01191201.htm'",
"2": "'00000103.htm'",
"3": "'00000102.htm'",
"4": "'00000101.htm'"
}
//add a click handler to your button
$('#Nexus').on('click', function() {
//prepare a storage url
var url;
//pick out first link, copy, and remove it
//works like Array.shift()
for (var key in pages) {
if (pages.hasOwnProperty(key)) {
url = pages[key];
delete pages[key]
break;
}
}
//Do a GET to retrieve contents and append to container
$.get(url, function(contents) {
var contents = url;
$('#BlogContainer').append(contents);
});
});
});​

Javascript in Firefox Plugin: Delay in for loop

I am aware that when coding an extension, there is no way we can delay a function call except for using a setTimeout call but here's what I am trying to achieve in a plugin that I am developing for Firefox (this is not for Javascript embedded into a web page by the way):
for (var i = 0; i < t.length ; i++) {
//Load a URL from an array
//On document complete, get some data
}
The idea is simple. I have an array of URLs that I want to parse and extract some data out of. Each of these URLs take some time to load. So, if I try to get some data from the current page without waiting for the page to load, I will get an error. Now, the only way to do this as I know is as follows:
firstfunction: function() {
//Load the first url
setTimeout("secondfunction", 5000);
}
secondfunction: function() {
//Load the second url
setTimeout("thirdfunction", 5000);
}
And so on... I know this is obviously wrong.. I was just wondering how people achieve this in Javascript...
EDIT: Sorry about not being more detailed...
I'm not convinced that this type of foolery is necessary but I'm not an extension dev so who knows. If this is the approach you want, then just have the setTimeout call refer to the same function:
var index;
firstfunction: function() {
// do something with `index` and increment it when you're done
// check again in a few seconds (`index` is persisted between calls to this)
setTimeout("firstfunction", 5000);
}
I am not sure how to do this from a plugin, but what I've done with iframes in the past is attach a callback to the target document's onLoad event.
Maybe something like:
var index = 0;
var urls = [ ..... ];
function ProcessDocument() { ....; LoadNextDocument(); }
function LoadNextDocument() { index++; /* Load urls[index] */; }
document.body.onLoad = ProcessDocument;
Somewhere in there you'd need to test for index > urls.length too for your end condition.
I had same problem but I used recursion instead of looping.
Below is the running code which changes the innerHTML of an element by looping through the list. Hope its helpful.
<Script type="text/javascript">
var l;
var a;
function call2()
{
l = document.getElementById('listhere').innerHTML;
a = l.split(",");
call1(0);
}
function call1(counter)
{
if(a.length > counter)
{
document.getElementById('here').innerHTML = a[counter];
counter++;
setTimeout("call1("+counter+")",2000);
}
}
</Script>
<body onload="call2()">
<span id="listhere">3,5,2,8</span><Br />
<span id="here">here</span>

Categories