Ext Js proxy pass parameter - javascript

I want to pass a parameter to my Store proxy to retrieve the right data from the server. I need to pass the parameter without the name prefix and just the value.
Instead of this kind of url :
myAppUrl/collections/units?collectionId=54
which can be done like this:
myStore.getProxy().extraParams.collectionId = 54;
I want to have a call like this:
myAppUrl/collections/54/units
My web service is adapted for both calls I just need the correct client code to pass the parameter.
Please help and advise.

An old question, but I write for anyone with this problem. I implemented the idea of #Saki in this package (for ExtJS 6) because of my own needs:
https://bitbucket.org/alfonsonishikawa/extjspackages/wiki/Server%20URL%20Placeholders
The idea is being able to use an URL like:
proxy: {
type: 'rest',
url: 'myAppUrl/collections/${collectionId}/units',
appendId: false
}
With that package, you just have to configure your proxy like above and call #load() with params:
store.load({
params: {
collectionId: 54
}
});
(getProxy().extraParams can be used as default value)
This is the source code as example that you asked #Saki about.

It looks almost like REST request but not exactly as REST places indexes at the end of url. You could solve it by implementing a custom buildUrl of Ajax or Rest proxy. In any case, see how is this method implemented in Rest proxy.

you can set your url dynamically and then call load method of store using below code.
store.getProxy().setUrl('your new url');
store.load();
but if you gonna use this method then you have to set correct url every time other-vice may be you will get wrong data.

Related

Laravel resource route delete from axios

I would like to setup axios to delete a record using a resource route:
axios.delete('/job-management', this.deletedata).then((res)=>{
console.log(res);
})
For my routes I have:
Route::resource('job-management', "PositionsController", [ 'as' => 'jobs']);
Now, in my PositionsController I have:
public function destroy(Positions $positions) {
return $positions;
}
But the above always returns "method not allowed". How can I handle a delete request with the axios delete() method?
Laravel throws the MethodNotAllowedHttpException when we attempt to send a request to a route using an HTTP verb that the route doesn't support. In the case of this question, we see this error because the JavaScript code sends a DELETE request to a URL with the path of /job‑management, which is handled by a route that only supports GET and POST requests. We need to change the URL to the conventional format Laravel expects for resourceful controllers.
The error is confusing because it hides the fact that we're sending the request to the wrong URL. To understand why, let's take a look at the routes created by Route::resource() (from the documentation):
Verb URI Action Route Name
GET /job-management index job-management.index
GET /job-management/create create job-management.create
POST /job-management store job-management.store
GET /job-management/{position} show job-management.show
GET /job-management/{position}/edit edit job-management.edit
PUT/PATCH /job-management/{position} update job-management.update
DELETE /job-management/{position} destroy job-management.destroy
As shown above, URLs with a path component of /job-management are passed to the controller's index() and store() methods which don't handle DELETE requests. This is why we see the exception.
To perform a DELETE request as shown in the question, we need to send the request to a URL with a path like /job-management/{position}, where {position} is the ID of the position model we want to delete. The JavaScript code might look something like:
axios.delete('/job-management/5', this.deletedata).then((res) => { ... })
I've hardcoded the position ID into the URL to clearly illustrate the concept. However, we likely want to use a variable for the this ID:
let positionId = // get the position ID somehow
axios.delete(`/job-management/${positionId}`, this.deletedata).then((res) => { ... })
The URL in this form enables Laravel to route the DELETE request to the controller's destroy() method. The example above uses ES6 template string literals because the code in the question suggests that we're using a version of JavaScript that supports this feature. Note the placement of backticks (`) around the template string instead of standard quotation marks.
as I can see in your code above, you pass Positionseloquent as a parameter to destroy method but in your vueJS you don't pass this object. for that you would pass it like this :
axios.delete('/job-management/${id}').then((res)=>{
console.log(res);
})
and the id param inside the url of ur axios delete, it can object of data or any think.
i hope this help you

Node JS - Express.js get query with multiple parameters

I'm quite new to JavaScript and Node JS and I have a such a situation. When I try to call get of express.js with a single parameter everything works fine, but when I try to call get with more than one parameter, it trims the query.
For example I have such call and function
app.get('path/data', myFunc);
// in another file
function myFunc(req, res) {
// do some stuff
}
When the url is path/data?id=5 or path/data?name=foo everything is fine. But when I use for example url like path/data?id=5&name=foo in myFunc I get url as path/data?id=5. So I get url's first part - what is before & sign.
Now what am I doing wrong? Is there something that I'm missing? How can I get whole url in myFunc without being trimmed?
Use
app.get('path/data?:id?:name')
And for retrieving the values, use req.query.id and req.query.name.
For accessing the REST api, you need to hit:
http://localhost:8080/demo?id=3&name=stack
So, by this you can add multiple parameters in your api.
Hope this helps.
I found the problem. I was requesting via curl and it turns out that shell command trims in case of there is an & in the url. So there is a need no add quotes like this
curl "path/data?id=5&name=foo"

Convert many GET values to AJAX functionality

I have built a calendar in php. It currently can be controlled by GET values ​​from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values​​? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});
Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.
You can return a JSON string from the server and handle it with Ajax on the client side.

JMVC jQuery.Model - cannot override a standard REST URL

I am using Javascript MVC models separately from JMVC (just as a jquery plugin).
Everything works fine, instead of overriding REST URLs. Look:
I am trying to override URL to retrieve data from server.
But it still tries to load data from URL "/Tags.json" instead of "/t.json".
$.Model.extend("Tag",
{
findAll: "/t.json" //overriding URL for findAll (just like in the manual)
});
$(function(){
Tag.findAll({}); //loads '/Tags.json' instead of 't.json'
})
Is it a bug?
$.Model("Tag",{
findAll : "/t.json"
},{})
You need to call $.Model not $.Model.extend
.findAll docs

ExtJS: Multiple JsonStores from one AJAX call?

I have an ExtJS based application. When editing an object, an ExtJS window appears with a number of tabs. Three of these tabs have Ext GridPanels, each showing a different type of data. Currently each GridPanel has it's own JsonStore, meaning four total AJAX requests to the server -- one for the javascript to create the window, and one for each of the JsonStores. Is there any way all three JsonStores could read from one AJAX call? I can easily combine all the JSON data, each one currently has a different root property.
Edit: This is Ext 2.2, not Ext 3.
The javascript object created from the JSON response is available in yourStore.reader.jsonData when the store's load event is fired. For example:
yourStore.on('load', function(firstStore) {
var data = firstStore.reader.jsonData;
otherStore.loadData(data);
thirdStore.loadData(data);
}
EDIT:
To clarify, each store would need a separate root property (which you are already doing) so they'd each get the data intended.
{
"firstRoot": [...],
"secondRoot": [...],
"thirdRoot": [...]
}
You could get the JSON directly with an AjaxRequest, and then pass it to the loadData() method of each JSONStore.
You may be able to do this using Ext.Direct, where you can make multiple requests during a single connection.
Maybe HTTP caching can help you out. Combine your json data, make sure your JsonStores are using GET, and watch Firebug to be sure the 2nd and 3rd requests are not going to the server. You may need to set a far-future expires header in that json response, which may be no good if you expect that data to change often.
Another fantastic way is to use Ext.Data.Connection() as shown below :
var conn = new Ext.data.Connection();
conn.request({
url: '/myserver/allInOneAjaxCall',
method: 'POST',
params: {
// if you wish too
},
success: function(responseObj) {
var json = Ext.decode(responseObj.responseText);
yourStore1.loadData(json.dataForStore1);
yourStore2.loadData(json.dataForStore2);
},
failure: function(responseObj) {
var message = Ext.decode(responseObj.responseText).message;
alert(message);
}
});
It worked for me.

Categories