I have a problem on my development website www.depcore.com/v4 I have a form with a slider plugin.
I wanted to be as easy as possible so I used a slider plugin for the budget.
After sending the form I replace it with a thank you/info message with the ability to resend it.
The base form is stored in a variable.
Here is the fragment that sends and replaces the form
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#contactForm').html("<div id='message-sent'></div>");
$('#message-sent').html("<div><h2>Thank you</h2> <p>The message was sent. I'll get back to you as soon as possible</p></div><p><a href='#'>Send another</a></p></div>").hide().fadeIn(1500);
$('#message-sent a').live('click',function(){
$('#contactForm').html(formF).fadeIn(1500); return false;
jQuery("#budget").slider({ from: 100, to: 10000, step: 100, scale: [100, '|', 2500, '|' , '5000', '|', 7500, '|', 10000],
round: 1, dimension: ' $'});
});
}
});
I guess it has to do with the live function and is probably very easy, but couldn't make much sens out of the documentation.
thanks for any help
Removing the return false; within your live() before jQuery("#budget").slider(...) should solve the problem.
But you don't have to use live in your case, because you are explicitly setting the slider in your successhandler. You can use .click() here. You could use $('#message-sent a').live(...) in some "global code".
Related
I found allot of examples of AJAX and I think I can get some code with it to work on my own. If only I knew what the use of all the terms of the AJAX code where.
I think in general it lacks the availability of these guides or special pages where constructed code is explained in detail for new programmers.
This would help enormously because of the misunderstanding of the syntax in many cases. Me for example spend 8 hours a day on my internship to learn PHP, Jquery, HTML from scratch and there is allot of information out there but its not structured and in most cases to technical. Any tips on that maby ? :)
$.ajax({
type: 'POST',
url: 'http://kyleschaeffer.com/feed/',
data: { postVar1: 'theValue1', postVar2: 'theValue2' },
beforeSend:function(){
// this is where we append a loading image
$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
},
success:function(data){
// successful request; do something with the data
$('#ajax-panel').empty();
$(data).find('item').each(function(i){
$('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});
},
error:function(){
// failed request; give feedback to user
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});
Ajax is asynchronous, which mean you can use it to get new informations from the server without reloading the whole page.
Here's an explanation of your code :
$.ajax({
$ is the JQuery object, on which you're calling the ajax function
type: 'POST',
You're gonna send your data by post, which mean that you'll have to get them in php with $_POST['variable_name']. You could also put GET instead
url: 'http://kyleschaeffer.com/feed/',
the url you want to reach
data: { postVar1: 'theValue1', postVar2: 'theValue2' },
as you're sending your request with POST, you cannot pass data directly from the URL.
So you have to pass them like that. { nameVar: 'value', .... }
If you were sending with GET, you could directly write them into url like : "http://my_url.php?var1=val1&var2=val2 etc ...
beforeSend:function()
You can define an action before sending your ajax request
$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
Here, inside your div "ajax-panel" you want to write some content. (a div "loading" and a picture inside "loading").
success:function(data)
If your request is successful, you can do something. By successful it means if server answer 200 i guess, anyway ... If you have a response from server... ;)
$('#ajax-panel').empty();
You delete content into ajax-panel
$(data).find('item').each(function(i){
$('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});
You're adding some html AFTER (append) the ajax-panel div
error:function()
Not sure you were looking for that, hope that help you ;)
AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology help us to load data from the server without a browser page refresh.
If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to develope next generation web application
Take a took at this
$.ajax({
type : varType, //GET or POST or PUT or DELETE verb
url : varUrl, // Location of the service
data : varData, //Data sent to server
contentType : varContentType, // content type sent to server
dataType : varDataType, //Expected data format from server
processdata : varProcessData, //True or False
success : function(msg) {//On Successfull service call
},
error : function() {// When Service call fails
}
});
I have this ajax call
function addNewRemarksToDataBase(argRemark) {
if (argRemark != '') {
// if not blank
$.ajax({
url: '../AutoComplete.asmx/AddNewRemarks',
type: 'POST',
timeout: 2000,
datatype: 'xml',
cache: false,
data: 'argRemarks=' + argRemark,
success: function (response) {
// update the field that is source of remarks
updateRemarksSource();
},
error: function (response) {
}
});
}
};
The method is defined as
[WebMethod]
public void AddNewRemarks(string argRemarks)
{
BAL.BalFactory.Instance.BAL_Comments.SaveRemarks(argRemarks, Globals.BranchID);
}
The problem is if a user enters something like long & elegant or something like smart & beautiful, something that contains &, I only get the first part before &, long (in the first case), smart (in the second one) (also notice the whitespace!)
I read in jquery ajax documentation that one should set processData to false, because it is something used for querystring or something. I added the
processData: false
but I am still getting the term before the &. I don't want to use encodeURIComponent because it will turn the & to amp; (or something like that). What I need is the full value long & elegant, smart & beautiful that will be saved to the database. How can I do this?
EDIT Doing { argRemarks: argRemark } doesn't helps! The function doesn't event gets called. Running it with firebug, and setting breakpoint in error function, I got this
[Exception... "Component does not have requested interface" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: http://localhost:49903/js/jquery-1.8.1.min.js :: .send :: line 2" data: no]"
UPDATE 2 :
Doing
data: 'argRemarks=' + encodeURIComponent(argRemark)
did the trick. But can anyone help me understand how does this works? I thought it would convert & to & but it didn't? The parameter I am receiving to the method now is just what I wanted, long & elegant, smart & beautiful, doesn't encodeURIComponent() converts special characters?
You do need to encode the argRemark. The easiest way to do this is to let jQuery do the job for you:
data: { argRemarks: argRemark }
This is different than data: 'argRemarks=' + argRemark in that by passing in an object, jQuery assumes that it needs to URL-encode the values of the properties on that object -- while if passing in a string, you are expected to have properly encoded it beforehand.
You have to URL-encode the string first:
data: 'argRemarks=' + encodeURIComponent(argRemark)
I have seen questions slightly related to this, but none that answer my problem. I have set up an Ext.Ajax.request as follows:
var paramsStringVar = 'param1=1¶m2=two¶m3=something¶m4=etc';
Ext.Ajax.request({
url: '/cgi-bin/url.pl',
method:'POST',
params:paramsStringVar,
timeout:120000,
success: function(response, opts){
var objhtml = response.responseText; //content returned from server side
console.log(objhtml);
}
});
This request retrieves the appropriate content from the backend. One parameter is outputType, which can take values {html, excel, csv}. When returning html to display I am able to handle and display it correctly. Now on to the problem...
When I set the outputType parameter to csv or excel, I get back the appropriate content as csv or tsv(excel) as requested. BUT, I don't want the content, I want a prompt to download the file(csv or excel). How can I have the browser auto prompt the user to download the file instead of just retrieving the text content within extjs?
Version 4.07 so I can't use any 4.1 only features
There seems to be no bulletproof solution but there are several approaches I would try:
1) Use an iframe instead of real XHR to POST data to the server, e.g. <form action="/something" target="myiframe"> where myiframe is the name of your hidden iframe. That way your form would use the iframe (not your main window) to submit data to the configured URL. Your server should set response header as application/octet-stream (or some ither MIME type for binary data) so the browser triggers download. Otherwise (if html returned in your case) you can just retrieve iframe's body innerHTML and display it to the user in UI. While using an iframe (or a new window) instead of XHR doesn't sound like the best idea, this solution seems to be the most reliable so far (and with best browser support).
Here is a slightly modified example from Ext.form.Basic docs page:
Ext.create('Ext.form.Panel', {
title: 'Basic Form',
renderTo: Ext.getBody(),
width: 350,
// Any configuration items here will be automatically passed along to
// the Ext.form.Basic instance when it gets created.
// *THIS* makes the form use a standard submit mechanism, not XHR
/**/standardSubmit: true,
// URL to submit to
url: 'save-form.php',
items: [{
fieldLabel: 'Field',
xtype: 'textfield',
name: 'theField'
}],
buttons: [{
text: 'Submit',
handler: function() {
// The getForm() method returns the Ext.form.Basic instance:
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
},
// You can put the name of your iframe here instead of _blank
// this parameter makes its way to Ext.form.Basic.doAction()
// and further leads to creation of StandardSubmit action instance
/**/ target: '_blank'
});
}
}
}]
});
There are two key parameters here (lines marked with /**/):
standardSubmit: true config that you pass to your form will make it do a standard submit instead of XHR.
Passing a target parameter to the form's submit action. This feature is not documented but you can see it being used in Ext.form.action.Submit source code (all options that you pass to Ext.form.Basic.submit() method end up as parameters of Ext.form.action.* instance.
In the example code I put target: '_blank' to demonstrate that it works right away (will create a new browser window). You can replace it with the name of your iframe later but I suggest that you first test how your form submits data to a regular new window and then develop logic that creates and processes an iframe. You will have to process the result inside iframe yourself, thought. It's not that difficult, see Ext.data.Connection.upload() implementation as an example of iframe processing.
ExtJS actually already uses the iframe technique for file uploads. See Ext.data.Connection and Ext.form.field.Field.isFileUpload() for an idea of how it can work.
2) Suggested here: Using HTML5/Javascript to generate and save a file.
If you don't want to go the iframe way, you can try generate data URI from response data and navigate to that URI triggering download:
content = "Hello world!";
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
window.location.href = uriContent;
Again, mimetype is essential here. This worked for me, you should note, however, that browsers impose a size limit to data URIs (256Kb is a safe bet).
3) Another answer in the mentioned thread links to FileSaver.js library the implements the (abandoned?) w3 spec. Usage and demo here. It uses [BlobBuilder] to generate a blob of binary data that is further used to initialize downloads using one of several methods. While this solution seems to work, it uses deprecated APIs and may not be future-proof.
Below is my solution. This is how I have it currently working. The response generates a download/open prompt, based on a response type of text/csv. Note that no iFrame or reference to an iframe are needed. I spent a lot of time hung up on the need for an iFrame, which actually broke my solution. An iFrame is not needed to generate a download prompt. What is needed is a request(submittal) similar to this one, along with a backend generating the appropriate csv with text/csv response header.
var hiddenForm = Ext.create('Ext.form.Panel', {
title:'hiddenForm',
standardSubmit: true,
url: /cgi-bin/url.pl
timeout: 120000,
height:0,
width: 0,
hidden:true,
items:[
{xtype:'hiddenField', name:'field1', value:'field1Value'},
// additional fields
]
})
hiddenForm.getForm().submit()
The standardSubmit line is vital
You don't need to create a form panel and make it hidden in your extjs file. We can add a html form and on click of button in extjs file we can submit the form using the url. This will work both in IE as well as chrome browsers. Below is my code i tried and its working fine,
<form action="<%=fullURL%>/DownloadServlet.do" method="get" id="downloadForm" name="downloadForm" target="_self">
</form>
click:
{
fn: function()
{
document.getElementById('downloadForm').submit();
}
}
To get it working on ExtJS 3.4:
var hiddenForm = new Ext.FormPanel({
id:'hiddenForm',
region: 'south',
method: 'POST',
url: "/cgi/test.wsgi",
height: 0,
standardSubmit: true,
hidden:true,
items:[
{xtype:'hidden', name:'p', value:p},
{xtype:'hidden', name:'g', value:g},
// ...
],
});
linkThis = new Ext.Button({
text: 'Download this CSV',
handler: function() {
hiddenForm.getForm().submit();
},
maxHeight: 30,
});
Remember that in order to make it working, you should put the hiddenForm in any container (i.e. in the same Ext.Window of the button), for example:
risultatiWindow = new Ext.Window({
title: 'CSV Export',
height: 400,
width: 500,
....
items: [...., hiddenForm]
});
I'm having a problem with loading a Sencha store. My store declaration is like this:
Ext.regModel('Car',{
idProperty: 'id',
fields: [
//'id', 'company', 'driver', 'carType','xCoordinate','yCoordinate'
{name: 'id', type: 'int'},
{name:'company', type:'string'} ,
{name:'driver', type:'string'},
{name:'carType', type:'string'},
{name:'xCoordinate', type:'int'},
{name:'yCoordinate', type:'int'}
]
});
var strr= new Ext.regStore({
id:'carStore',
model:'Car', //configuration option is the cars
proxy: {
type: 'ajax',
url: 'http://localhost:8080/A/carStore.html&callback=?',
reader: {
type: 'json',
root: 'carss'
},
},
autoLoad: true
});
And I'm keeping the store in a list:
CarManagementSystem.views.carList = new Ext.List({
id: 'carList',
store: 'carStore',
onItemDisclosure: function (record) {
var selectedCar = record;
CarManagementSystem.views.addNewCar.load(selectedCar);
CarManagementSystem.views.viewport.setActiveItem('addNewCar', { type: 'slide', direction: 'left' });
},
itemTpl: '<div class="list-item-id">{id}</div>' +'<div class="list-item-driver">{driver}</div>'
});
However, when I try to load the list with my JSON file, I get this error:
XMLHttpRequest cannot load http://localhost:8080/A/carStore.html&callback=?&_dc=1311751412006&limit=25. Origin null is not allowed by Access-Control-Allow-Origin.
sencha-touch-debug.js:7212
Uncaught TypeError: Cannot read property 'length' of undefined
I'm keeping my JSON file in an html format and it is kept in the server. I'd appreciate any help.
Thanks!
You are encountering the classic CORS issue.
It's a browser security, called web-security. If you are in dev mode, you can run Chrome and disabling this flag. But if you run your app in production on a browser, you will need to bypass this ajax specification restriction.
To bypass it, you can use proxys (such as creating a back-end script on the same domain will load for you the resource) or you can use JSON-P. For this you will need to change your store to a script tag BUT ALSO you will need the server to be able to detect a callback param and send it to you as a JS function automatically executed when inserted in the DOM.
I will add that you won't have this issue when running in Phonegap because PhoneGap is not running a web server but serves files with the file:// protocol.
If you want to learn more, and I recommand as it is a common pb when developing mobile web apps, you should learn what JSON-P is, what CORS is, and how it works.
You can't hit a port number (8080) when making an AJAX request. If you end up needing a cross-domain request change your proxy type to 'scripttag'.
You should change the proxy type from 'ajax' to 'type: 'scripttag'
Ok, I am semi-new to ExtJS, and I am building a program that has "inputs" that are listed in a grid, and in my DB these inputs can be linked to "symptoms".
I am trying to create a function that will take in the id of the input and grab all of the symptoms from the database that are linked to that symptom, and list them in a field set.
It works fine when I click on an input that is only linked to one symptom, but if the input is linked to more than one symptom, then the error says.. "invalid property id"
This is what I have for my function.
function listSymptoms(inputID){
Ext.Ajax.request({
url: "../../inc/project4.php?list=symptoms",
reader: new (Ext.data.JsonReader)({
root: "symptoms",
inputid: "id"
}),
params: {
inputid: inputID
},
method: "POST",
success: function (f, a){
var jsonData = Ext.util.JSON.decode(f.responseText);
symptomsFieldSet.body.update(jsonData.data.name);
},
failure: function (f,a){
Ext.Msg.alert('There was a problem opening your message.');
}
});
}
I have the inputID for the function being passed in when the user clicks on one of the inputs that are held inside the grid.
I believe that my problem has something to do with this line..
symptomsFieldSet.body.update(jsonData.data.name);
I am just stumped on how to handle this. Do I need to create a data store like I have for grids? Or is there an easier way to do this?
ANY help is appreciated! thanks in advance.
I think you need to rethink the structure of your JSON response object. You can send this in your JSON response to your request. If you are using Ext.util.Ajax calls instad of a form, you'll need to decode this JSON response string using the util method Ext.util.JSON.decode(). Check out the API Documentation
{
success: true,
msg: {text: 'this can be used for error message handling' },
data : [
{id:1,
chiefComplaint: 'head hurts',
symptoms: [
{symptomID: '740.1', text: 'Headache'},
{symptomID: '12352135'. text: 'and so on'}
}
]
]
}