Solved

ajax refresh issue

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
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 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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now