Hello community need some assistance,
I am trying since couple days to add into exit-popup template one php button which onlick interacts with less template and adds Voucher code into the cart.
I got no success yet, if someone could assist me. Could possibly award somehow :)
Theoreticly its could even be possible to inject into sql onlick instead of injecting to element.
Github Original cart_footer.tpl
Github Original Voucher.tpl
Platform: shopwaredemo.de/
and any item to cart, so you can see elemnts
So far i have done:
Form:
<form method="post" action="{url action='addVoucher' sTargetAction=$sTargetAction}">
<div class="popupbanner">
<a href="#" class="myButton" clickon="copyToClipboard('#p2');ImportVoucher('FREE16')" >
<div class="close-exit-intent" title="Click to Copy" type="submit">
<input id="p2" class="p22" value="FREE16" />
<p id="p2" class="p22">FREE16</p>
</div> </a>
<p class="click2copy">Click to Copy ↗</p>
<p>No thanks</p>
</div>
</form>
Copytoclipboard js
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
ImportVoucher js
function ImportVoucher(element) {
$('input[type=p2]').click(function(ev) {
ev.preventDefault();
$(this).siblings('input[type=p2]').removeClass('selected');
$(this).addClass('selected');
$('#sVoucher').val($('.selected').val());
$temp.remove();
}
added id into cart-footer
<input type="text" class="add-voucher--field is--medium block" id="sVoucher" name="sVoucher" placeholder="{"{s name='CheckoutFooterAddVoucherLabelInline'}{/s}"|escape}" />
Related
I know there are similar questions, but the answers and suggestions are not working for me and i am unable to understand the error.
On click of a button, I want to load another HTML in a new tab. When I try, "www.google.com", I am able to do so. But when I try to load an HTML which I have, I am unable to do so.
Here is the relevant html code :
<div id="button">
<a href="www.google.com"
target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
<form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
target="_blank">
<input type="submit"
value="Go to Google" />
</form><!-- THIS Fails -->
<input type=button
onClick="location.href='tree_custom.html'"
value='click here'
target="_blank"><!-- THIS Fails -->
</div>
The error I get is this, which I am not able to debug :
Error: Not Found
at /Users/tarun/Work/marchDemo/app.js:41:13
at Layer.handle [as handle_request] (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:312:13)
at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:330:12)
at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:271:10)
at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:618:15
at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:256:14)
at Function.handle (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:176:3)
at router (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:46:12)
You can use onclick="window.open('tree_custom.html')" with target="_blank" instead of using location.href
<div id="button">
<a href="www.google.com"
target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
<form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
target="_blank">
<input type="submit"
value="Go to Google" />
</form><!-- THIS works -->
<input type=button onclick="window.open('tree_custom.html')"
value='click here'
target="_blank"><!-- THIS WORKS -->
</div>
Check working plunker : https://plnkr.co/edit/PQk5al?p=preview
If you're using Angular, I would suggest using ng-click. Then you can bind a method that's defined in your controller to the ng-click. Which will open a new tab with the desired url when the user clicks your button.
body.html
<div ng-controller="exampleCtrl as ctrl">
<button ng-click="ctrl.directToGoogle()"></button>
</div>
index.js
angular.module('exampleModule', [])
.controller('exampleCtrl', ['$scope', '$window',
function ($scope, $window) {
$scope.directToGoogle = function () {
$window.open('https://www.google.com', '_blank')
}])
This would be a simple and contrived example of how to bind a method to ng-click and do what you described in your question earlier.
When I click on continue button it checks clients ID in firestore database and if ID does'nt exist then $scope.filePath = "createClient.htm" is called. everything is working fine but when I call this piece of code inside firebase function nothing happens
Inside HTML
<div ng-include="filePath" class="ng-scope">
<div class="offset-1 offset-sm-2 col-11 col-sm-7">
<h2>Enter Client ID</h2>
<br>
<div class="form-group">
<label for="exampleInputEmail1">ID</label>
<input id="client_id" type="text" class="form-control" placeholder="Client ID">
</div>
<div class="float-right">
<button type="button" class="btn btn-danger">Cancel</button>
<button type="button" ng-click="searchClient()" class="btn btn-success">Continue</button>
</div>
</div>
</div>
Internal Script
<script>
$scope.searchClient = function()
{
//$scope.filePath = "createClient.htm"; it works here
var id= document.getElementById('client_id').value;
db.collection("clients") // db is firestore reference
.where("c_id","==",id)
.get()
.then(function(querySnapshot)
{
querySnapshot.forEach(function(doc)
{
if(!doc.exists)
{
console.log("Client Does'nt Exist");
$scope.filePath = "createClient.htm"; // but doesnt works here inside this firebase function
}
}
);
}
);
}
};
</script>
when console.log is shown and firebase function are fully executed then if I click on "Continue" Button again it works fine and content of createClient.htm is shown inside ng-include="filePath". why i need to click twice ?
I have implemented 2 ng-app in single html page and it is not working for second one, Please look into my code and suggest me where I am wrong.
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<p>Name : <input type="text" data-ng-model="name"></p>
<h1>Hello {{name}}</h1>
<p> Name: <input type="text" id="first_name" ng-model="first_name"></p>
<h1 ng-bind="first_name"></h1>
<div ng-init="firstName='jaskaran'" id="firstName"></div>
<p> This is the first name:<span ng-bind="firstName"></span></p>
<p id ="x">
my first calculation {{5+5}}
</p>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController" >
<input type="text" id="firstLast" ng-model="firstLast">
Full Name: {{firstLast}}
</div>
script here
var xApp = angular.module('shoppingCart',[])
xApp.controller ('ShoppingCartController', function($scope) {
}) ;
var app = angular.module('namesList',[])
app.controller('NamesController',function($scope){
$scope.firstLast = "Nitin" ;
});
Visit This URL You Can find the Solution
http://shrestha-manoj.blogspot.in/2014/06/can-angularjs-have-multiple-ng-app.html
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
Try this :
angular.bootstrap(document.getElementById("App2"), ['namesList']);
It will bootstrap your second ng-app directive.
some friends and I have started a team project but we are stuck at this point. We made a function of the site to add comments under every post. The problem is that when submit is clicked it adds the comment but doesn't refresh the page which causes some problems. The author stays "anonymous" and when refresh button is clicked it shows an alert:
The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you wish to continue?
However, if we just type the URL again and click ENTER everything is good: the author shows up and the comment appears only once. So the only solution for us is to redirect to the same page. Here is the form:
<div style="text-align: left">
<div><i>Leave your comment</i>
</div>
<form method="post">
<fieldset>
<p>
<textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
</p>
<p>
<input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
</p>
</fieldset>
</form>
</div>
This is how the comments are printed on the page:
<h3>Comments</h3>
<br>
<div>
#foreach (var comment in ViewBag.Comments) {
<section class="row">
<article class="post col-md-12">
<div class="about">
Posted on <i>#comment.Date</i>
#if (comment.AuthorId != null) { #: by <i>#comment.Author.FullName</i>
}else { #: by <i>anonymous</i>
}
</div>
<div class="body">#comment.Text</div>
</article>
</section>
}
</div>
Thanks in advance!
Use the #Ajax.BeginForm() helper.
In the AjaxOptions(), you'll want to set the Httpmethod to "Post", InsertionMode.InsertBefore (or After depending on where you want new comments), and UpdateTargetId = "your-comment-div".
You'll need to include jquery.unobtrusive-ajax.js so the Ajax helper works correctly. You can use the nuget package manager to pull it in. Be sure to add it to your jquery bundle.
Then, you need to create the post action in your controller to accept the comment params and return a partial view.
Doing thIs keeps the Ajax confined to a razor helper and controller method.
View:
#using (Ajax.BeginForm("AjaxAddComment",
"MyController",
/* route params */,
new AjaxOptions()
{
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "commentsDiv",
HttpMethod = "Post"
}, htmlAttributes: new { /* ... */ }))
{
<div class="form-horizontal">
#* comment form... *#
</div>
}
...
<div id="commentsDiv">
<div class="comment">...</div>
<div class="comment">...</div>
</div>
Controller:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
var newComment = ... // comment viewModel
// add comment to db
await db.SaveChangesAsync();
return PartialView("_CommentPartial", newComment);
}
_CommentPartial:
<div class="comment">
...
</div>
I am trying to clone elements when clicking a button. I was trying to use ko.toJS. On page load it works fine, but when I want clone the items, it is unable to bind the items (like, value, Text, etc.).
Here is the HTML:
<div class="stockItems-inner" data-bind="foreach: StockItems">
<div data-bind="if: Type=='Input'">
<div class="stock_container_input">
<input type="text" data-bind="value: Value" />
</div>
</div>
<div data-bind="if: Type=='Radio'">
<div class="stock_container_control">
<div data-bind="foreach: Options">
<div class="stockLbl">
<input type="radio" data-bind="text: Text, checked:$parent.Value, attr:{'id':Id, 'name': $parent.Text, 'value': Value}" />
<label data-bind="attr:{'for':Id}, text: Text"></label>
</div>
</div>
</div>
</div>
</div>
<div class="addItem">
<button type="button" data-bind="click: CloneItem"><img src="images/add.png" alt="" /></button>
</div>
The View Model:
ConfigurationStockViewModel = function() {
var self = this;
this.StockItems = ko.observableArray();
this.ApplyData = function(data){
self.StockItems(data.Items);
}
this.CloneItem = function(StockItems){
self.StockItems.push(ko.toJS(StockItems));
};
};
When clicking the button, an error is thrown: Unable to process binding. I am using JSON data for binding.
Not exactly sure what end result you want without working code, but sounds like you want to clone the last item in array and add to array?
If so, I think you have an error - your add button click binding will never pass anything to the function you defined, since it is outside the foreach. You need something like this:
this.CloneItem = function() {
var toClone = self.StockItems()[self.StockItems().length - 1]
self.StockItems.push(toClone);
};
Here is a simplified example without radio buttons, etc:
http://jsfiddle.net/5J47L/