Using more than one ajax-form in one ejs Sails.js - sails.js

I am trying to add two forms in my ejs page using ajax-form tags and sails.js 1.0.0. Can you have multiple tags inside one ejs page? In the first form the action is updateMaplayers which looks at the controller update-maplayers.js file to update any records and the maplayers action on the second ajax-form looks at the maplayers.js controller to add a new record. When I try to run either actions they both fail if I have both . If I remove one of the ajax-form actions I I can submit. Does anyone have any examples?
My ejs file looks like
<div id="maplayers-main" v-cloak>
<div class="container" >
<div class="row">
<div class="col-sm-6">
<h1>Map Layers</h1>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-outline-primary float-right" #click="openAddMapLayerForm()">Add</button>
</div>
</div>
<hr/>
<div id="maplayers-container" >
<% _.each(maplayers, function (maplayer) { %>
<ajax-form action="updateMaplayers" :syncing.sync="syncing" :cloud-error.sync="cloudError" #submitted="submittedForm()" :handle-parsing="handleParsingForm">
......
</ajax-form>
<% }) %>
</div>
<div id="maplayers-add-container">
<ajax-form action="maplayers" :syncing.sync="syncing" :cloud-error.sync="cloudError" #submitted="submittedForm()" :handle-parsing="handleParsingForm">
........
</ajax-form>
</div>
</div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>

Related

Add class to Woocommerce out-of-stock product cards - using Hestia theme

I am using Hestia Wordpress Theme, and I am trying to add a class "out-of-stock" to product cards that meet that condition. I have tried some functions, but without success.
The product card looks like this:
<div class="card card-product pop-and-glow">
<div class="card-image">
... content of card-image ...
</div>
<div class="content">
... here comes content ...
</div>
</div>
I would like to have something like this when the product is out-of-stock:
<div class="card card-product pop-and-glow out-of-stock">
<div class="card-image">
... content of card-image ...
</div>
<div class="content">
... here comes content ...
</div>
</div>
Any hint would be appreciated.
Thanks a lot
R-)

Symfony 4 Form posting to a route

I have a problem with a form that deletes a doctrine object when posting in Symfony 4.I searched the problem and i only found that i might have to define a service? I am a beginner in symfony so dont blame me please... I am using datatables and the form is in a modal. When i press the delete button in the modal it tries to post to the route but an error comes up:
Service "request" not found: did you mean "request_stack"? Anyway, the container inside "App\Controller\ItemManagement" is a smaller service locator that only knows about the "doctrine", "form.factory", "http_kernel", "parameter_bag", "request_stack", "router", "security.csrf.token_manager", "session" and "twig" services. Try using dependency injection instead.
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteit">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
<form action="{{ path('delete_item')}}" method="POST" id="theform" >
<input type="hidden" value="" name="itemtodel" id="itemtodel"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" form="theform" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
In Controller:
/**
* #Route("/delitem", name="delete_item", methods={"POST"});
*/
public function deletetheitem(Request $request)
{
if ($request->isMethod('POST')) {
$itemid = $this->get('request')->request->get('itemtodel');
... deleting item code...
}
}
return $this->redirectToRoute("item_management", [], 301);
}
The route item_management is in the same controller and works fine. Am i doing it with the wrong way? Please if you have something to suggest i will appreciate it, thanks!!!!
try replacing
$this->get('request')->request->get('itemtodel')
by
$request->request->get('itemtodel')
First of all, you do not need to define any services since everything should work out of the box in the Symfony 4 (if you have not customize a default config).
Second, do not create static html forms in the template. Use Symfony Forms instead (https://symfony.com/doc/current/forms.html).
Third, you do not need to use request object if there should not be extra checks for query that get the object to delete. If you have not switched off param converter option (see https://symfony.com/doc/current/best_practices/controllers.html#using-the-paramconverter) of default Symfony 4, delete action could be like that:
/**
* #Route("/delitem/{item}", name="delete_item", methods={"POST"});
*/
public function deleteItemAction(Item $item)
{
$doctrine = $this->getDoctrine();
$em = $doctrine->getManager();
$em->remove($item);
$em->flush();
//process your response
}

How to parse many div's using Simple HTML DOM?

I have this HTML code
<div id="first" class="first">
One
<div id="second" class="second">
Second
<div id="third" class="third">
Third
<div id="fourth" class="fourth">
Fourth
<div id="fifth" clas="fifth">
Fifht
<div id="sixth" class="sixth">
Sixth
</div>
</div>
</div>
</div>
</div>
</div>
This code is from an external website.
I want to display 'Hi' using Simple HTML DOM from a URL.
Do you want to see something like this?
$el = $html->find("#first", 0);
while ($child = $el->children(1)) {
$el = $child;
}
echo $el->innertext;

afterAdd binding is not working

I tried to use the afterAdd binding to add some trivial animation to the elements being added to my observableArray but it does not trigger anything.
I tought I had a problem with my animation code so I coded a small alert on the function but still does not work.
Here's some sample code for the div being templated:
<div id="resultList"
data-bind='template: { name: "searchResultTemplate",
afterAdd: function(elem){alert(elem)} }'
runat="server">
</div>
This is the template:
<script type="text/html" id="searchResultTemplate">{{each(i, searchresult) resultCollection()}}
<div class="searchresultwrapper ui-corner-all ui-state-default">
<div class="searchresult">
<img src='${ ImageUrl }' alt='${ Title }' title='${ Title }' class="searchresultpicture" />
<div class="searchresultinformationcontainer">
<span class="searchresulttitle" data-bind="text: Title"></span>
<br />
<div class="searchresultdescription" data-bind="text: Description">
</div>
<span class="searchresultAuthor" data-bind="text: AuthorName"></span> at <span class="searchresultmodule" data-bind="text: ModuleName"></span> on <span class="searchresultdate" data-bind="text: PublicationDate"></span>
<br />
Take me there
</div>
</div>
</div>
<br />{{/each}}
</script>
Any ideas?
You need to qualify the template attributes with foreach like so,
<div id="resultList" data-bind='template: {
name: "searchResultTemplate",
foreach: searchresult,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: function(elem) { $(elem).hide().slideDown() }
}' runat="server">
</div>
and then, not use {{each in the template, just template it for each item stand alone.
Here, foreach attribute helps keep track of changes to the object array

How to get the index of the ACTIVE CHILD div of my container with jQuery?

<div id="container">
<div class="active">
<div class="active"></div>
</div>
<div>
</div>
</div>
How to write such a container?
Use .index() without parameters to get it's (0-based) index amongst siblings, like this:
var index = $("#container .active").index();
You can test it out here. For your example markup, it would be 0.