I have a problem with the following Laravel function, the delete option does not work, it gives out a "Method not allowed" error, for some odd reason even if I give it an id to the route, it fails to show the entire page.
This is the view, admin.unsertable. I just want to correct the "delete" error
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
<!-- Font Awesome -->
<link href="{{ asset('fonts/font-awesome.min.css') }}" rel="stylesheet" type="text/css" >
<!-- Ionicons -->
<link href="{{ asset('fonts/ionicons.min.csss') }}" rel="stylesheet" type="text/css" >
<!-- Theme style -->
<link href="{{ asset('dist/css/AdminLTE.min.css') }}" rel="stylesheet" type="text/css" >
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="{{ asset('dist/css/skins/_all-skins.min.css') }}" rel="stylesheet" type="text/css" >
<!-- iCheck -->
<link href="{{ asset('plugins/iCheck/flat/blue.css') }}" rel="stylesheet" type="text/css" >
<!-- Morris chart -->
<link href="{{ asset('plugins/morris/morris.css') }}" rel="stylesheet" type="text/css" >
<!-- jvectormap -->
<link href="{{ asset('plugins/jvectormap/jquery-jvectormap-1.2.2.css') }}" rel="stylesheet" type="text/css" >
<!-- Date Picker -->
<link href="{{ asset('plugins/datepicker/datepicker3.css') }}" rel="stylesheet" type="text/css" >
<!-- Daterange picker -->
<link href="{{ asset('plugins/morris/morris.css') }}" rel="stylesheet" type="text/css" >
<link href="{{ asset('plugins/daterangepicker/daterangepicker-bs3.css') }}" rel="stylesheet" type="text/css" >
<!-- bootstrap wysihtml5 - text editor -->
<link href="{{ asset('public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<body class="hold-transition skin-blue sidebar-mini">
<header class="main-header">
<!-- Logo -->
<a href="{{ route('admin.dashboard') }}" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Plu</b>SIS</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Usuario</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
<!--Followers-->
</div>
<div class="col-xs-4 text-center">
<!-- Sales-->
</div>
<div class="col-xs-4 text-center">
<!-- Friends-->
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
Salir
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<i class="fa fa-gears"></i>
</li>
</ul>
</div>
</nav>
</header>
<body>
<div class="panel-body">
<div id="message">
</div>
<table class="table table-bordered table-striped" id="laravel_datatable">
<thead>
<tr>
<th>Email</th>
<th>Type</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
{{ csrf_field() }}
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
fetch_data();
function fetch_data(){
$.ajax({
url:"/shoppingcart/public/admin/usertable/fetch_data",
dataType:"json",
success:function(data){
var html = '';
html += '<tr>';
html += '<td contenteditable id="email"></td>';
html += '<td contenteditable id="type"></td>';
html += '<td><button type="button" class="add" id ="add">Add</button></td></tr>'
for(var count=0; count < data.length; count++){
html += '<tr>';
html += '<td class="column_name" data-column_name="email" id ="'+data[count].id+'">'+data[count].email+'</td>';
html += '<td contenteditable class="column_name" data-column_name="type" id ="'+data[count].id+'">'+data[count].type+'</td>';
html += '<td><button type="button" class="btn btn-dange delete" id="'+data[count].id+'">Delete</button></td></tr>'
}
$('tbody').html(html);
}
})
}
var _token = $('input[type="_token"]').val();
$(document).on('click', '#add', function(){
var type = $('#type').text();
if(type != ''){
$.ajax({
url:"{{ route('admin.add_data') }}",
method:"POST",
data:{type:type},
success:function(data)
{
$('#message').html(data);
fetch_data();
}
});
}else{
$('#message').html("<div class='alert alert-danger'>Debes editar el campo</div>");
}
});
});
$(document).on('click', '.delete', function() { //No obtiene la página, da un error 419 al hacer POST por alguna razón
var id = $(this).attr("id");
if(confirm("Estas seguro de esto?"))
{
$.ajax({
url:"{{ route('admin.deleteuser') }}",
method:"POST",
data:{id:id},
success:function(data)
{
$('#message').html(data);
fetch_data();
}
})
}
});
</script>
</body>
Its controller is called AdminController, which runs the following method, which communicates with the database and deletes the row. The database is defined, because if it brings me the data with the method of fetch_data
public function deleteuser(Request $request){
if($request->ajax())
{
DB::table('users')->where('id', $request->id)->delete();
echo '<div class="alert alert-success">Data deleted</div>';
}
}
These are the routes
Route::get('/admin/usertable', 'AdminController#listuser')
->middleware('is_admin')
->name('admin.usertable');
Route::get('/admin/usertable/fetch_data', 'AdminController#fetch_data')
->middleware('is_admin')
->name('admin.usertable');
Route::delete('/admin/usertable/deleteuser/{id}', 'AdminController#deleteuser')
->middleware('is_admin')
->name('admin.deleteuser');
The ajax method is seted to POST, but Laravel route method is delete. You can to set a parameter named _method with value 'delete', also the crsf token on the headers and in a parameter named _token. In addition the Laravel route expects a parameter {id} in the uri, and you're not passing it.
If you have the csrf token i a metatag, like this:
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
you can get it from there
var token = $('meta[name="csrf-token"]').attr('content');
But, if you are in blade, you can directly use the csrf_token() helper
var token = '{{ csrf_token() }}';
Then, assign the token to the ajax headers:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
}
});
Set a parameter named _method with value 'delete' and set a parameter named _token with the token value:
$(document).on('click', '.delete', function() {
var id = $(this).attr("id");
if(confirm("Estas seguro de esto?"))
{
$.ajax({
url:"{{ route('admin.deleteuser') }}",
method:"POST",
data:{
id:id,
// set a parameter named _method with value 'delete'
_method: 'delete',
// set a parameter named _token with the token value
_token: token
},
success:function(data) {
//...
}
})
}
});
Remove the {id} parameter from your laravel route, since you are not using it:
Route::delete('/admin/usertable/deleteuser', 'AdminController#deleteuser')
->middleware('is_admin')
->name('admin.deleteuser');
UPDATE
$(document).on('click', '.delete', function() {
var token = '{{ csrf_token() }}';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
}
});
var id = $(this).attr("id");
if(confirm("Estas seguro de esto?"))
{
$.ajax({
url:"{{ route('admin.deleteuser') }}",
method:"POST",
data:{
id:id,
_method: 'delete',
_token: token
},
success:function(data) {
//...
}
})
}
});
Related
I am creating an API in laravel. In which, I have to convert blade file into image and should return path of converted image or base64 in api.
I am using html2canvas.
routes are:
$router->POST('savecard', 'HomeController#SaveCard');
$router->get('save-capture/{image_for_save}', 'HomeController#savecapture');
I have to call savecard by POSTMAN and run some code and then I have a blade file template1.blade.php
My controller is:
public function SaveCard(Request $request)
{
$find_edittemplate_id = edittemplate::select('id')->where('user_id','=',$request->user_id)->first();
return view('template1');
}
public function savecapture($image_for_save)
{
$image = $image_for_save;
$image = explode(";", $image)[1];
// Remove base64 from left side of image data
// and get the remaining part
$image = explode(",", $image)[1];
// Replace all spaces with plus sign (helpful for larger images)
$image = str_replace(" ", "+", $image);
// Convert back from base64
$image = base64_decode($image);
$destinationPath = storage_path('uploads/');
file_put_contents($destinationPath,'temp.png',$image);
return response()->json(['CardSave' => $image, 'message' => 'Success'], 201);
}
After view template1 file, I created ajax call for convert image to template1.blade.php.
savecapture() will run on template1.blade.php by ajax
view is:
<!DOCTYPE html>
<html>
<head>
<title>Template One</title>
<link href="{{ url('css/style1.css') }}" rel="stylesheet" />
<link href="{{ url('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="../css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="row" id="mydiv_screenshot">
<div class="col-md-12 col-sm-12">
<!-- Logo_Section -->
<div class="row text-center backgroundf0f0f0 pd20">
<div class="logo col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-3">
<img src="{{ url('images/logo.png') }}" alt="Logo" width="100%" height="auto" max-height="130px"/>
</div>
<div class="col-md-12 col-sm-12 businessheadlineblack pdt5">
<h3>Digital Business Card</h3>
</div>
</div>
</div>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</html>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
$(document).ready(function() {
window.scrollTo(0, 0);
html2canvas(document.getElementById("mydiv_screenshot")).then(function (canvas) {
var ajax = new XMLHttpRequest();
var image_data = canvas.toDataURL("image/jpeg", 0.9);
$.ajax({
url: '{{ url("save-capture") }}',
type: 'GET',
data: {"image_for_save": image_data},
success: function(response){
if(response != 0){
//console.log(response);
}else{
//console.log(response);
}
},
async: true
});
});
});
</script>
But It show in postman complete blade file and also not run ajax.
I have to convert blade file into image
Blade files are processed by Laravel on server. There is no direct way to convert them in images.
I have used htmlcanvas in core php. But I have no idea in laravel.
PHP doesn't have this functionality. HtmlCanvas is part of browser DOM. Unless you've used some custom PHP extension, what I think you did was creating the image on browser using javascript/canvas and then send it to the server (which is exactly the way to go with Laravel as well).
I'm creating to get the user real-time location on a button click using laravel, pusher, and vue.js. All are working fine but I also insert auth Id and don't know how I use this in laravel using vue.js.
Please tell me how I save user auth id using vue.js.
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<button class="btn btn-success" #click="updateLocation">Update Position</button>
<div class="card-body">
<div id="realtimemap" style="height: 412px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
map:null,
marker:null,
center:{lat: 10, lng: 10},
data:null,
lineCoordinates:[]
}
},
methods:{
mapInit(){
this.map = new google.maps.Map(document.getElementById('realtimemap'),{
center: this.center,
zoom: 8
});
this.marker = new google.maps.Marker({
map: this.map,
position: this.center,
animation:"bounce",
});
},
updateMap(){
let newPosition = {lat:this.data.lat,lng:this.data.long};
this.map.setCenter(newPosition);
this.marker.setPosition(newPosition);
this.lineCoordinates.push(new google.maps.LatLng(newPosition.lat,newPosition.lng));
var lineCoordinatesPath = new google.maps.Polyline({
path: this.lineCoordinates,
geodesic: true,
map: this.map,
strokeColor: '#FF000',
strokeOpacity: 1.0,
strokeWeight: 2
});
},
updateLocation(){
let randomNumber=Math.random();
let position={
lat:10+randomNumber,
long:10+randomNumber
};
axios.post('/api/map',position).then(response=>{
console.log(response);
})
}
},
mounted() {
console.log('Component mounted.');
this.mapInit();
},
created(){
Echo.channel('location')
.listen('SendLocation', (e) => {
this.data=e.location;
this.updateMap();
console.log(e);
});
}
}
</script>
welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div class="flex-center position-ref full-height">
<!--#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif-->
<div class="content">
<div class="title m-b-md" id="app">
<example-component></example-component>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfRzdTIIRmsW1VaQiOzZCuRngBKqw3QUU&callback=initMap" type="text/javascript"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
the error message I get
Please help me.
Thanks in advance.
add this on your updateLocation().
let position={
lat:10+randomNumber,
long:10+randomNumber,
user_id:id_user
};
On your ExampleComponent.vue you need to define a new prop:
export default{
props: {
userId: {
type: string,
required: true,
}
}
}
On When you call the component you need to pass this prop:
<div class="content">
<div class="title m-b-md" id="app">
<example-component
:user-id="{{ Auth::user()->id }}"
></example-component>
</div>
</div>
on your updateLocation() function:
const position = {
lat: 10 + randomNumber,
long: 10 + randomNumber,
user_id: id_user
};
resources that may help you understand this solution:
Props VueJS
Page is redirecting to a new page(view) even though i set the view response(AJAX Call) to a div class on the same page. Ajax call was successful and i could see the response in console.
home.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Gen</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<spring:url value="/resources/css/gen.css" var="mainCss" />
<spring:url value="/resources/js/gen.js" var="mainJs" />
<link href="${mainCss}" rel="stylesheet" />
<script type="text/javascript" src="${mainJs}"></script>
</head>
<body id="layout">
<div id="header">
<h1>XYZ</h1>
</div>
<div id="top-nav">
<ul id="top-nav-list">
<li class="top-nav-list-item" id="gen">
<a class="top-nav-links" id="requestui" href="getrequestui">Generate</a>
</li>
</ul>
</div>
<div id="container">
</div>
</body>
</html>
gen.js
$(document).ready(function(){
$('#requestui').on('click',function(){
var urlBuild = '/gen/getrequestui';
$.ajax({
url: urlBuild,
type: "POST",
async: false,
success: function (response) {
$("#container").html(response);
},
});
});
});
Replace
<a class="top-nav-links" id="requestui" href="getrequestui">Generate</a>
with
<a class="top-nav-links" id="requestui" href="#">Generate</a>
I'm developing a phonegap app with the help of JQuery mobile that has four sections, each one has its own html file. The problem is, for instance, if I first load main.html and then navigate to list.html through a link, the listview in list.html does not show anything, but if I load list.html as the first page, it works perfect, I found this problem while testing on devices. Hope someone can help me fix this
Got this files as an example
--------clasificados.html--------------
<!DOCTYPE HTML>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"/>
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
<script src="cordova-2.6.0.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<html>
<body>
<div data-role="page" id="clasificados">
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false">
<h1>Clasificados</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-icon="arrow-r">Vehiculos</li>
<li data-icon="arrow-r">Bienes Raices</li>
<li data-icon="arrow-r">Empleos</li>
<li data-icon="arrow-r">Diversos</li>
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-id="footer1" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><br/>Periodico</li>
<li><br/>Directorio</li>
<li><br/>Clasificados</li>
<li><br/>Cuponera</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
-------vehiculos.html-------------
<div data-role="page" id="vehiculos" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Vehiculos</h1>
</div>
<div data-role="content">
<ul id='vehiculosOutput' data-role="listview">
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-id="footer1" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><br/>Periodico</li>
<li><br/>Directorio</li>
<li><br/>Clasificados</li>
<li><br/>Cuponera</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
-------vehiculos.js----------------
$(document).ready(function(){
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
// retry not set or less than 2 : retry not requested
if( !originalOptions.retryMax || !originalOptions.retryMax >=200 ) return;
// no timeout was setup
if( !originalOptions.timeout >0 ) return;
if( originalOptions.retryCount ) {
// increment retry count each time
originalOptions.retryCount++;
}else{
// init the retry count if not set
originalOptions.retryCount = 1;
// copy original error callback on first time
originalOptions._error = originalOptions.error;
};
// overwrite error handler for current request
options.error = function( _jqXHR, _textStatus, _errorThrown ){
// retry max was exhausted or it is not a timeout error
if( originalOptions.retryCount >= originalOptions.retryMax || _textStatus!='timeout' ){
// call original error handler if any
if( originalOptions._error ) originalOptions._error( _jqXHR, _textStatus, _errorThrown );
return;
};
// Call AJAX again with original options
$.ajax( originalOptions);
};
});
var output = $('#vehiculosOutput')
$.ajax({
url: 'http://www.periodicosonofertas.com/mobile/conexVehiculos.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
success:
function(data, status){
$.each(data, function(i,item){
var vehicles = '<li>'+item.name + '<p></p>'
+ '<p><font style="white-space:normal; font-size: small" >'+item.descripcion+'</p>' + '<p>'+item.contacto+'</p>' + '<p>'+item.telefono+'</p>' + '<p>'+item.correo+'</p></li>';
output.append(vehicles);
});
output.listview('refresh');
},error: function( jqXHR, textStatus, errorThrown ){
// display error status on failure
alert( 'error: ' + textStatus );
}
,timeout:5000
,retryMax: 200
});
});
When using Ajax navigation, then jQM loads only the contents of the response's body element (or more specifically the data-role="page" element). The scripts and styles inside the head tag won't execute unless the page is requested via HTTP. This explains why the listview is displayed properly when the page is loaded as first page.
In conclusion there are two possible solutions to your issue:
Initially, replace $(document).ready(function(){ with $(document).on('pageinit', '#vehiculos', function(){ inside vehiculos.js. This action is required, regardless of which of the below solution you will select.
The first solution is to add the vehiculos.js script inside the main.html page's head tag:
<script src="vehiculos.js"></script>
The second solution is to include the vehiculos.js script inside the list.html page's div:
<div data-role="page" id="vehiculos" data-add-back-btn="true">
I hope this helps.
This is the code I am using to add a comment using Ajax call.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile- 1.1.0-rc.1.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js">
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="js/global.js" type="text/javascript"></script>
</head>
<script>
var msgId = window.localStorage.getItem("clickedId");
processLogInData = function(){
var comment = ($("#comment").val());
temp = 'messageId=' + msgId +'&';
temp += 'uniqueId=' + device.uuid + '&';
temp += 'comments=' + comment;
var s= global1 +"rest/Comment/createCommentBO?"+temp;
$.ajax({
url:global1 +"rest/Comment/createCommentBO?",
data: temp,
dataType: 'xml',
timeout: 10000,
async: false,
cache: false,
type: 'POST',
success: function(data){
if($(data).find("isException").text() == "false")
{
//alert('No Exceptions found');
onTrue();
}
else
{
onFalse();
}
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
// alert("Error status :"+textStatus);
// alert("Error type :"+errorThrown);
alert("Error message :"+XMLHttpRequest.responseXML);
$("#messagelist").append( XMLHttpRequest.responseXML);
}
});
}
function onTrue(){
location.replace("comments.html");
}
function onFalse()
{
console.log("onFalse Method");
alert("Unable to create Comment!");
}
function cancel(){
location.replace("comments.html");
}
</script>
<body>
<div data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<img src="images/logo_header.png" alt="Orange"/>
</div>
<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="15" rows="15" name="textarea" id="comment"></textarea>
</form>
<div>
<div class="ui-block-a"><button type="submit" data-theme="d" onclick="cancel();" data-mini="true" data-icon="delete">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a" onclick="processLogInData();" data-mini="true" data-icon="check" >Submit</button></div>
</div>
</div>
</div>
</body>
When I enter special character as content as pass it to Ajax call I am getting an error :( Ajax call works fine with out any special characters...
Is there any way to encode the data before passing it to ajax call???Please help me on this...
Thanks in advance.
(1.)Either you should put your data into a form and serialize it and then send to the server
(2.)Second way is you can use the js inbuilt function encodeURIComponent().