Question

I’m rephrasing my entire question which previously sounded absurd with this one which is a bit more rational.
I’m implementing a bookmarklet (tutorials from this link http://net.tutsplus.com/tutorials/javascript-ajax/create-bookmarklets-the-right-way/ ) a bit similar to the bitly sidebar Refer the link: http://bitly.com/pages/sidebar
Once the user has added the bookmarklet to the fav/bookmarks bar, when user clicks on the bookmarklet my popup opens up with a variety of fields for the user to add..currently doing this in my local machine with static html markup. I haven’t included the css necessary for the pop up currently but will implement it shortly.
But am facing quite a few challenges:
Here’s my code:
Bookmarklet

<a href='javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){alert("div is not hidden");var content_script = $("<script></script>").attr("src","bookmarklet_content.js").attr("type","text/javascript").attr("language","Javascript");$("head").append(content_script);});'>Edit</a>

JS file included through bookmarklet

var html_content = '';
var isUserSignedIn = 1;
if(isUserSignedIn) {
  html_content = 'markup for my popup div';
  $('body').append(html_content);
  if($("#tbarAddtoBrfPopup")) {
    alert('element identified');
  } else {
 alert('failed to identify');
 }
$("#divname").find(".pagename_parent").find(".pagetitletextfield").val(document.title);
var success_popup = 'another huge bunch of markup';
$('body').append(success_popup);
}
else {
  html_content = 'another pop up for signing in';
  $(html_content).insertAfter($('body'));
}
$("#popup1_submit_button").live('click',function(){
  $("#current_popup").hide();
  $("#Success_p0\opup").show();
});
// close buttons in my popup
$(".close").live('click',function(){
  $(this).parent().parent().hide();
});

I’m already feeling the heat with escaping stuff in the markup to prevent not well-formed error( which took me an hour to find and fix), and some special characters like a ‘x’ for close which is displayed in a funny ascii art style. Even now i get a syntax error for line var html_content=”; which i’m clueless about.

Kindly let me know if there’s a better procedure to fetch html and js from an external file and display without issues.

Also this popup works fine for local pages in my machine… when i use the bookmarklet for any public page it appears that the external js is not loaded at all. Seems I’m missing something here.
Edit guess its because of calling my js file w.r.t its relative path.

Any sort of help or suggestions(except that I should quit coding) would be great.
Thanks!!

Answer 1

I decided to follow the bitly implementation of using an iframe which seemed to be the best possible option to prevent the css and js mashup and mess up issues…