Problem to send request and take response from cross domain

edited April 2012 in Enyo 2
i have created a popup in which two text box and one submit button are coming properly but problem is that how can i send text box values to the given URL and take response back from server(given URL).
please guide me properly, I'm very new to Enyo this is my first experience

Comments

  • Are you still having trouble with this? If so, here's an older example that I have that might help. There's a popup box with a username & password field. When you click submit, it makes an ajax call to mockdata.json, and then returns that data and displays it.

    Here's my sample structure:
    enyo.kind({
    	name: "App",
    	classes: "enyo-unselectable onyx",
    	components: [
    		
    		{kind: "onyx.Groupbox", components: [
    			{kind: "onyx.GroupboxHeader", name: "groupboxHeader", content: "Ajax Sample"},
    			{kind: "onyx.InputDecorator", components: [
    				{kind: "onyx.Button", content: "Popup...", ontap: "showPopup", popup: "popup"},
    			]},
    			{kind: "onyx.InputDecorator", components: [
    				{name: "myStatus", content: "Ajax Response:"}
    			]}
    		]},
    		
    		{name: "popup", kind: "onyx.Popup", centered: true, floating: true, modal: true, style: "padding:10px; color:#FFF; font-size:18px;", components: [
    			{kind: "onyx.InputDecorator", components: [
    				{kind: "onyx.Input", name: "myValue1", placeholder: "value 1", value: "username", onfocus: "focus", onblur: "blur"}
    			]},
    			{tag: "br"},
    			
    			{kind: "onyx.InputDecorator", style: "margin-top: 10px;", components: [
    				{kind: "onyx.Input", name: "myValue2", placeholder: "value 2", value: "password", onfocus: "focus", onblur: "blur"}
    			]},
    			{tag: "br"},
    			
    			{name: "popupStatus", style: "margin-top: 10px; border: 1px dashed #999; font-size: 18px; height: 30px; line-height: 30px; vertical-align: middle; text-align: center", content: "status"},
    			
    			{style: "width: 100%; margin-top: 10px;", components: [
    				{kind: "onyx.Button", content: "Submit", ontap: "submitData", classes: "onyx-blue", style: "width: inherit; "},
    				{kind: "onyx.Button", content: "Cancel", ontap: "hidePopup", classes: "onyx-negative", style: "width: inherit; margin-top: inherit;"}
    			]}
    		]}
    		
    	],
    	
    	submitData: function() {
    		this.$.popupStatus.setContent("sending/receiving...");
    		
    		var url = "mockdata.json";
    		this.ajaxRequest(url);
    	},
    	
    	focus: function(inSender, inEvent) {
    		inEvent.originator.container.applyStyle("background-color", "#FAFAFA");
    		inEvent.originator.applyStyle("background-color", "#FAFAFA");
    		inEvent.originator.applyStyle("color", "#000");
    	},
    	blur: function(inSender, inEvent) {
    		inEvent.originator.container.applyStyle("background-color", "none");
    		inEvent.originator.applyStyle("background-color", "none");
    		inEvent.originator.applyStyle("color", "#FFF");
    	},
    	
    	showPopup: function(inSender) {
    		this.$.popup.show();
    		this.$.myValue1.focus();
    	},
    	
    	hidePopup: function(inSender, inEvent) {
    		this.$.popupStatus.setContent("status");
    		this.$.myStatus.setContent("Ajax Response:");
    		this.$.popup.hide();
    	},
    	
    	ajaxRequest: function(url) {
    		
    		var value1 = this.$.myValue1.getValue();
    		var value2 = this.$.myValue2.getValue();
    		
    		var submitData = {
    			"url": url,
    			"value1": value1,
    			"value2": value2
    		};
    		
            var ajaxCall = new enyo.Ajax(submitData);
            ajaxCall.response(this, "ajaxResponse");
            ajaxCall.go();
        },
    
        ajaxResponse: function(inSender, inResponse) {
        	console.log(inResponse);
            var statusMessage = inResponse.statusMessage;
            this.$.myStatus.setContent(statusMessage);
            this.$.popup.hide();
        }
    	
    });
    

    Then my mockdata.json file contains:
    {
    	"statusMessage": "ohai there"
    }
    

    Let me know if you need any other help.
  • This is great example and working too but i am in very difficult situation with this Enyo Ajax.

    Problem: Pullout Component is not able to create bookmark item list when i am requesting this inside ajax response function. Please help me.
Sign In or Register to comment.