• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

ajax refresh issue

Here are the main parts to the pages I have... Everything seems to run great but when I click on the button (addProof() or removeProof() functions) within the inc_get_proofs.cfm page the entire component reloads and it reloads the entire image gallery (1-2 seconds of white space) that I created using the freewall js component. Just wondering if anybody can see anything with my file structure or code. I know it might be a long shot but just maybe... somebody has a fix.

Page Proofs.cfm

    
<div id="proofsContainer"></div>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="plugins/freewall/freewall.js"></script>

<script type="text/javascript">
     $(function(){

        $("#proofsContainer").load("app/inc_get_proofs.cfm";

      });
 </script>

Open in new window



inc_get_proofs.cfm

<div id="freewall"  style="position:relative; ">
  <div class="row" style="text-align:center; margin:auto;">

    <cfoutput query="qProofsGroup">

      <div id="thumbnails" class="brick col-md-2 col-sm-4">

        <a class="thumbs" href="admin/uploads/#client_id#/#secure_filename#" title="">
         <img class="img-responsive" src="admin/uploads/#client_id#/#secure_filename#">
        </a>

        <div class="addRemoveButton">
         <cfif listContains(qProofSelectionStatus, proof_id)>
          <button type="button" class='btn btn-default btn-xs' onclick="removeProof(#proof_id#);"><span class='glyphicon glyphicon-ok'></span></button>
         <cfelse>
          <button type="button" class='btn btn-default btn-xs' onclick="addProof(#proof_id#);"><span class='glyphicon glyphicon-remove'></span></button>
         </cfif>
        </div>

      </div>

      <div style="clear;both;"></div>

    </cfoutput>

  </div>
</div>


<script type="text/javascript">
      var wall = new freewall("#freewall");
      wall.reset({
        selector: '.brick',
        animate: false,
        cellW: 200,
        cellH: 'auto',
        onResize: function() {
          wall.fitWidth();
        }
      });

      var images = wall.container.find('.brick');
      var length = images.length;
      images.css({visibility: 'hidden'});
      images.find('img').load(function() {
        -- length;
        if (!length) {
          setTimeout(function() {
            images.css({visibility: 'visible'});
            wall.fitWidth();
          }, 505);
        }
      });

    </script>

Open in new window


scripts.js

function addProof(proof_id) {

	var data = "proof_id=" + proof_id;

	$.ajax({
		type: "POST",
		url: "app/func_main.cfc?method=addProof",
        data: data,
		cache: false,
		success: function() {
			freshenProofs();
		},
 		error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }

	})
};


function removeProof(proof_id) {

	var data = "proof_id=" + proof_id;

	$.ajax({
		type: "POST",
		url: "app/func_main.cfc?method=removeProof",
        data: data,
		cache: false,
		success: function() {
			freshenProofs();
		},
 		error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }

	})

function freshenProofs() {

	var client_id = $("#client_id").val();

	$("#proofsContainer").load("app/inc_get_proofs.cfm", {client_id : client_id});
};
};

Open in new window

0
brihol44
Asked:
brihol44
1 Solution
 
leakim971PluritechnicianCommented:
Posting coldfusion code, you just lost IMHO 80% of EE members able to help, you, post the rendered code instead.

Line 11 of Proofs.cfm, the end parenthese is missing

AS you decide to use jQuery, remove inline onclick event, use
$(".class").bind("click", functionToCall);
or :
$("#id").bind("click", functionToCall);

You want to pass and ID ?
You may use : the data attribute : data-id="#proof_id#"
And in your function :
function removeProof(event) {
        event.preventDefault(); // should stop refreshing the page
	var data = $(this).data("id");

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now