Solved

ajax refresh issue

Posted on 2014-02-14
1
374 Views
Last Modified: 2014-02-23
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
Comment
Question by:brihol44
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39861262
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question