Develop Reference

how to put laravel echo function in javascript

How to use echo in strings in javascript datatable
className:'text-center',
data:'stage',
name:'stage',
render: function(data)
{
return '<td class="text-center">{{trans('stage.'' + data.stage + ')}}</td>';
}
error: syntax error, unexpected ''+ data.stage +'' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ')'
I have tried escaping using backlash it still doesnt look right.
<td class="text-center">{{trans('stage.'.$sub->stage)}}</td>
//this is what i want to display if i were to use laravel blade

Blade is rendered before you hit the page. So you cannot do what you're trying to, like this. I would recommend using xDebug to see how this works more consistently
If you want to include a translated variant of text in the variable stage, you either need to fetch some HTML and pass it back rendered, via an ajax request for example
OR
You can write/use a javaScript helper which will translate text for you.
OR (best)
You can write an accessor/getter on stage which will translate it before it's received by your DataTable
This would mean writing the following on the Model where the attribute stage comes from. Please note, prefixed Method name with 'get' and 'Attribute' as the suffix.
public function getStageAttribute()
{
return trans($this->stage);
}
For more information please see https://laravel.com/docs/8.x/eloquent-mutators#defining-an-accessor

Unable to find why base64 image code is invalid

Can anyone tell me why the base64 image code linked in here is invalid? Some kind of issue with the syntax I believe?
My file looks like this:
/9j/4AAQSkZJR..........39b/lRk5HGVz8
I have truncated it (the "...") since the entirety of the file won't fit in the question.
Here is my Javascript Fetch API POST code:
function submitPhoto(){
console.log("name: "+name);
console.log("email: "+email);
console.log("market: "+market);
//console.log("base64: "+b64data);
fetch('http://fanbeauties.com/app/submit-photo.php?pass=MY_PASS', {
method: "POST",
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: '&name='+name+'&email='+email+'&market='+market+'&picture='+b64data
});
};

Yes I believe the syntax is not correct and it may not be a valid image or some parts are removed.
check this link https://jsfiddle.net/casiano/xadvz/
<img src="data:image/gif;base64,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">
the format should likely began with this: data:image/gif;base64, or just this image/gif;base64, so first section shows image type. in your case it should be image/jpeg and the ;base64, is like defining that its a base64 inline image.
And at the end of the code or just end of anybase64 coded content there should be like == or = but you should not remove it its part of the coded content.

So this is another answer. I post it separately, cause your question is changed.
There is two way to achieve this. First is to use URL-encode and URL-decode. So before you send the base64 string containing your image data u do encode it then on the server side you first echo is to see how it looks. Then you use PHP urldecode to get your string back.
URL decode/encode with javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
URL decode/encode in PHP:
http://php.net/manual/en/function.urlencode.php
https://stackoverflow.com/a/4744917/9453736
But the other way which should fit better in this situation is to use the post body when u wanna post something. But as you are already using a library to do that I guess its just the limitation of your library. So try to check if there are other ways to set parameters for POST with that library. Like you are adding the parameters to body but the way you do it (the library) just limits you. so for example you cant use some characters when you do this:
{
body: '&name='+name+'&email='+email+'&market='+market+'&picture='+b64data
{
So in case you failed to find other ways to do the request. Like you can do it with form object with pure javascript and other ways. so in case you failed just go with the first one try to url encode the data.
example of url encode in javascript:
// encodes characters such as ?,=,/,&,:
console.log(encodeURIComponent('?x=шеллы'));
// expected output: "%3Fx%3D%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"
console.log(encodeURIComponent('?x=test'));
// expected output: "%3Fx%3Dtest"
example of urldecode in PHP:
$query = "my=apples&are=green+and+red";
foreach (explode('&', $query) as $chunk) {
$param = explode("=", $chunk);
if ($param) {
printf("La valeur du paramètre \"%s\" est \"%s\"<br/>\n", urldecode($param[0]), urldecode($param[1]));
}
}

Sending ajax request when data sent is html data

I worked on a mvc program where on a click of a button I send data inside a TextArea to the controller. Typically my code worked as expected but this was not the case when the data inside the TextArea consisted of a html based data.
Html Code:
<textarea id="bodyInfo"> </textarea>
<button onclick="Submit()" id="submitInfo">Create Notification</button>
ajax:
function Submit() {
$.ajax({
url: '#Url.Action("GetResults", "notification")',
type: 'GET',
data: { body: $('#bodyInfo').val()),
cache: 'false',
dataType: 'html',
success: function (result) {
$('#resultsTblInfo').html(result);
}
});
return false;
}
Sample Example of TextArea data:
<table style="width:100%">
<tbody>
<tr>
<td class="ellipses-title" style="color:#22557f;font-size:15px;font-weight:bold;margin-bottom:10px;margin-top:7px;border-right:1px solid #BFF1FD;text-align:right;padding-right:15px;"> The New Admin is Coming</td>
<td class="ellipses-text" style="padding-left:15px;" valign="center">Hello<br> Hello2</a>.
</td>
</tr>
</tbody>
</table>
What was seen above would work when TextArea was not html data but raw text but would fail when it was html data.
I was able to make this work by using
"encodeURIComponent($('#bodyInfo').val())" instead of "$('#bodyInfo').val()"
In the controller side, doing
"body = HttpUtility.UrlDecode(body)";
Are there better alternatives to achieve the same thing? Am I using encodeURIComponent against its intended nature? Why does $('#bodyInfo').val() not work when passing html values through ajax? If this question is a duplicate I would appreciate it if someone could provide me a link (i tried searching through google but found no satisfying answer)

That's exactly what you'd use encodeURIComponent for. The idea is to encode the (potentially problematic) value when sending it, then decoding it server-side in order to use it however it is need.
In fact, there's an example of this on MDN's encodeURIComponent documentation page:
To avoid unexpected requests to the server, you should call encodeURIComponent on any user-entered parameters that will be passed as part of a URI. For example, a user could type "Thyme &time=again" for a variable comment. Not using encodeURIComponent on this variable will give comment=Thyme%20&time=again. Note that the ampersand and the equal sign mark a new key and value pair.

I think that in your textarea html data, there was a "&" character.
is so, the problem is that the character & cannot be sent to a server. this is because when sending data, the browser gathers data, separed by & character http://example.php?a=something&b=other. so, if there is & character in your data the browser will not be able to distinguish if it is a data or URI component.
The common solution is to transform your data to base64 text before it is sent. this way you can decode it in your server using base64_decode fonction (case of php). you can base64 encode your data using window.btoa function in javascript. another solution is what you used.
a third solution is to replace & chars by something you know it will never exist in you textarea like [##alpha].
hope it helps

replace/ encode < and > with jquery/ ajax before submitting

I have the following code which is part of a comment form in a page.
$.ajax({
type: "POST",
url: "path/to/script.php",
data: $(form).serialize(),
success: function(data) {
$('#comment_form').fadeOut(1000);
var url = 'path/to/script.php';
$('#commenti').load(url + ' .comment');
}
});
On server side all characters like < and > get stripped but i need them to allow displaying code snippets inside the <code></code> tags.
Is there any way with jquery to convert the < to < and > to > before submitting so the comments will display without stripped characters?

I haven't found any good client side solution yet, so here is a little php-serverside function.
For anyone who needs it:
function specialchars($special) {
$replace = array(
'<' => '<',
'>' => '>',
'&' => '&'
);
return strtr($special, $replace);
}
Use the function specialchars based on your needs.

Try this
function htmlEncode(value){
//create a in-memory div, set it's inner text(which jQuery automatically encodes)
//then grab the encoded contents back out. The div never exists on the page.
return $('<div/>').text(value).html();
}
function htmlDecode(value){
return $('<div/>').html(value).text();
}
and take a look at this post HTML-encoding lost when attribute read from input field

Using jQuery, you can retrieve a string with < and > replaced by html-entities by using this approach.
var text = "<script>alert('I am XSS');<script> This is regular ol' text!";
var escapedText = $('<i>').text(text).html();
// "<script>alert('I am XSS');<script> This is regular ol' text!"
The output might need additional escaping when posting however, due to the ampersands (?querystring=string&string2=...)
I would recommend you escape the <> characters with encodeURIComponent, and do post-processing on the server, like others have suggested previously:
var text = "<script>alert('I am XSS');<script> This is regular ol' text!";
var escapedText = encodeURIComponent(text);
// "%3Cscript%3Ealert('I%20am%20XSS')%3B%3Cscript%3E%20This%20is%20regular%20ol'%20text!"
// post with AJAX
then on the server
echo htmlentities(rawurldecode($_POST["query"]));
// "<script>alert('I am XSS');<script> This is regular ol' text!"
If your app is facing the WWW, you ought to ensure all input is being properly sanitized before being output to users - OWASP Encoding Project and HTML Purifier are worth checking out!

Calling Django `reverse` in client-side Javascript

I'm using Django on Appengine. I'm using the django reverse() function everywhere, keeping everything as DRY as possible.
However, I'm having trouble applying this to my client-side javascript. There is a JS class that loads some data depending on a passed-in ID. Is there a standard way to not-hardcode the URL that this data should come from?
var rq = new Request.HTML({
'update':this.element,
}).get('/template/'+template_id+'/preview'); //The part that bothers me.

There is another method, which doesn't require exposing the entire url structure or ajax requests for resolving each url. While it's not really beautiful, it beats the others with simplicity:
var url = '{% url blog_view_post 999 %}'.replace (999, post_id);
(blog_view_post urls must not contain the magic 999 number themselves of course.)

Having just struggled with this, I came up with a slightly different solution.
In my case, I wanted an external JS script to invoke an AJAX call on a button click (after doing some other processing).
In the HTML, I used an HTML-5 custom attribute thus
<button ... id="test-button" data-ajax-target="{% url 'named-url' %}">
Then, in the javascript, simply did
$.post($("#test-button").attr("data-ajax-target"), ... );
Which meant Django's template system did all the reverse() logic for me.

The most reasonable solution seems to be passing a list of URLs in a JavaScript file, and having a JavaScript equivalent of reverse() available on the client. The only objection might be that the entire URL structure is exposed.
Here is such a function (from this question).

Good thing is to assume that all parameters from JavaScript to Django will be passed as request.GET or request.POST. You can do that in most cases, because you don't need nice formatted urls for JavaScript queries.
Then only problem is to pass url from Django to JavaScript. I have published library for that. Example code:
urls.py
def javascript_settings():
return {
'template_preview_url': reverse('template-preview'),
}
javascript
$.ajax({
type: 'POST',
url: configuration['my_rendering_app']['template_preview_url'],
data: { template: 'foo.html' },
});

Similar to Anatoly's answer, but a little more flexible. Put at the top of the page:
<script type="text/javascript">
window.myviewURL = '{% url myview foobar %}';
</script>
Then you can do something like
url = window.myviewURL.replace('foobar','my_id');
or whatever. If your url contains multiple variables just run the replace method multiple times.

I like Anatoly's idea, but I think using a specific integer is dangerous. I typically want to specify an say an object id, which are always required to be positive, so I just use negative integers as placeholders. This means adding -? to the the url definition, like so:
url(r'^events/(?P<event_id>-?\d+)/$', events.views.event_details),
Then I can get the reverse url in a template by writing
{% url 'events.views.event_details' event_id=-1 %}
And use replace in javascript to replace the placeholder -1, so that in the template I would write something like
<script type="text/javascript">
var actual_event_id = 123;
var url = "{% url 'events.views.event_details' event_id=-1 %}".replace('-1', actual_event_id);
</script>
This easily extends to multiple arguments too, and the mapping for a particular argument is visible directly in the template.

I've found a simple trick for this. If your url is a pattern like:
"xyz/(?P<stuff>.*)$"
and you want to reverse in the JS without actually providing stuff (deferring to the JS run time to provide this) - you can do the following:
Alter the view to give the parameter a default value - of none, and handle that by responding with an error if its not set:
views.py
def xzy(stuff=None):
if not stuff:
raise Http404
... < rest of the view code> ...
Alter the URL match to make the parameter optional: "xyz/(?P<stuff>.*)?$"
And in the template js code:
.ajax({
url: "{{ url views.xyz }}" + js_stuff,
... ...
})
The generated template should then have the URL without the parameter in the JS, and in the JS you can simply concatenate on the parameter(s).

Use this package: https://github.com/ierror/django-js-reverse
You'll have an object in your JS with all the urls defined in django. It's the best approach I found so far.
The only thing you need to do is add the generated js in the head of your base template and run a management command to update the generated js everytime you add a url

One of the solutions I came with is to generate urls on backend and pass them to browser somehow.
It may not be suitable in every case, but I have a table (populated with AJAX) and clicking on a row should take the user to the single entry from this table.
(I am using django-restframework and Datatables).
Each entry from AJAX has the url attached:
class MyObjectSerializer(serializers.ModelSerializer):
url = SerializerMethodField()
# other elements
def get_url(self, obj):
return reverse("get_my_object", args=(obj.id,))
on loading ajax each url is attached as data attribute to row:
var table = $('#my-table').DataTable({
createdRow: function ( row, data, index ) {
$(row).data("url", data["url"])
}
});
and on click we use this data attribute for url:
table.on( 'click', 'tbody tr', function () {
window.location.href = $(this).data("url");
} );

I always use strings as opposed to integers in configuring urls, i.e.
instead of something like
... r'^something/(?P<first_integer_parameter>\d+)/something_else/(?P<second_integer_parameter>\d+)/' ...
e.g: something/911/something_else/8/
I would replace 'd' for integers with 'w' for strings like so ...
... r'^something/(?P<first_integer_parameter>\w+)/something_else/(?P<second_integer_parameter>\w+)/' ...
Then, in javascript I can put strings as placeholders and the django template engine will not complain either:
...
var url = `{% url 'myapiname:urlname' 'xxz' 'xxy' %}?first_kwarg=${first_kwarg_value}&second_kwarg=${second_kwarg_value}`.replace('xxz',first_integer_paramater_value).replace('xxy', second_integer_parameter_value);
var x = new L.GeoJSON.AJAX(url, {
style: function(feature){
...
and the url will remain the same, i.e something/911/something_else/8/.
This way you avoid the integer parameters replacement issue as string placeholders (a,b,c,d,...z) are not expected in as parameters