In the command column, I have a buttons with an onClick ajax requests. After the ajax request data inside the grid is scrolled to top.
I have included e.preventDefault(); but it works only for browser window not inside the grid.
command: [
{
name: "reset",
text: " ",
className: "btn btn-sm btn-warning fas fa-undo",
click: function (e) {
e.preventDefault();
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
data.set("Decision", "testtest");
$.ajax({
url: '#Url.Action("Waiting", "Absence", data.Register_ID),
type: "POST"
});
},
}]
How can I prevent it to scroll to top?
Related
i am triyng to save data but my page is reloading with json message on next page, how can i stop reloading page.
Ajax Code:
jQuery(document).ready(function($) {
$("#add-data").submit(function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "teachers",
dataType: 'json',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: $(this).serialize(),
success: function (data) {
alert("Added");
},
});
});
});
Submit Button:
<button type="submit" class="btn btn-secondary btn-lg shadow-lg rounded" value="ADD" id="add-data"> <span class=" fa fa-plus"> </span> ADD</button>
Store Controller:
after saving which is working fine:
return response()->json([
'status' => 'success',
'msg' => 'New esecond has been saved'
]);
It is because of you are trying to post the data to form .
If you use button type = "submit" it will redirect you to somewhere .
You should avoid using type = "submit" .
Instead use the type = "button"
<button type = "button" class="btn btn-secondary btn-lg shadow-lg rounded" value="ADD" id="add-data"> <span class=" fa fa-plus"> </span> ADD</button>
And achieve it by using click event of the button .
then get it in jquery .
$("#add-data").click(function (event) {
//Your code here
}
You can try this instead of prevent default. The reload happen, because you use form submit event.
$('#add-data').submit(false);
If you want to use prevent default, then use click event of the submit button to perform the action.
$("#add-data").click(function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "teachers",
dataType: 'json',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: $(this).serialize(),
success: function (data) {
alert("Added");
},
});
}
Remove dataType: 'json' as you're already returning JSON otherwise your button seems perfect.
Try this
jQuery(document).ready(function($) {
$("#add-data").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "teachers",
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: $(this).serialize(),
success: function (data) {
alert("Added");
},
});
});
});
Add "return false;" in the end of your submit callback..
As "add-data" is ID of your button, for your example it couldn't retrieve a submit event. That's because it submitted and didn't prevented.
So you can write something like this:
$("form").submit(function (event) {
event.preventDefault();
$.ajax({ ... });
return false; // <<< THE THING
});
Or just do that with binding an click event on button (not for submit event on button)
$("#add-data").click(function (event) {
event.preventDefault();
$.ajax({ ... });
});
With this you can leave button type, and don't need to change that to type="button".
I'm getting Cannot read property 'router' of undefined with the code below.
this.transitionTo('home') is bugging, and I'm guessing it's because of the context of this. I tried binding the ajax call to this, and it didn't help either.
Any thoughts on how to simply redirect to either 'home' or '/' after this successful ajax call?
I've tried both the Navigation (transitionTo) and the History (this.pushState) mixins.
Edit: In the meantime I found a hacky working solution that uses a page refresh. Within the ajax .done section:
history.pushState({},'','/')
window.location.reload()
Code:
var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Navigation = ReactRouter.Navigation;
var History = ReactRouter.History;
var Login = React.createClass({
mixins: [ History ],
mixins: [ Navigation ],
getInitialState: function(){
return{
email: "",
password: ""
}
},
submit: function(e){
e.preventDefault()
var data = {
email: this.state.email,
password: this.state.password,
}
// Submit form via jQuery/AJAX
$.ajax({
type: 'POST',
url: '/sessions',
data: data
})
.done(function(data) {
App.logIn(data.email)
alert('login successful!')
this.transitionTo('home')
// this.history.pushState(null, '/home')
// this.pushState(null, '/home')
})
.fail(function(data) {
alert('No Such Email or Incorrect Password')
});
},
handleEmailChange: function(event) {
this.setState({email: event.target.value});
},
handlePasswordChange: function(event) {
this.setState({password: event.target.value});
},
render: function(){
return(
<div>
Login To Your Account
<br/>
<form onSubmit={this.submit} >
Email: <input label="Email:" onChange={this.handleEmailChange} />
<br/>
Password: <input label="Password:" type="password" onChange={this.handlePasswordChange} />
<button type="submit">Submit</button>
</form>
</div>
)
}
})
Your context is changing in the inner function. The easiest way (in my opinion) to fix this is to place var _this = this in your outer function, then use _this.transitionTo in your callback.
I have a Kendo treeview that is built as below codes (see below). Each tree node has a unique data id field (that is employee Id).
I would like to have a text box ( <input type="text" ... /> ) and a button ( <input type="button" ... /> ) so user can input some id and when she hit the button, the button click event handler will let the treeview expand the node whose id matches the input id. How can I do that? Thank you very much.
Details of click event handler or the button:
function buttonExpand_onClick()
{
var id = $("textboxEmployeeId").val();
// ???
// how can I do the following code lines to expand the node with id of "id" to see all its children?
}
Details of the existing Kendo treeview building codes:
<div id="treeviewEmployee">
</div>
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
</script>
$(function(
{
var defaultRootSelectedId = 1; // 1 is employee id of the root employee on first loading
$.ajax({
url: '/Employee/AjaxGetEmployeeNodes/?id=' + defaultRootSelectedId,
type: 'GET',
dataType: 'json',
async: false,
success: function (data, textStatus, xhr) {
$("#reeviewEmployee").kendoTreeView({
template: kendo.template($("#treeview-template").html()),
dataSource: data,
select: treeview_onSelect
});
_treeview = $("#treeviewEmployee").data("kendoTreeView");
},
error:
function (xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
});
You can access the datasource on the treeview and find the node by id. I would also like to add that the treeView has a 'findByText()' method as well, in case that is what you want.
HTML
<script id="treeTemplate" type="text/x-kendo-template">
#: item.text #
</script>
<div id="content">
<div id="form">
<label>Node ID:
<input id="nodeId" type="text"/>
</label>
<button id="expandNodeBtn">Expand Node</button>
</div>
<h2>TreeView</h2>
<div id="treeView"/>
</div>
JAVASCRIPT
(function ($) {
$(document).ready(function () {
$("#treeView").kendoTreeView({
dataSource: [
{
text: 'one with id 1',
id: 1,
items: [
{
text: 'one-child-1',
id: 2
},
{
text: 'one-child-2',
id: 3
}
]
},
{
text: 'two with id 4',
id: 4,
items: [
{
text: 'two-child-1',
id: 5
},
{
text: 'two-child-2',
id: 6
}
]
}
]
});
$("#expandNodeBtn").on("click", function(e) {
var val = $("#nodeId").val();
console.log('val: ' + val);
var treeView = $("#treeView").data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(val); // find item with id = 5
var node = treeView.findByUid(dataItem.uid);
treeView.expand(node);
});
});
})(jQuery);
JSFiddle
I also put together a JSFiddle sample for you to play with: http://jsfiddle.net/jsonsee/D35Q6/
Slightly related, but I came here looking for an answer to this question: How to expand the whole branch when clicking to a parent node in angular treeview? Since I didnt find any answers, I post my solution here. Hope it helps someone.
html
<div id="treeview" kendo-tree-view="tree" k-options="options" k-on-change="selectItem(dataItem)">
</div>
controller
$scope.options = {
dataSource: dummyData,
template: $scope.treeItemTemplate
}
$scope.treeItemTemplate = "<button ng-click='expandRoot(dataItem)'>Blow up</button>";
$scope.expandRoot = function expandRoot(dataItem) {
dataItem.expanded = true;
if (dataItem.hasChildren) {
dataItem.load()
var children = dataItem.children.data();
children.forEach(function (c) {
c.expanded = true;
$scope.expandRoot(c)
});
}
}
I need a modal pop up for a button using jquery. I have worked with modal popups for an action link, nut I need it to work with a button only.
The jquery that I used for the action link:
<%: Html.ActionLink("Create", "Create_By_SupAdmin", null, new { #class = "openDialog",
data_dialog_id = "newPostDialog", data_dialog_title = "Create New Profile" }) %>
Is:
$(document).ready(function () {
$('.openDialog').live('click', function (e) {
e.preventDefault();
$('<div></div>')
.addClass('dialog')
.attr('id', $(this)
.attr('data-dialog-id'))
.appendTo('body')
.dialog({
title: $(this).attr('data-dialog-title'),
close: function () {
$(this).remove()
window.location.reload()
},
modal: true,
width: 500
})
.load(this.href);
});
});
Problem
I need to apply this same behavior for the button.
You could use jQuery UI Dialog. If you made it work with an ActionLink it would be the same with a button. Define a button and a placeholder for the dialog:
<input type="button" id="btn" value="Show modal" />
<div id="dialog"></div>
and then subscribe to the click event of the button and show the dialog:
$('#btn').click(function() {
$('#dialog').dialog().html('some contents');
});
and here's a live demo.
Now that you have shown your code here's how to adapt it to work with a button:
<input type="button" value="Create" class="openDialog" data-dialog-id = "newPostDialog", data-dialog-title="Create New Profile" data-url="<%= Url.Action("Create_By_SupAdmin") %>" />
and then:
$(document).ready(function () {
$('.openDialog').live('click', function (e) {
e.preventDefault();
$('<div></div>')
.addClass('dialog')
.attr('id', $(this).attr('data-dialog-id'))
.appendTo('body')
.dialog({
title: $(this).attr('data-dialog-title'),
close: function () {
$(this).remove();
window.location.reload();
},
modal: true,
width: 500
})
.load($(this).attr('data-url'));
});
});
when i click the New Trade button in the form it opens jquery ui dialog. but, i have link button in the gridview when i click the link button it should open jquery ui dialog, it opens jquery ui dialog before clicking the new trade button. but, after clicking the new trade button, if i click link button in the gridview it invoke "ViewTradeDialog(id)" function, the dialog doesn't open, it shows error message "$vwdia.html(data).dialog is not a function". my code follows:
#using (Html.BeginForm("NewTrade", "Trade", FormMethod.Post, new { id = "searchForm" }))
{
<div id="searchbtn">
<input id="btn_newtrade" type="submit" value="New Trade" />
</div>
}
jquery code
<script type="text/javascript">
$(function () {
var $loading = $('<img src="../../loading.gif" alt="loading">');
var $dialog = $('<div></div>').append($loading);
$('#searchForm').submit(function (e) {
var url = this.action;
$.ajax({
autoOpen: false,
url: url,
success: function (data) {
$dialog.html(data).dialog({
zIndex:1,
width: 1400,
height: 600,
resizable: false,
title: 'New Trade Details',
modal: true,
buttons: {
"close": function () {
$dialog.dialog('close');
},
"Add Trade": function () {
$dialog.dialog('close');
$.ajax({
type: 'POST',
url: url
});
}
}
});
}
});
return false;
});
});
function ViewTradeDialog(id) {
alert(id);
var $vwdia = $('<div></div>');
var url = '/Trade/ViewTrades?tradeid=' + id;
$.ajax({
url: url,
success: function (data) {
$vwdia.html(data).dialog({
width: 600,
height: 600,
resizable: false,
title: 'View Trade Details',
modal: false,
buttons: {
"close": function () {
$vwdia.dialog('close');
}
}
});
}
});
return false;
}
You are probably overwriting the dialog plugin each time you click new trade, since it is applied to the same element:
$dialog.html(data).dialog(...
It is possible that by replacing the html of the dialog and reapplying the plugin that it is breaking. Are you seeing any other errors in the JS console?