Ajax Request does not load on Firefox Browser

edited April 2012 in Enyo 2
Hi,

I am testing bing map on firefox browser and Ajax calling is not working for Firefox 3.5 to 12 version.

While checking on firebug, i am getting below error:
Permission denied for  to create wrapper for object of class UnnamedClass
[Break On This Error] 	

xhr.onreadystatechange(xhr);

My Code is,
var ajaxCall = new enyo.Ajax({url: url, sync: true}).response(this, "ajaxResponse").go()
I specially added sync:true because if i do not use this, this ajax will not work on any other browser(Chrome/Safari).

Please help me.

Comments

  • OK, you should almost NEVER use sync: true. Setting that caused the browser to pause for every request, being unable to respond to user input until that data comes back.

    The error you're getting is a permission error. This is likely a cross-domain XHR issue, but it might be a Firebug problem. I searched for this error (without the specific domain) and got https://code.google.com/p/fbug/issues/detail?id=2053
  • edited April 2012
    Hi Unwiredben,

    I have checked that link but it does not helped me as that example does not reproduce the same as it was said on that article.

    My Problem is, if i am not using sync:true, I am NOT able to create a bookmark item component by using ajax.

    Below is my example with sync:false but i am not able to see BookmarkItem into the pullout tray. This will sometime coming on Firefox but not on any browser.
    enyo.kind({
    	name: "BookmarkDefaultList",
    	events: {
    		onItemSelect: ""
    	},
    	create: function() {
    		this.inherited(arguments);
    		var request = new enyo.Ajax({
    		url: "api/webmap.php?flag=defaultPIN", 
    		contentType: "application/x-www-form-urlencoded",
    		sync: false,
    		method: "GET", //You can also use POST
    		handleAs: "text", //options are "json", "text", or "xml"
    		});        
    	request.response(enyo.bind(this, "defaultResult")); //tells Ajax what the callback function is
      	request.go({}); //makes the Ajax call.
    	},
        defaultResult:function(inSender, inResponse) {
    		var r = enyo.json.parse(inResponse);
    		//this.inherited(arguments);
    		for (var i=0, item; item=r[i]; i++) { 
    			var c = this.createComponent({kind: "BookmarkItem",
    				ontap: "itemTap",
    				}, item);
    				c.setTitle(item.Title);
    				c.setDetails(item.Address);
    				/*c.setBeepid(item.Beepid);*/
    		}
    	},
    	itemTap: function(inSender) {
    		if (this.activated) {
    			this.activated.applyStyle("background", null);
    		}
    		this.activated = inSender;
    		this.activated.applyStyle("background", "lightblue");
    		this.doItemSelect(inSender);
    	}
    });
    Please help me.
  • Please use the [C] button to mark code sections in your posts. I've been manually fixing them up.
  • The reason it doesn't work when you have sync: false is because you're calling createComponent. This doesn't cause the parent to rerender automatically -- it assumes you'll be calling it in a loop. You'll need to manually call this.render() after all the createComponent calls.

    It works in the sync case because that stops the Enyo code from drawing anything until the AJAX call returns, so the components are added before the initial render is done.
  • Can you please tell me in code that how can i use this.render() for createComponent because i will only have this data once my code reach to ajax response section.

    This would be a great help.

    @ I will use [C] for any future posting, sorry about it.
  • And why that sync:true is failing over firefox only?
  • you add the call to render after you've completed adding the components. It's OK to re-render a control in Enyo -- it will just cause the framework to rewrite the HTML DOM for that control.
  • edited April 2012
    Hi Ben,

    Thank you for suggesting this great stuff but here i am getting one small issue.

    When i am using static id value (got from firebug), its working fine
    this.renderInto('mapsApp_pullout_bookmarkDefaultList');

    But when i am using below, its not working on firefox
    this.renderInto(c);

    I have written this code as below,
    
    ajaxResponse: function(inSender, inResponse) { 
    		 var defaultResponse;
    		 inResponse = enyo.json.parse(inResponse); //alert('response last'+this.defaultResponse);
    		 this.defaultResponse = inResponse;
    		 var webKitFields = RegExp("( Firefox/)([^ ]+)").exec(navigator.userAgent);
    	
    			var r = inResponse;
    			for (var i=0, b; b=r[i]; i++) {
    					var c = this.createComponent({kind: "BookmarkItem",
    					ontap: "itemTap",
    					}, b);
    						c.setTitle(b.Title);
    						c.setDetails(b.Address);
    				
    				}this.renderInto(c);
    		
    	},
    
    
    Please tell me, what is wrong here. Also this.render was not working so i used this.rederInto

  • Hi,

    Just to confirm, the below code is also working, should i use this?

    this.render(this);
  • In yout case, you can user the exact syntax this.render() after the loop to render the entire kind, or inside the loop c.render() after setting Title and Details.

    Another thing:

    renderInto() means "render into" (it's pretty straighforward). so you're trying to render the parent kind into c, and c doesn't exists outside the loop.

    I think you need a bit javascript documenting.

  • edited April 2012
    Actually that's not quite right. Because of how JS deals with variables (function-scope NOT block-scope), 'c' does exist, but only references the final item in the loop. You should move the call to this.render inside the loop so that EVERY component that is stored in c will be rendered. Either that or turn c into an array and use c.push(this.createComponent(...));

    EDIT: actually, I notice that you're using this.createComponent, which creates each item as a component of 'this', then trying to render 'this' into one of those component. This is definitely undesirable behaviour - you probably need to restructure your code :-\
  • Yeah @omastudios, you're right. I suppose that coming from other languages, I keep some mind settings about variable scoping.
  • Thank rafa_bernad and omastudios, i tried that this.render() inside and its working fine.

    Re: Edit, i have used same approach as Enyo suggest for bookmarkItems but only change that i am getting my tips/marker from another file (Ajax). Do you think there is some scope to change structure of the code?

    Please suggest...
  • The code is definitely wrong. These lines:

    var c = this.createComponent({kind: "BookmarkItem",
    this.renderInto(c);

    .. will cause a weird loop. You are telling enyo to create 'c' inside 'this', but then trying to render 'this' into 'c'. If you've already rendered the root kind in the body of the document, you should'nt need to call this.renderInto
  • renderInto won't even work there. It expects a DOM node or a string with a DOM node's id value, not a Enyo control, as its main argument.
Sign In or Register to comment.