Solved

ajax refresh issue

Posted on 2014-02-14
1
372 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular - code works but need to make a change 14 30
javascript: add id amounts 5 47
Jquery 10 20
Jquery Validation Messages Not Showing Up 3 8
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

770 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