I have a modal dialog which has a form. When a user clicks the submit button on the dialog, I want the form to be submitted, and it works fine. But problem is after submitting the form the dialog is not closing and after refreshing only data is added into the grid.
Here is my dialog box
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 400,
width : 800,
modal : true,
title: "Currency Details",
close : function() {
$(this).dialog("close");
}
});
});
Here is my ajaxSubmit
function saveCurrencyAjax() {
var str = $("#enumCurrency").serialize();
$.ajax({
type : "POST",
url : "../currency/saveEnumCurrency.action",
data : str,
success : function(response) {alert("success call");
$('#dialog-form').dialog('close');
$('#currencyGrid').flexReload();
},
error : function(e) {
alert('Error: ' + e);
}
});
};
This is my Controller
#RequestMapping( value="/currency/saveEnumCurrency.action", method=RequestMethod.POST)
public ModelAndView saveEnumCurrency(#ModelAttribute EnumCurrency enumCurrency, Errors errors) throws Exception {
ModelAndView mvc = null;
try{
List<EnumCurrency> enumCurrencys = new ArrayList<EnumCurrency>();
enumCurrencys.add(enumCurrency);
List<EnumCurrency> enumCurrencyList =enumCurrencyService.create(enumCurrencys);
mvc = new ModelAndView("setup/enumCurrencyList");
} catch (Exception e) {
e.printStackTrace();
}
return mvc;
}
My jsp page is here....
<%# include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Currency </title>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/styles/style.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/jquery/css/jquery.ui.all.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/jquery/css/flexigrid.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/jquery/css/flexigrid.pack.css'/>" />
<script type="text/javascript" src="<c:url value='/scripts/script.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/flexigrid.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/flexigrid.pack.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/jquery-ui.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/jquery.ui.core.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/jquery.validate.js'/>"></script>
<script src="../scripts/setup/enumCurrencyList.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 400,
width : 800,
modal : true,
title: "Currency Details",
close : function() {alert("close....jsp");
$(this).dialog("close");
}
});
});
function submitForm() {
validation part is here........
};
function saveCurrencyAjax() {
var str = $("#enumCurrency").serialize();
$.ajax({
type : "POST",
url : "../currency/saveEnumCurrency.action",
data : str,
success : function(response) {alert("success call");
$('#dialog-form').dialog('close');
alert("after close.....jsp");
$('#currencyGrid').flexReload();
alert("gridcall");
},
error : function(e) {
alert('Error: ' + e);
}
});
};
</script>
</head>
<body>
<div id="dialog-form" ></div>
<fieldset>
<div id="currencyGrid" />
</fieldset>
</body>
</html>
Any help would be appreciated.Thanks in advance.
Related
I'm using summernote component and what I want to do is I want to stop the user from adding characters if the text area is pre filled, but I couldn't figure out how to stop typing event. I tried this and it worked for me
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 64)
{
e.target.blur();
}
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summernote Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="inner-container">
<div id="summernote1">
Hello Summernote ! please enter text.
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
</script>
</body>
</html>
I simply added this code in my html page and it worked for me.
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
I want that every time the "plato" button is pressed (there are several because I create them inside a loop) this function is executed
"$ ('# plato'). click (function ()" but I have observed that this code is only executed when the first button is pressed. With the others it is not executed.
menu.php:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilos.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<?php
$restaurante=$_GET['restaurante'];
chdir(getcwd()."/".$restaurante);
$id_fichero= #fopen("menus.txt","r") or die("<B>El fichero no se pudo abrir");
?>
<?php
while (!feof($id_fichero))
{
if(($linea=trim(fgets($id_fichero,256),"\n\r"))!=false)
{
echo("<button type='button' class='accordion'>".$linea."</button>");
echo("<div class='panel'>");
$id_fichero2= #fopen($linea.".txt","r") or die("<B>El fichero no se pudo abrir");
while (!feof($id_fichero2))
{
if(($linea2=trim(fgets($id_fichero2,256),"\n\r"))!=false)
{
echo("<button type='button' id='plato' name='plato'>".$linea2."</button><br>");
echo("<input type='hidden' id='nombrePlato' name='nombrePlato' value='".$linea2."'>");
}
}
echo ("</div>");
}
}
?>
<div id="carrito">
</div>
<script src="collapsible.js"></script>
</body>
</html>
ajax.js
$(document).on('ready',function(){
$('#plato').click(function(){
alert("I'm here");
var url = "anadirCarrito.php";
$.ajax({
type: "POST",
url: url,
data: $('#platos').serialize(),
success: function(data)
{
$('#carrito').html(data);
}
});
});
});
I'm using Kendo DataBound event to print the model from the row triggering the event, the problem I'm facing is the model is undefined when using DataBound different from using Edit event.
.Events(e => { e.DataBound(#<text>function(e) { alert(e.model); }</text>) })
The problem is that apparently e.DataBound is not handling the e argument as the Edit, Cancel, and the rest of events.
When trying with e.Edit(#<text>function(e) { alert(e.model); }</text>) the e.model object is loaded with the properties and values.
Is there a way to achieve this?
You can achieve that by using jQuery only:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
});
let grid = $("#grid").data("kendoGrid");
$("#grid").on('click', 'tbody td', function(e) {
let $td = $(e.target),
dataItem = grid.dataItem($td.parent()),
cellContent = dataItem[$td.data('field')];
console.log($td, dataItem, cellContent);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
Or by using the grid's change event. But in order to use that event you need to set your grid selectable to true:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
selectable: true,
change: function() {
let dataItem = this.dataItem(this.select());
console.log(dataItem);
}
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
I want to load json data from js file (url:'myTurorials.json' throwing error so I used .js,)
Please give me solution, thanks in advance.
code from 'myTurorials.js' file is as bellow
`[
{"display": "JavaScript Tutorial", "url":"http://www.w3schools.com/js/default.asp"},
{"display": "HTML Tutorial", "url":"http://www.w3schools.com/html/default.asp"},
{"display": "CSS Tutorial", "url": "http://www.w3schools.com/css/default.asp"}
]`
code from 'myTurorials.js' ends here
$(document).ready(function(){
$.ajax({
type : 'GET',
url : 'myTutorials.js',
dataType : 'json',
contentType : 'application/json',
success: function (response) {
alert('success');
},
error : function(){
alert('error');
},
complete : function(){
//init();
}
});
});
function init(){
myFunction(myArray);
}
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '' + arr[i].display + '<br>';
}
document.getElementById("id01").innerHTML = out;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 responsive website tutorial</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
<script>
</script>
<style>
</style>
<!-- my files -->
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="id01"></div>
</body>
</html>
I am making an ajax call to a controler from a view like this
jQuery.ajax({
type: "POST",
url: "index.php?option=com_virtuemart&view=participate&task=participate_request&virtuemart_product_id=2&virtuemart_category_id=5&tmpl=component&Itemid=101",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
and in the controler
I have a task method declared like this
public function participate_request(){
echo 'test';
return false;
}
And I get this response
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="el-gr" lang="el-gr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>offer_e_shop_1</title>
<link rel="stylesheet" href="/offer_e_shop_1/components/com_virtuemart/assets//css/facebox.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/components/com_virtuemart/assets//css/vmsite-ltr.css" type="text/css" />
<script src="/offer_e_shop_1/components/com_virtuemart/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery.noConflict.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery-ui-sliderAccess.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/vmsite.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/facebox.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/vmprices.js" type="text/javascript"></script>
<script type="text/javascript">
vmSiteurl = 'http://localhost/offer_e_shop_1/' ;
vmLang = ""
vmCartText = ' was added to your cart.' ;
vmCartError = 'There was an error while updating your cart.' ;
loadingImage = '/offer_e_shop_1/components/com_virtuemart/assets/images/facebox/loading.gif' ;
closeImage = '/offer_e_shop_1/components/com_virtuemart/assets/images/facebox/closelabel.png' ;
Virtuemart.addtocart_popup = '0' ;
faceboxHtml = '<div id="facebox" style="display:none;"><div class="popup"><div class="content"></div> </div></div>' ;
</script>
<link rel="stylesheet" href="/offer_e_shop_1/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/templates/mov_jean_cc_offer_e_shop_2/css/print.css" type="text/css" />
</head>
<body class="contentpane">
<div id="system-message-container">
</div>
test
</body>
</html>
How can I return only the test value alone?
You can use Jexit(),exit() or add &format=raw in url string or use given code in controller function:
$app = &JFactory::getApplication();
$app->close()
echo all your output text and just place a die(); after that
You just have to add Jexit() at the end of your task & you will get rid of full html. You can use die() as well but why if there is Jexit().
function edit()
{
// Your code
Jexit();
}
found it.. in the end of the url string.. you need to attach &format=raw
So the request will be
jQuery.ajax({
type: "POST",
url: "index.php?option=com_virtuemart&view=participate&task=participate_request&virtuemart_product_id=2&virtuemart_category_id=5&tmpl=component&Itemid=101&format=raw",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
! so easy after all.