Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

ajax refresh issue

Posted on 2014-02-14
1
Medium Priority
?
391 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 83

Accepted Solution

by:
leakim971 earned 2000 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…
Suggested Courses
Course of the Month13 days, 19 hours left to enroll

581 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