Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
<script type="text/javascript">
const btn = document.querySelector("#btn");
const btnText = document.querySelector("#btnText");
btn.onclick = () => {
btnText.innerHTML = "Thanks";
btn.classList.add("active");
};
</script>
I tried to change this content to vuejs 3. But iam unable to do and getting some error. Don't know how to convert this to Vue js
<template>
<button :class="{ active: clicked }" :onclick="clicked = true">
{{ clicked ? 'Thanks!' : 'Click me!' }}
</button>
</template>
<script setup>
import {ref} from 'vue'
const clicked = ref(false)
</script>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am trying to implement a notification system. When the user clicks onto one of the notification from the drop down box , i will use a AJAX Post request to modify the boolean field to indicate that that particular instance of the Notification has been read before.
here is my code:
This is my HTML template:
<ul class="dropdown-menu dropdown-menu-right myDropDown">
{%for noti in notifications%}
{{noti}}
<li>
<a href="#" class="top-text-block" id="{{noti.id}}" onClick="return booleanchanger(this.id);">
<div class="top-text-heading">{{noti.object_type}}</div>
<p class = 'text-muted'><small>{{noti.time}}</small>></p>
<div class="top-text-light">{{noti.message}}</div>
</a>
</li>
{%endfor%}
</ul>
This is my ajax call :
function booleanchanger(clicked_id){
var a = clicked_id
$.ajax({
url : "{% url 'read-notification' %}",
type : "POST",
data : {
'csrfmiddlewaretoken' : "{{ csrf_token }}",
'pk' : a
},
success : function(result) {
}
});
This is my notifications model:
class Notifications(models.Model):
time = models.DateTimeField(auto_now=True)
target = models.ForeignKey(User , on_delete=models.CASCADE)
message = models.TextField()
object_type = models.CharField(max_length=100)
object_url = models.CharField(max_length=500,default = 'test')
is_read = models.BooleanField(default=False)
This is my view that handles the ajax request:
def ReadNotificationView(request):
if request.method=='POST' and request.is_ajax():
pk = request.POST.get('pk',False)
obj = Notifications.objects.get(pk=pk)
obj.if_read = True
obj.save()
print(obj.if_read)
return JsonResponse({'status':'Success', 'is_read': 'changed'})
else:
return JsonResponse({'status':'Fail', 'is_read':'not changed'})
this is the url.py:
path('notification/update/' , views.ReadNotificationView , name = 'read-notification')
print(obj.if_read) from within my view returns me this:
True
However , going into the django admin page and checking the status of the is_read field shows that the code does not work . Does anyone have a solution for this ? I will greatly appreciate it!
Typo. In model you got is_read in view if_read
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm working in Vue to make a table of data from a called API, I have this Javascript code which successfully returns back the data in Chrome's console:
import JQuery from 'jquery'
let $ = JQuery
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/posts", function(data){
var employeeData = '';
console.log(data);
$.each(data, function(key, value){
employeeData += '<tr>';
employeeData += '<td>'+value.userId+'</td>';
employeeData += '<td>'+value.id+'</td>';
employeeData += '<td>'+value.title+'</td>';
employeeData += '<td>'+value.body+'</td>';
employeeData += '<tr>';
});
$('#tracerouteTable').append(employeeData);
});
});
How do I go about writing this in Vue's template tags to render this table with v-for?
You are doing it totally wrong - you don't need jQuery for this.
I've example for you
new Vue({
el: "#app",
data: {
users: []
},
created() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => this.users = response.data)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Name</th>
<th>E-Mail</th>
</tr>
<tr v-for="user in users" :key="user.id">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
</table>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Consider a web app page where there's table of data that I can edit if I have sufficient permissions. For this example, our editing is limited to selecting and deleting rows.
Which of the following two approaches for the render method of each table row is more readable?
render() {
let checkbox, deleteButton;
if (CAN_EDIT) {
checkbox = (
<checkbox-button-stuff
... this is an 8 line declaration
...
...
...
...
...
...
...
/>
);
deleteButton = (
<delete-button-stuff
... this is a 9 line declaration
...
...
...
...
...
...
...
/>
);
}
return (
<div>
{checkbox}
<other-table-stuff />
{deleteButton}
</div>
);
}
or
render() {
let checkbox = (
<checkbox-button-stuff
... this is a 9 line declaration
...
...
...
...
...
...
/>
);
let deleteButton = (
<delete-button-stuff
... this is an 9 line declaration
...
...
...
...
...
...
...
...
/>
);
if (!CAN_EDIT) {
checkbox = null;
deleteButton = null;
}
return (
<div>
{checkbox}
<other-table-stuff />
{deleteButton}
</div>
);
}
Note: the *-stuff names are used to represent nested divs + other components. Also, I say that the buttons are an "X line declaration" because this is based on actual code review from a PR that I made.
I'd argue that the latter keeps the logic of "should I render these?" in one place. The first example, however, avoids the negation (!CAN_EDIT) which IMO hurts readability.
Thanks for any input!
For inline if else test in React, you can use :
render() {
{
<div>
MY_CONDITION ?
<MyComponentToRenderIfTrue />
:
<MyOtherComponentToRenderIfFalse />
</div>
}
}
OR
render() {
{
<div>
MY_CONDITION && <MyComponentToRender />
</div>
}
}
In both, you can update your MY_CONDITION and React will re-render your component.
Hope this help.
Here's a third option:
return (
<div>
{ CAN_EDIT && <CheckboxButtonStuff /> }
<OtherTableStuff />
{ CAN_EDIT && <DeleteButtonStuff /> }
</div>
);
Also your components should be capitalized and preferably camel cased- https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I was wondering if there is an example of weather widget that can be created quickly and it would be better if it is lightweight.
I wanted to share some concepts of creating an application using JavaScript, Jquery and Reactjs. Which can help learning quickly than any other sources. Here is what I did using Reactjs:
HTML:
<div style="width: 310px;display: block;float: left; padding: 20px;">
<div id="weather-app"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script>
<script src="script.js"></script>
JS:
var Main = React.createClass({
getInitialState: function(){
return {
isLoading: true,
toggleForm: false,
isError: false
}
},
setError: function(value){
this.setState({isError: value});
},
changeLoading: function(value){
this.setState({isLoading: value});
},
onToggleForm: function(value){
this.setState({toggleForm: value});
},
onFormSubmit: function(c, s){
this.onToggleForm(false);
this.refs.change.toggleForm();
this.refs.front.reRender(c, s);
this.setState({isError: false});
},
render: function(){
return (
<div id="weather" className="weather">
<ChangeBtn ref="change" isLoading={this.state.isLoading} toggleForm={this.onToggleForm} />
<Front ref="front" isLoading={this.state.isLoading} isError={this.state.isError} setError={this.setError} loadCallback={this.changeLoading} toggle={this.state.toggleForm} />
<Form isLoading={this.state.isLoading} toggle={this.state.toggleForm} onFormSubmit={this.onFormSubmit} isError={this.state.isError} setError={this.setError} />
<Spinner isLoading={this.state.isLoading} />
</div>
)
}
})
ReactDOM.render(<Main />, document.getElementById("weather-app"));
1) Above code is preview only. Full Example can be found at this plnkr1 link.
2) I created same example using Jquery here: plnkr2
3) I wondered, what if I build the same using native JavaScript for extremely lightweight application? Then I also created the same using pure JavaScript here: plnkr3
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a page that I need to parse which is :
<div class="shadowBox someOtherBox">
.
.
.
</div>
.
.
.
<div class="shadowBox other">
<h2>OTHERS</h2>
<ul>
<li>
TITLE #1
</li>
<li>
TITLE #2
</li>
<li>
TITLE #3
</li>
</ul>
</div>
I would like to get each link inside <div class="shadowBox other"> and its TITLE. I tried to do this in many different ways, but at the end I couldn't managed to do it. Here is the code for one of my tries;
function parse(crn)
{
request("LINK_OF_PAGE", function(error, response, html)
{
if(!error)
{
var $ = cheerio.load(html);
var title, news_url, url_hash;
var json = { title : "", news_url : ""};
var links = [];
var data = $('div').filter('.shadowBox').last();
//var data = $('.shadowBox.other').children('ul').children('li').children('a');
console.log(data);
news_url = data.prev().text();
url_hash = md5(news_url);
}
});
}
Why my logic doesn't work? How would I achieve what I want?
Looks like you are trying to populate the links array with the href and text value of anchor elemnets then
var links = $('.shadowBox.other li a').map(function(){
var $this = $(this);
return { title : $this.attr('href'), news_url : $this.text()}
}).get();