CODEWITHSUNDEEP
pythonajaxdjangoreactjsdjango-views
pri
pri

Reputation: 630

Pass url with id to html page that is called by another url

I have a template which is called by the url /add which contains multiple registration page that is developed entirely on reactjs. In add.html page that is called by the url /add there is an image upload form too(it is also developed using reactjs) and has ajax code which requires url for posting and i need the different url {% url 'uploadImage' pk %} to provide so that i can saved to its associated instance. In short, the form is in add.html and the form requires id to save data to its associated instance.

Here's my code

urls.py

url(r'^add/$', AddView.as_view(), name="add"), // presents add.html page which displays just multiple form
url(r'^upload/image/(?P<pk>\d+)/$', UploadImage.as_view(), name="uploadImage"), // used for uploading image that is on the add.html page

views.py

class AddView(TemplateView):
    template_name = 'rentals/add.html'

class UploadImage(View):
    model = Rental
    template_name = 'rentals/add.html'
    def get(self, request, *args, **kwargs):
        return render(request, self.template_name)
    def post(self,request,*args,**kwargs):
        print(request)
        if request.FILES:
            rental = Rental.objects.get(pk=request.POST['rental'])
            print ('rental is', rental)
            for file in request.FILES.getlist('image'):
                print('file',file)
                image = Gallery.objects.create(image=file, rental=rental)
                print('image',image)
        return HttpResponseRedirect('/')

add.html

<div id="listing"> // this contains multiple form developed using reactjs code  
 </div>

{% include 'includes/script.html'%}
<script type="text/javascript">
    var data = {
        urltag: {% url 'uploadImage' %} // how can i pass url here if i pass with pk i get an error as this templated is called using /add but the form is also in this template which anyhow requires id 
    }
    console.log('url is', data); 
    $(function() {
      app.showListingSpaceForm("listing",data);
    });

</script>

ajax code

$.ajax({
      url:"/add/space/",
      data:sendData,
      type:'POST',
      success: function(data, textStatus, xhr ) {        
        $.ajax({
             url:"/upload/image/",
             data:image,
             contentType:false,
             processData:false,
             type:'POST',
             mimeType: "multipart/form-data",
             success: function(data) {
               console.log('success');
             }
        });
         window.location.href = "http://localhost:8000/";
     }
 });

Upvotes: 1

Views: 836

Answers (2)

Tushant
Tushant

Reputation: 1584

return a "pk-user" in Response Header in your view doing 

response['pk-user'] = rental.pk
return response

Now you can use the returned user id

 $.ajax({
      url:"/add/space/",
      data:sendData,
      type:'POST',
      success: function(data, textStatus, xhr ) {
        var pk = xhr.getResponseHeader('pk-user');
        console.log('pk is',pk);
        $.ajax({
             url:"/upload/image/"+pk+"/",
             data:image,
             contentType:false,
             processData:false,
             type:'POST',
             mimeType: "multipart/form-data",
             success: function(data) {
               console.log('success');
             }
        });
         window.location.href = "http://localhost:8000/";
     }
 });

Upvotes: 0

warath-coder
warath-coder

Reputation: 2122

should just be

{% url 'uploadImage' 'pk_id' %}

or if you have an object named image do

{% url 'uploadImage' image.pk %}

Upvotes: -1

Related Questions