I made a custom contextmenu directive. And I am trying to log something when the contextmenu opens. However the same function runs 5 times, when its supposed to run once. I am trying to e.stopPropagation(); but the CSS doesn't apply from the first go, I have to click again, and then its working properly. What am I doing wrong?
Here's how my link function in the directive looks:
$ele.on('contextmenu', '*', function(e) {
e.preventDefault();
e.stopPropagation();
$scope.$apply(function () {
$scope.visible = true;
$('.parented').css({left:e.pageX, top:e.pageY, position: 'absolute'}).show();
var ele = e.target;
$scope.souls = {
elementType: ele.nodeName,
content: ele.innerText,
id: ele.id,
class: ele.className
}
console.log($scope.souls)
})
});
And the HTML
<div prevent visible="isVisible" ravi="someData" sound="sound(souls)" souls="souls">
<p class="haseebtesting">abc</p>
<table class="datatable">
<tr ng-repeat="t in templateData">
<td class="haseebtesting" ng-click="current.selected = t; confusedFunction(t)" id="{{'test ' + $index}}">{{t.templateName}}</td>
<td>{{t.templatePath}}</td>
</tr>
</table>
{{souls}} <br /><br />
<div ng-if="isVisible" class="parented">
<div class="btn-group-vertical notclick" role="group" aria-label="Vertical button group">
<form class="haseebform">
<input type="text" ng-model="souls.entername" placeholder="Enter name"> <br>
<input type="text" ng-model="souls.entercomment" placeholder="Enter comment">
<input type="button" class="btn btn-info" ng-click="addT(souls)" value="Submit">
</form>
</div>
</div>
</div>
Working link here: https://aijazkhan81.github.io/contextmenu/
Related
$(document).ready(function (){
$('#myForm').submit(function (e) {
e.preventDefault(); //Do not submit the form
var dataflow=$(this).serialize(); //Get the inputs value
$.post('{{route('homepage.update')}}', dataflow, function (data){ //post.create is the route name
//The request is done, do something with the server response
});
});
});
I use this to save form without refresh
Here is my route
Route::post('/homepage/update', 'AdminController#Update')->name('homepage.update');
And my html
{{ csrf_field() }}
<div class="form-group">
<label for="title"><b class="fa fa-pencil"></b> Title</label>
<input id="title" class="form-control" value="{{ $article->title }}" name="title">
<br />
<label for="content"><b class="fa fa-home"></b> Desc</label>
<div class="box-body pad">
<textarea id="content" name="content" rows="10" cols="80">
{{ $article->content }}
</textarea>
</div>
</div>
<center>
<div class="form-group">
<button type="submit" class="btn btn-success btn-sm"><b class="fa fa-save"></b> Submit</button>
</form>
My function who update ajax data
public function HomePage(Request $r) {
$article = Article::find(1);
$article->title = $r->input('title');
$article->content = $r->input('content');
$article->homepage = 1;
$article->save();
}
The problem is i must click twice button to save two forms when i click one it submit only title! Please help how to fix that
When I press accept button task should be updated with new value which I wrote in input.Sad thing it doesnt work like I want.Do i need to add id`s to array with objects?
or maybe there is some good method to send a object to function.Here`s the code:
<tbody>
<tr ng-repeat="task in tasks">
<td>
<button class="btn btn-danger" ng-click="deleteTask(task)">Delete</button>
<!-- $index-->
</td>
<td>{{task.taskName}}</td>
<td>
<input type="checkbox" ng-model="statusCheck"> </td>
<td style="{{setStyleToTd(statusCheck)}}">{{statusChecker(statusCheck)}}</td>
<td>
<button class="btn btn-primary" ng-click="editTask(task)">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-offset-8 edit-box" ng-show="editBoxShow">
<form action="" class="form-inline">
<div class="form-group">
<lable>Edit task here:</lable>
<div class="input-group">
<input type="text" class="form-control" ng-model="editTaskInput"> </div>
<button type="button" class="btn btn-success" ng-click="acceptEdit()">Accept</button>
</div>
</form>
</div>
$scope.editTask = function(taskToEdit) {
$scope.editBoxShow = true;
$scope.editTaskInput = taskToEdit.taskName;
}
$scope.acceptEdit = function() {
$scope.editBoxShow = false;
$scope.taskToEdit = $scope.editTaskInput;
}
You can capture the index of your table data while clicking edit button and then update the table data by using this index in acceptEdit function.
$scope.editTask = function (taskToEdit) {
$scope.selectedIndex=$scope.tasks.indexOf(taskToEdit);
$scope.editBoxShow = true;
$scope.editTaskInput = taskToEdit.taskName;
}
$scope.acceptEdit = function () {
$scope.editBoxShow = false;
$scope.tasks[$scope.selectedIndex].taskName=$scope.editTaskInput;
}
I'm stuck with this simple form submission. I feel that everything is right, but it doesn't work.
My html :
<html ng-app = 'myApp'>
<div ng-controller="Tabs">
...
<form ng-submit="sendClicked()" >
<div class="input-group">
<input type="text" class="form-control" ng-model="text"/>
<span class="input-group-btn" >
<button class="btn btn-info" type="submit">SEND</button>
</span>
</div>
</form>
...
</div>
</html>
My app.js :
myApp.controller('Tabs', function ($scope) {
$scope.sendClicked = function () {
console.log('can reach here');
if($scope.text) {
socket.emit('send message', $scope.text);
$scope.text = null;
}
};
});
Must be input type submit, but you have button, that doesn't ever have type attribute property
I'm trying to display a custom bootstrap popover:
popover:
<div id="popover-head" class="hide">Add new tab</div>
<div id="popover-content" class="hide">
<form class="form-inline" id="pop-form" method="POST" action="../admin/FLT_add_tab.do">
<div class="form-group">
<!-- my form -->
<input type="text" name="newTab" id="newTab" required="required" pattern="^[\S\s]{3,25}[A-z]+$" title="Only accept alphabet characters and length is minimum of 3 and max of 25 " placeholder="Tab name.."/>
<button class="btn btn-primary" type="submit" ><i class="icon-white icon-ok"></i></button>
<button class="btn" type="button" onClick="popRemove();" ><i class="icon-remove"></i></button>
</div>
<p></p>
<p style="color:red" id="error-message"></p>
</form>
</div>
My div is dynamically generated from the jQuery UI from draggable to sortable this is the structure of the sortable:
<div class="question-constructor multiple-choice-problem">
<label for="textbox" class="question-label"> #. Edit this to define question: </label>
<input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;"><label for="option-1-1">Thing 1</label>
<input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;"><label for="option-1-2">Thing 1</label>
<input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;"><label for="option-1-3">Thing 1</label>
<input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;"><label for="option-1-4"> Thing 1</label>
</div>
But for some reason the popover doesn't show:
$(function() {
$(document).on('click', '#preview .question-constructor', function( event ) {
var id = $('#preview .question-constructor').index(this);
$('#preview .question-constructor').each( function() {
if( $('#preview .question-constructor').index(this) == id ) {
$(this).popover('show');
console.log('true' +$('#preview .question-constructor').index(this) );
} else {
console.log('not' +$('#preview .question-constructor').index(this) );
}
});
event.preventDefault();
});
$('#preview .question-constructor').each( function() {
$(this).popover({
html : true,
trigger : 'manual',
title : function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
});
});
The #preview id is the id of the sortable div, and the .question-constructor class is the div inside the sortable where the popover should show up. My guess is the initialization of the popover is wrong but I couldn't get it right.
What I want to do is:
When an item ( i.e item 1 ) is clicked show popover
But when another item ( i.e item 2 ) is clicked hide all other popover and show the popover beside this item.
UPDATE:
Here is a fiddle when I put the initialization on the onClick event it shows the popover but not to my desire behavior.
does this help ?
http://jsfiddle.net/Rusln/AWF82/
…
$("#preview").on('click', '.question-constructor', function(e) {
e.preventDefault();
$(".question-constructor").not(this).popover('hide');
});
…
receive: function (ev, ui) {
//init popover
$(this).data().sortable.currentItem.popover({
content: "hallo world"
});
}
The following code-snippet enables me to edit the elements on a page, however, clicking on the P tags all the others change into inline-editor mode as well. How can I rework this script, such that it only enables the editor for the P tag clicked?
JS code:
function Profile($scope) {
$scope.person = {
name : "Test Name",
company : "Test",
role : "Test Role"
};
}
function Editor($scope) {
$scope.editorEnabled = false;
$scope.enableEditor = function() {
$scope.editorEnabled = true;
$scope.name = $scope.person.name;
$scope.company = $scope.person.company;
$scope.role = $scope.person.role;
},
$scope.disableEditor = function() {
$scope.editorEnabled = false;
},
$scope.save = function() {
$scope.person.name = $scope.name; //var = input.value
$scope.person.company = $scope.company;
$scope.person.role = $scope.role;
$scope.disableEditor();
}
}
HTML:
<div ng-controller="Profile">
<div ng-controller="Editor">
<h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="name" ng:required ng-model="name">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
<h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} # {{person.company}}</h5>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="role" ng:required ng-model="role"> # <input type="text" size="30" name="company" ng:required ng-model="company">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
</div>
</div>
The way I would most likely approach it would be to introduce new field into $scope that identifies which field is editable. Then your ngShow directive would contain an expression, something along these lines:
<span ng:show="editable == 'company'">
Your ngClick directive would look something like this:
<h1 ng:click="editor = 'company'">
Your cancel button would set this to null and your enable/disable editor functions would be gone. Bear in mind all this is top of my head, hopefully it points you in the right direction. I'll improve this answer if I get a chance.