Bookmarklet Help (100 credits)

[ThePaintGuru]

I'd like to write a bookmarklet (small bit of JavaScript code) that keeps a running count on an external server without refreshing the page or opening a new window. So, for example, I want to be able to click the bookmarklet and have information sent to the server, and a little bar displayed in the top of the page the person's viewing showing "information submitted" that looks nice but unobtrusive. I don't want this to refresh the page, though, because the page that the person is on might contain post data. I also don't want a popup opened or anything, wasting the person's time and making them close it.

Anyone have an idea of how to do this. I think I might have to use some AJAX methods but not sure. 100 credits to anybody who can really help me!

 

[MasterMax1313]

If you want to have a little message at the top, I'd recommend a div at the top of the page with the message you want to display, with a css style of visible:false; (I think that's the style). Then when the link is clicked, use javascript along with DOM to send the info to the server (I'd suggest using a GET method to send the data you want to send), then after the request is sent back, you can use the javascript to change that div's style to visible:true;.

That's my two cents anyways

 

[TechAsh]

I think I might have to use some AJAX methods but not sure.

AJAX would be the best way to do it without refreshing the page. I can't help you with the coding because I don't know AJAX. But I can give you the link to a tutorial that may help.
AJAX Tutorial

@MasterMax1313 - I always thought the CSS was visibility:[hidden or visible]. But I may be wrong.

 

[ThePaintGuru]

I think the easiest way would be to make that message an iframe that opens in the top of the current page, and has the ID for the thing being counted URL encoded IE: <iframe src="http://bookmarklet.com?count=apples"></iframe>


MasterMax Somehow I didn't see your post. The thing is, I want this to display on ALL pages from any site. I thought there might be a way to insert an iframe at the top after the page has loaded, because clearly I don't have control over the names given to the DIVs that are there already.

EDIT I think I need to be using AppendChild. Could anyone help me figure out how this works?

 

[konekt]

The javascript should look something like this:

function submit()
{
//get the information and store to variables; I don't know what data you're //using so I can't be specific

var httpRequest = new XMLHttpRequest();

httpRequest.open("POST", "URL-TO-YOUR-DATA-HANDLING-SCRIPT-", true");
httpRequest.onreadystatechange = data; 

var command = "SET THE COMMAND YOU WANT TO SEND SCRIPT";
// if this was php it would look something like:
//var1=var1data&var2=var2data&etc... 
	//Send the proper header information along with the request
	http_Load.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http_Load.setRequestHeader("Content-length", command.length);
	http_Load.setRequestHeader("Connection", "close");
	http_Load.send(command);
}

function data()
{
//if everything goes ok
 if(http_Load.readyState == 4 && http_Load.status == 200)
	//code to write your message on HTML page
}

 

[ThePaintGuru]

It's really the code to write my message onto the page that I'm having trouble with. Is it even possible to add to the current page without refreshing it, if I didn't set up the IDs for objects that already exist, and don't know them?

EDIT:
Perhaps I should be more specific about what I'm doing. I'm setting up a script that will allow me to count the posts I've made on MyLot through a bookmarklet. When I make a post, I just click the bookmarklet and it runs a script by URL that increments the number for that day. Then it should say "post counted" at the top of my current page. An iframe seems like it would be easier for this purpose than the HttpRequest, because I'm URL encoding everything and the iframe itself could display the success text.

 

[woiwky]

If all you want to do is have that script run and display that text, and this is the only or one of the only cases where you want to do something like this on your site, then the iframe is probably more reasonable than using ajax.

However, if you did want to set new content to an existing object on the page, then you'd need to use the innerHTML property of it. To access that property without using document.getElementById(), you'd have to navigate through the document's node tree to get to that object. Although I would personally just modify the page to include ID's if I really wanted to get/set the content of an element.

Regardless, I would agree with you that using an iframe is more suitable for this situation since it's a rather quick and simple method. If you're not going to be making good use of ajax, then the benefits of it really don't outweigh the work to implement it.

 

[ThePaintGuru]

So my question is, let's say the user is on google.com and clicks my bookmarklet. I want it to insert the iframe with given URL at the top of the page right then and there. How do I accomplish this?

 

[woiwky]

Well, it doesn't necessarily need to be inserted. It could just be a blank iframe which has its location set with JS once the user submits the form. It'd be something like:

<form ... onsubmit="frames[0].location='formprocessor.php?x=y; return false;">

But if you really needed to have the iframe inserted, and without the use of document.getElementById(), then I couldn't say how to do that without seeing the html source.

 

[ThePaintGuru]

It could be blank and already there, but I think that's beyond the scope of a bookmarklet to do... maybe it would be possible to do it by inserting it and reloading the page from the same URL the person is already at. Again, I'm new to all this bookmarklet stuff but I'd like to learn.

EDIT:

If I can't get it to work, I could just try using the bookmarklet to send an HTTPrequest with no feedback...but that doesn't seem as elegant.

EDIT2:

I figured it out! My code is a bit messy, and you're not going to like my use of innerHTML, but I figured out how to insert anything in the top of the current page. Here I put in "hello world", but it could just as easily be an iframe tag:

javascript:
var originurl=window.parent.location.href;
var whatsinthepage="Hello world <br>"+document.body.innerHTML;
document.body.innerHTML=whatsinthepage;
window.parent.location.href=originurl;
window.stop();

Edit 3:

Apparently I spoke too soon. The whole parent.location.href thing is there to preserve the images on the page, because otherwise the new URL shows up as the entire bookmarklet string, and image sources are "bookmarkletgarbage/img.gif" instead of what they should be. But, when I put back the original string, it starts to reload the page, so I just put in an inelegant STOP command. That also stops any iframes from loading. I need to find a better way of not affecting the URL of the page.

 

[konekt]

You can get feedback from httprequests.

The change comes in the data function

function data()
{
//if everything goes ok
 if(httpRequest.readyState == 4 && httpRequest.status == 200)
     {
        //----> Here is the line--->// var response = httpRequest.responseText;
	//code to write your message on HTML page
      }
}

NOTE:

I copied the earlier code form my current project... the http_Load should be httpRequest... sorry

 

[ThePaintGuru]

So would it look something like this?

var httpRequest = new XMLHttpRequest();

httpRequest.open("POST", "URL-TO-YOUR-DATA-HANDLING-SCRIPT-", true");
httpRequest.onreadystatechange = data; 


 if(httpRequest.readyState == 4 && httpRequest.status == 200)
     {
         var response = httpRequest.responseText;
	 var originurl=window.parent.location.href;
	 var whatsinthepage=response+document.body.innerHTML;
	 document.body.innerHTML=whatsinthepage;
	 window.parent.location.href=originurl;
	 window.stop();
      }

I'm URL encoding the data to send through the HTTPrequest, so I don't think I need that other part because it is for POST data.

 

[konekt]

So would it look something like this?

var httpRequest = new XMLHttpRequest();

httpRequest.open("POST", "URL-TO-YOUR-DATA-HANDLING-SCRIPT-", true");
httpRequest.onreadystatechange = data; 


 if(httpRequest.readyState == 4 && httpRequest.status == 200)
     {
         var response = httpRequest.responseText;
     var originurl=window.parent.location.href;
     var whatsinthepage=response+document.body.innerHTML;
     document.body.innerHTML=whatsinthepage;
     window.parent.location.href=originurl;
     window.stop();
      }

I'm URL encoding the data to send through the HTTPrequest, so I don't think I need that other part because it is for POST data.

If you are URL-encoding then you need to use httpRequest.open("GET", "URL", true);

The httpRequest.onreadystatechange=data; is a reference to a function. What you wrote would be right if it looked like this:

var httpRequest = new XMLHttpRequest();

httpRequest.open("GET", "URL-TO-YOUR-DATA-HANDLING-SCRIPT-", true);
httpRequest.onreadystatechange = data; 

function data()
{
 if(httpRequest.readyState == 4 && httpRequest.status == 200)
     {
         var response = httpRequest.responseText;
     var originurl=window.parent.location.href;
     var whatsinthepage=response+document.body.innerHTML;
     document.body.innerHTML=whatsinthepage;
     window.parent.location.href=originurl;
     window.stop();
      }
}

That looks right to me.

 

[MasterMax1313]

It doesn't look like anyone has posted this link yet, but it has a really good bit of javascript for beginners working with AJAX and DOM.

how to submit a request from the client to the server

how to receive data back from the server

That is all from w3schools.com (a great resource for everyone). There's more info on AJAX in that tutorial if you just click "next". I'd suggest reading through it to see some of what AJAX has to offer.