I'm just started using backbone.js and ICanHaz.js for templating. But template is not getting rendered.
var MovieView = Backbone.View.extend({
render : function() {
this.model.movies.each(function(mov) {
console.log("In view " + mov.get('title') + " " + mov.get('format') + " " + mov.get('rating'));
});
var da = JSON.parse(JSON.stringify(this.model.toJSON()));
console.log("Moviedata " + da);
var movList = ich.movies_tmpl(da);
$('#movieList').append(movList);
return this;
}
});
console log prints the movie data. But not in browser. \n
And in my html,
<script id="movies_tmpl" type="text/html">
<li id="movie_{{ cid }}">
<p>Title : {{ title }}</p>
<p>Format : {{ format }}</p>
<p>Rating : {{ rating }}</p>
</li>
</script>
<h1>MovieApp</h1>
Add New Movie
<ul id="movieList"></ul>
TIA,
Arun
Try the following:
{{#movies}}
Title : {{ title }}
Format : {{ format }}
Rating : {{ rating }}
{{/movies}}
and maybe
var da = JSON.parse(this.model.toJSON());
Related
i am having issue undefined variable
this is my controller
'''
if (empty($input['emp_id'])) {
$empname = $input['emp_first_name'] . " " . $input['emp_last_name'];
return redirect()->action('EmployeeController#printQr', ['emp_code' => $input['emp_code'], 'empname' => $empname['empname']]);
} else {
return redirect()->route('employeeList');
}
'''
this is my print page
<!DOCTYPE html>
<html>
<body>
<br/><br/>
<img src="{{ Storage::url("emp_qr_codes/") }}{{ $emp_code }}.png" style="width: 250px;"/>
<br/>
Employee Code: {{ $emp_code }}
<br/>
Employee Name: {{ $empname }}
<script>
var emp_code = #json($emp_code);
var empname = #json($empname);
var ttt = '<br><br>' +
'<img src="{{ Storage::url("emp_qr_codes/") }}' + emp_code + '.png" style="width:250px;" />' +
'<br>Employee Code: ' + emp_code +
'<br>Employee Name: ' + empname;
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write('<html><body>' + ttt + '</body></html>');
newWin.document.close();
newWin.focus();
setTimeout(function () {
newWin.print();
newWin.close();
}, 150);
setTimeout(function () {
window.location.href = '/employee/index';
}, 160);
</script>
</body>
</html>
This is the error I get:
' ErrorException (E_ERROR)
Undefined variable: empname (View: /var/www/html/attendance_system/resources/views/employee/print.blade.php)
Previous exceptions
Undefined variable: empname (0)
'
The controller code you show does not render any views.
Controller should have code like this:
return view('viewNamw', ['empname' => 'test' ]);
This renders a view with variable 'empname' that you can use in blade.
Hello I have an ajax request to retrieve the list of products. the request not well knowing that my table produced is connected with a color table
table Product [id, name, imgs, color_id]
table color [id, name, code]
how can i get the color code via ajax:
Here is part of my code:
$('#product1').on('change', function(e) {
var product_id = e.target.value;
// Ajax Products Color
if(product_id > 0) {
$.get('/2c/ajax-compare?product_id=' + product_id, function(data) {
$('#productProperty1').empty();
$.each(data, function(index, prodObj) {
if(index == 0)
{
var square = '<a class="btn compare d-block mb-3 active-item">Compare<img class="pl-2 img-fluid" src="{{ asset('/asstes/images/bleu_active.png' ) }}" alt=""></a>';
var image = '<img class="img-fluid mb-3" src="{{ asset('') }}'+prodObj.imgs+' " alt="">';
}
//var color = '<p>'+prodObj.color_id+'</p>';
// here i want to get the color code "prodObj.color_id"
$('#productProperty1').append(square, image);
})
})
}
else {
$('#productProperty1').empty();
var square = '<a class="btn compare d-block mb-3">Compare<img class="pl-2 img-fluid" src="{{ asset('/asstes/images/white_desactive.png' ) }}" alt=""></a>';
var image = '<img class="img-fluid mb-3" src="{{ asset('/asstes/images/products/phones/default.png' ) }}" alt="">';
$('#productProperty1').append(square, image);
}
});
Hi I've run into a problem where I am trying to make it so when a button is clicked an object can be made. I can't get it to work as for some reason it will not validate, however if I change input type to submit it works fine.
But the problem is when I use it as submit the page redirects which defeats the purpose of using AJAX.
I can't seem to find a good tutorial for what I'd like to do, any help or links would really be appreciated!
Models
class MemberRole(models.Model,get_fields):
name = models.CharField(max_length = 20)
Form
class MemberRoleForm(forms.ModelForm):
class Meta:
model = MemberRole
Views
This view builds the form for the memberrole model
def add_member(request):
model_url = 'member-add'
rform = MemberRoleForm(instance=MemberRole())
return render_to_response('create_model.html', {'role_form': rform,'model_url': model_url,},context_instance=RequestContext(request))
This ajax called view
#require_POST
def ajax(request):
data = request.POST.get("rolename","")
if request.method == 'POST':
rform = MemberRoleForm(request.POST, instance=MemberRole())
if rform.is_valid():
new_role = rform.save()
new_role.name = data
return HttpResponse("SuccessFully Saved")
else:
return HttpResponse("Error in saving")
Template
<div id="addRoleOnMemberForm">
<form id = "addrole" onsubmit= "return false;" method="POST">
{% csrf_token %}
{% for field in role_form %}
{{ field.errors }}
{{ field.label_tag }} {{ field }} //#id_name is in here
{% endfor %}
<input id="addrolebutton" type="button" onclick = "createit()" value="Add New Role"/>
</div>
{% for x in role_list %}
<div>
<p> This shows a role was made </p>
</div>
{% endfor %}
Script
<script>
function createit(){
$.ajax({
type: "POST",
url:"ajax",
dataType:"json",
async: true,
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
rolename: $('#id_name').val()
},
});
}
</script>
I've finally managed to get it to work. :)
I have an add_member view which allows the creation of a memberrole object if it is not available in the member.role dropdown field. The memberrole object on creation will be added without a page reload to the dropdown field so it can be selected immediatly.
I'm not entirely sure if this would be the correct way of coding it, I've included all the source and hopefully it helps someone like me. Comments would be appreciated!
Models
class MemberRole(models.Model,get_fields):
name = models.CharField(max_length = 20)
class Member(models.Model,get_fields):
first_name = models.CharField(max_length = 20)
last_name = models.CharField(max_length = 20)
role = models.ForeignKey(MemberRole, null = True, blank = True)
Forms
class MemberForm(forms.ModelForm):
class Meta:
model = Member
Script
<script>
function createit(){
$.ajax({
type: "POST",
url:"addrole",
dataType:"json",
async: true,
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
rolename: $('#role_name').val()
},
success: function (json,rolename){
$('#output').html(json.message); // Prints a message to say that the MemberRole object was created
$('#roleExistsMemberForm').load(document.URL + ' #roleExistsMemberForm'); //Refreshes the dropdown box so that the newly created MemberRole can be selected
}
});
}
</script>
Views
def add_role(request):
model_url = 'role-add'
new_role = request.POST.get("rolename","")
role_list = MemberRole.objects.all()
response_data= {}
if new_role:
x = MemberRole()
x.name = new_role
x.save()
response_data['message'] = new_role + " was created"
else:
response_data['message'] = 'Nothing created'
return HttpResponse(json.dumps(response_data),content_type="application/json")
def add_member(request):
model_url = 'member-add'
if request.method == "POST":
mform = MemberForm(request.POST, instance=Member())
if mform.is_valid():
new_member = mform.save(commit=False)
new_member.save()
return HttpResponseRedirect('members')
else:
mform = MemberForm(instance=Member())
return render_to_response('create_model.html', {'member_form': mform, 'model_url': model_url,},context_instance=RequestContext(request))
create_model.html
{% for field in member_form %}
{% if field.label == 'Role' %}
<div id="roleExistsMemberForm">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
</div>
{% else %}
<div class="fieldWrapper">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
</div>
{% endif %}
{% endfor %}
<div id="addRoleOnMemberForm">
<form onsubmit="return false;">
{% csrf_token %}
<input id= "role_name" type="text"/>
<input id="addrolebut" type="button" onclick = "createit()" value="Add New Role"/>
</div>
<div id="output">
<p>Nothing here</p>
</div>
my new.html.twig code is given below. How do I clear the form fields after the form submission?
{% extends '::base.html.twig' %}
{% block body -%}
<h1>Proposals creation</h1>
<form action="{{ path('proposals_create') }}" method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<p>
<button type="submit">Create</button>
</p>
</form>
<ul class="record_actions">
<li>
<a href="{{ path('proposals') }}">
Back to the list
</a>
</li>
</ul>
<div id="result"></div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/jquery-1.10.2.js') }}" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var $url = $(this).attr('action');
var $data = $(this).serialize();
$.ajax({
type: "POST",
url: $url,
data: $data
}).done(function( result ) {
if(result.success) {
$('#result').html('<span>Monetary expense correctly saved!<br/> The data are:<br/>id: '+ result.id +'<br/>descrition: '+ result.description +'<br/>proposalname: '+ result.proposalname +'<br/>status: '+ result.status +'</span>');
}
});
});
});
</script>
{% endblock %}
Use HTMLFormElement.reset() to revert all <form> fields to their defaults.
$("form").submit(function(e) {
e.preventDefault();
var $url = $(this).attr('action');
var $data = $(this).serialize();
$.ajax({
type: "POST",
url: $url,
data: $data
}).done(function( result ) {
if(result.success) {
$('#result').html('<span> ... </span>');
}
});
this.reset(); // formElement.reset()
});
reset() resets the form to its initial state. This method does the same thing as clicking the form's reset button. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method.
I have a django project in which i have a form in a div being loaded by ajax.
when I submit the form with empty fields it returns the form with the required fields shown.
when I hit submit again it redirects to the action of the form instead of reloading the form in the div and showing errors as it does the first time I submit.
does anyone have any idea where the error might be occurring? I imagine somewhere in the ajax or view in my django project.
here is what is returned by the second submit:
{"success": false, "form": "<head>\n\n</head>\n<body>\n<form action=\"/cookbook/createrecipe/\" method=\"POST\" name=\"recipeform\" id=\"createrecipeform\">\n\t<table>\n\t\t<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='c5ea952ee2144b377b375d91b0843c75' /></div>\n\t\t<tr><th><label for=\"id_name\">Name:</label></th><td><ul class=\"errorlist\"><li>This field is required.</li></ul><input id=\"id_name\" type=\"text\" name=\"name\" maxlength=\"200\" /></td></tr>\n<tr><th><label for=\"id_author\">Author:</label></th><td><ul class=\"errorlist\"><li>This field is required.</li></ul><input id=\"id_author\" type=\"text\" name=\"author\" maxlength=\"100\" /></td></tr>\n<tr><th><label for=\"id_picture\">Picture:</label></th><td><input type=\"file\" name=\"picture\" id=\"id_picture\" /></td></tr>\n<tr><th><label for=\"id_ingredients\">Ingredients:</label></th><td><ul class=\"errorlist\"><li>This field cannot be null.</li></ul><textarea id=\"id_ingredients\" rows=\"10\" cols=\"40\" name=\"ingredients\"></textarea></td></tr>\n<tr><th><label for=\"id_steps\">Steps:</label></th><td><ul class=\"errorlist\"><li>This field cannot be null.</li></ul><textarea id=\"id_steps\" rows=\"10\" cols=\"40\" name=\"steps\"></textarea></td></tr>\n<tr><th><label for=\"id_prep_time\">Prep time:</label></th><td><ul class=\"errorlist\"><li>This field is required.</li></ul><input type=\"text\" name=\"prep_time\" id=\"id_prep_time\" /></td></tr>\n<tr><th><label for=\"id_type\">Type:</label></th><td><ul class=\"errorlist\"><li>This field is required.</li></ul><select name=\"type\" id=\"id_type\">\n<option value=\"\" selected=\"selected\">---------</option>\n<option value=\"SW\">Sandwich</option>\n<option value=\"AP\">Appetizers</option>\n<option value=\"SD\">Sauces and Dressings</option>\n<option value=\"SS\">Soups and Salads</option>\n<option value=\"VG\">Vegetables</option>\n<option value=\"RG\">Rice, Grains and Beans</option>\n<option value=\"PA\">Pasta</option>\n<option value=\"BR\">Breakfast</option>\n<option value=\"MT\">Meat</option>\n<option value=\"SF\">Seafood</option>\n<option value=\"BP\">Bread and Pizza</option>\n<option value=\"DT\">Desserts</option>\n</select><input type=\"hidden\" name=\"reset_recipe\" id=\"id_reset_recipe\" /></td></tr>\n\t</table>\n\t<p><input type=\"submit\" value=\"Submit\"></p>\n</form>\n</body>"}
here is my ajax code:
<script type="text/javascript">
$(document).ready(function(){
var form = $('form#createrecipeform');
form.submit(function(e) {
e.preventDefault();
console.log('ajax form submission function called successfully.');
//form = $(this);
console.log(form)
var serialized_form = form.serialize();
$.ajax({ type: "POST",
url: $(this).attr('action'),
data: serialized_form,
success: (function(data) {
console.log('ajax success function called successfully.');
data = $.parseJSON(data);
if (data.success) {
console.log('success');
} else {
console.log('failure');
var newForm = data.form;
form.replaceWith(newForm);
}
})
});
return false;
});
});
</script>
here is the view: (createrecipe is the action of the form and account is the page that is loading the ajax)
def createrecipe(request):
print "entering createrecipeview"
if request.method == 'POST':
print "form is a post"
form = RecipeForm(request.POST)
print form.errors
if form.is_valid():
print "form is valid"
form = RecipeForm(initial = {'original_cookbook' : request.user.cookbooks.all()[0]})
form = form.save()
t = loader.get_template('cookbook/create_form.html')
c = RequestContext(request, {
'form': form,
})
data = {
'replace': True,
'form': t.render(c),
'success': True,
}
json = simplejson.dumps(data)
return HttpResponse(json, mimetype='text/plain')
else:
print "form is invalid"
form = RecipeForm(request.POST)
t = loader.get_template('cookbook/create_form.html')
c = RequestContext(request, {
'form':form,
})
data ={
'form': t.render(c),
'success': False,
}
json = simplejson.dumps(data)
return HttpResponse(json, mimetype='text/plain')
def account(request):
user = request.user
if request.user.is_authenticated():
cookbooks = user.cookbooks
if cookbooks.all().exists():
cookbook = cookbooks.all()[0]
form = RecipeForm(initial = {'original_cookbook' : request.user.cookbooks.all()[0]})
recipe_list = cookbook.recipes.all()
else:
raise Http404
else:
return HttpResponseRedirect('/accounts/login')
t = loader.get_template('cookbook/account.html')
c = RequestContext(request, {
'form': form,
'recipe_list': recipe_list
})
return HttpResponse(t.render(c))
here is the create_form.html template:
<head>
</head>
<body>
<form action="{% url cookbook.views.createrecipe %}" method="POST" name="recipeform" id="createrecipeform">
<table>
{% csrf_token %}
{{ form.as_table }}
</table>
<p><input type="submit" value="Submit"></p>
</form>
</body>
and here is the account template that includes the create_form template:
{% extends "cookbook/base.html" %}
{% load pagination_tags %}
{% load comments %}
<h1>{{ user }}'s Cookbook</h1>
<ul>
{% block nav-cookbooks %}
<li><a class="nav-inactive" href="/cookbooks/">Cookbooks</a></li>
{% endblock %}
{% block nav-account %}
<li><a class="nav-active" href="/account/">My Cookbook</a></li>
{% endblock %}
</ul>
{% block content %}
{% autopaginate recipe_list 6 %}
<div id="recipe_cont">
{% for recipe in recipe_list %}
<div class="recipe">
<div class="button">
<img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="70" width="70" style="display:inline;" />
<h4>{{ recipe.name }}</h4>
</div>
<h5>{{ recipe.author }}</h5>
<h5>Prep Time: {{ recipe.prep_time }} minutes</h5>
<h6>Add Recipe
Remove Recipe</h6>
</div>
{% endfor %}
</div>
<div id="popupContact" class="popup">
<a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
<p id="contactArea">
<h1 style="text-align:center">Create New Recipe</h1>
{% include 'cookbook/create_form.html' %}
</p>
</div>
<div id="backgroundPopup">
</div>
<div id="col2-footer">
{% paginate %}
<p id="recipe_order_text"> order by: abc|date
</div>
{% endblock %}
{% block footer %}
<a class="create" style="cursor:pointer" >Create New Recipe</a>
{% endblock %}
sorry for putting so much code but it all seems to rely upon another piece of code so I figured all relevant code would be helpful
thanks for any help you can give me
katie
In your javascript, you're hijacking the form so that it submits via ajax, but then you're calling replaceWith on the form, so your hijacked form gets obliterated and is replaced with a new, non-hijacked form. To solve this you can either
1) Only replace the content of the form - this should work since you're only attaching events to the form itself and not its child elements
2) Write your js as a function which you can call firstly on the initial form, and subsequently on any new forms loaded via ajax.
UPDATE: for example,
<script type="text/javascript">
$(document).ready(function(){
function hijack() {
var form = $('form#createrecipeform');
form.submit(function(e) {
e.preventDefault();
console.log('ajax form submission function called successfully.');
//form = $(this);
console.log(form)
var serialized_form = form.serialize();
$.ajax({ type: "POST",
url: $(this).attr('action'),
data: serialized_form,
success: (function(data) {
console.log('ajax success function called successfully.');
data = $.parseJSON(data);
if (data.success) {
console.log('success');
} else {
console.log('failure');
var newForm = data.form;
form.replaceWith(newForm);
hijack();
}
})
});
return false;
});
};
hijack();
});
</script>