Executing .ajax in symfony 1.4 template

Question

What I want, is when a button is clicked, it calls the .ajax request to pass a three variables through the url to the actions, to update the database with a changed image src string.

I cannot seem to get the .ajax request to execute successfully. I am getting the error alert I setup.

Here is the jquery that executes the ajax

    //click through multiple thumbs
        $(".prev").click(function() {
            $(this).parent().find(".thumb-container").find("div:last").insertBefore($(this).parent().find(".thumb-container").find("div:first"));
            $(this).parent().find(".thumb-container").find(".thumb").removeClass("selected");
            $(this).parent().find(".thumb-container").find("div:first").addClass("selected");
                var selectedImage = $(this).parent().find(".thumb-container").find(".selected").find("img").attr("src");
                var quiltPatchId  = $(this).parent().parent().parent().parent().attr("id");
                var CalendarOfEventsID = <?php print $CalendarOfEventsID        ?>;
                var briefsPatchId;
                //update image to uploadedImage field
                 $.ajax({
                    url: "/cms.php/calendar-of-events/"+CalendarOfEventsID+"/entries/update-image/"+quiltPatchId+"/"+selectedImage,
                    dataType: "json",
                    success: function(data){
                        briefsPatchId   =   data.briefsPatchId;
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        alert("Oops!  That image was not successfully updated.");
                    }
                 });

        })

So the ajax should call the url with variables into the routing.yml here:

calendar_update_image:
  url: /calendar-of-events/:id/entries/update-image/:quiltPatchId/:selectedImage
  param: { module: calendar_of_events, action: updateImage }

which then calls the actions.class:

//update selected image
    public function executeUpdateImage(sfWebRequest $request){
        $briefsId     = $request->getParameter('id');
        $quiltPatchId = $request->getParameter('quiltPatchId');
        $selectedImage = $request->getParameter('selectedImage');

        $briefsPatch = Doctrine::getTable('CalendarOfEventsEntries')->find($quiltPatchId);

        $briefsPatch['uploadedImage'] = $selectedImage;
        $briefsPatch->save();
        $this->briefsPatchId    =   $briefsPatch['id'];
    }

Then I can pass some data back to the template updateImageSuccess.php

<?php
/*
* This page is only called via ajax, so no templating necessary; uses blank template
*/
$data = array('briefsPatchId' => $briefsPatchId);
echo json_encode($data);    
?>

I have this working in another template, using drag and drop, so I am thinking maybe I am just missing something small. Is there a way to debug the ajax call to see where it is failing?

UPDATE:

The main issue was with the symfony cache. Once cleared, it could id the page url. The problem now is getting the image string through the url successfully. I have encoded it using

selectedImage = encodeURIComponent(selectedImage);

which fixes the "/"'s but the extension is throwing off the url. This may require starting a new question. If so, let me know.

UPDATE

OK, I have gotten it to work, by splitting and popping the image so it passes successfully through the url. I would think there is a better way to do this, so please let em kow if this is an ill approach.

This is what works now:

var selectedImage = $(this).parent().find(".thumb-container").find(".selected").find("img").attr("src");

            var selectedImage = selectedImage.split('.');
            var imagePath = selectedImage[0];
            var imagePath = selectedImage[0].split("/").pop();
            var imageExt = selectedImage[1];

So I take the image string, pull out the extension into another var, then split.pop the image string location to remove all previous folders.

What I had originally was uploads/images/my_image.jpg, which is now split into two vars, which are imagePath = my_image and imageExt = jpg, then I passed the two vars through the url

url: "/cms_dev.php/calendar-of-events/"+CalendarOfEventsID+"/entries/update-image/"+quiltPatchId+"/"+imagePath+"/"+imageExt,

and picked them up and put them back together in the actions.

Answer 1

I won't give you an answer, but I will describe how I will debug it:

• just before calling $.ajax, put an alert to check if the url is ok

  alert("/cms.php/calendar-of-events/"+CalendarOfEventsID+"/entries/update-image/"+quiltPatchId+"/"+selectedImage)
  

• if the url seems to you, put some var_dump inside executeUpdateImage to see if params are ok:

  public function executeUpdateImage(sfWebRequest $request) {
    $briefsId      = $request->getParameter('id');
    $quiltPatchId  = $request->getParameter('quiltPatchId');
    $selectedImage = $request->getParameter('selectedImage');
  
    var_dump($briefsId);
    var_dump($quiltPatchId);
    var_dump($selectedImage);
    die();
  

• then check that $quiltPatchId exists in your database

• var_dump the result of saving into the database:

  $result = $briefsPatch->save();
  var_dump($result);
  die();
  

• finally, check the error message inside your javascript and test it in dev mode (frontend_dev.php for example):

  error: function(jqXHR, textStatus, errorThrown){
      alert("Oops!:"+textStatus);
  }
  

With all these information, you will be able to find what's wrong. Otherwise, come back with result about debugging.