How can I overwrite the url of OpenLayers.Protocol.HTTP?

I tried


and it works (checked with console.log), but at the end the original url is sent (in the code below: url: '/fs/') (see attached picture).

output from firebug

This is the code:

var searchformPanel = new GeoExt.form.FormPanel({
  border: false,
  width: 250,
  protocol: new OpenLayers.Protocol.HTTP({
    url: '/fs/',
    format: new OpenLayers.Format.GeoJSON()
    xtype: 'combo',
    id: 'idcombo',
    store: new Ext.data.SimpleStore({
      data:[["Boreholes","Boreholes"],["All_layers","All layers"]]
    displayField: 'ollayer',
    valueField: 'fsclass',
    fieldLabel: 'Layer',
    emptyText: 'select a layer',
    submitValue: false,
    selectOnFocus: true,
    mode: 'local',
    typeAhead: true,
    editable: false,
    forceSelection: true,
    triggerAction: 'all'
    xtype: 'textfield',
    id: 'idtextfield',
    fieldLabel: 'Find features',
    emptyText: 'enter word',
    name: 'comments__like',
    allowBlank: false
    actioncomplete: function(form, action){
    text: 'search',
      click: function(){

        var comboLayer = Ext.getCmp('idcombo').getRawValue();
        var keyword = Ext.getCmp('idtextfield').getRawValue();

        var newUrl = '/fs/' + comboLayer + '?format=GeoJSON&comments__ilike=' + keyword + '&queryable=comments';
        console.log('1:' + newUrl);

        //this gets '/fs/' from the searchformPanel
        console.log('2:' + searchformPanel.protocol.url);

        searchformPanel.protocol.url = newUrl;
        console.log('3:' + searchformPanel.protocol.url);



1 Answer 1


Finally it worked!!!!!!!!! the trick was to take the protocol outside the formPanel and there replace the newUrl as "protocol.options.url = newUrl;". I didn't know about this "options" until I checked the line 180 of HTTP.js of OpenLayers, because I tried to use protocol.read() and I received an error pointing to this line (as explained here). Also, I was resending the "comments" and "queryables" of the formPanel (so I deleted "keyword" above), as it was posted by myself in this original question. Here is the piece of code that did the trick, simple and beautiful:

buttons: [{
    text: 'Search',
    handler: function() {
        comboLayer = Ext.getCmp('idcombo').getValue();
        newUrl = '/fs/' + comboLayer + '?format=GeoJSON';
        protocol.options.url = newUrl;

Also, I was confused about how variables and local/global scope work together, I think I came up with this solution because I understood that writing things inside "functions" (because all the above is inside a function() called in the handler) make that variables are being read by another variables before and after the function is declared, not sure if it's clear what I explained before, but sure this link explains it much better.

Hope this helps more people, especially those new in javascript and openlayers like me!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.