For a little game, i don't understand why my picture is not refreshed.
When i click on my picture, this changes state to another one and picture is refreshed. But it only works once. When i click another one time, the refresh doesn't work.
I can see the http query in my ssl_access.log of my apache server once. I click and there's not another http query.
For the click capture, i use jquery, and for the generated picture, it's php who's doing the job. I am used to php and script is good. But ... ??
The generated code is :
(html)
<td>
<div id="df6a055">
<img src="getImage.php?id=f6a055" id="if6a055">
</div>
</td>
<td>
<div id="df76601">
<img src="getImage.php?id=f76601" id="if76601">
</div>
</td>
....
(jquery)
$(document).ready(function () {
$('#if6a055').on('click', function () {
$('#df6a055').html('<img src="getImage.php?j=query&id=f6a055&randval='+ Math.random() + '" id="if6a055">');
});
$('#if76601').on('click', function () {
$('#df76601').html('<img src="getImage.php?j=query&id=f76601&randval='+ Math.random() + '" id="if76601">');
});
...
Php objects generated are stored in a php array $_SESSION to be get by all php scripts.
I tried to use a math.random put it wasn't necessary... doesn't work.
What can i change in this jquery query to call a processed picture at the infinite ?
Thanks a lot for your interest :)
The reason for the problem is clear: You attach event handler to an html element that is replaced so handlers get lost.
It's not clear why you replace the entire img element instead of just changing the src property, that would be my take here.
$('#if6a055').on('click', function () {
this.src = 'getImage.php?j=query&id=f6a055&randval='+ Math.random();
});
Related
After inserting a code using Ajax , this code does not run the javascript it should be querying as it is identical to the code that had already been written in the page
I am trying to load a page, and update the database using Ajax (working).
I have a button that adds a new row to the page (working), in order to add more data to the table
Problem is that the new "appended" code does not execute the ajax as the written code does!
this code has been written while I loaded the page
<td contenteditable="true" id="comments:99" class="html5"> 1q33</td>
this is the new code that I added using .append
<td contenteditable="true" id="comments:103" class="html5"> 2</td>
this is the javascript that is triggered on the initial code but it is not working for the .appended one
$(':input[class=html5]').change(function () { });
I expected that the almost identical code that I wrote using .append worked similarly to the code I wrote while loading the page.
You can use as below::
$(':input[class=html5]').on("change", function () { });
You should use the three parameter version of the on method, it will also apply to HTML that is added later to the document
$(document).on('change', ':input[class=html5]', function () {
//...
});
You need to refer a parent element that exists when you load the page for first time for trigger envents on your dynamically added elements
$('body').on('change', ':input[class=html5]', function() {
});
I've come to a road block and I'm hoping someone can explain where my error is. I'll do my best to explain my script, sorry if I overly break it down.
I have a div on page1.html that is being replaced by a div on page2.html via jquery's .load(). My script which is found in the <head> is as following:
<script>
$(document).ready(function(){
$(".info").click(function(event){
var gallery = event.target.id;
$("#replace").load( "folio/" + gallery + ".html #grab", function () {
jQuery("#gallery").unitegallery({
theme_enable_preloader: true,
tiles_col_width: 250,
tiles_space_between_cols: 10,
tiles_min_columns: 1,
tile_enable_image_effect:true,
tile_image_effect_type: "blur",
tile_image_effect_reverse: true,
lightbox_show_numbers: false,
lightbox_top_panel_opacity: true,
lightbox_overlay_opacity:1
});
$("#return").on("click", function(){
$("replace").load(" Portfolio1.html #replace1") });
});
});
});
</script>
The script executes when a <a id="folio1" class="info"> is clicked. A variable gallery will store the id value of the <a id="folio1" class="info"> that was clicked. I then select the <div id="replace"> which will have its content updated via Jquery's .load(). Variable gallery that is storing the id will be used inside the .load to determine the appropriate page url the new content will be loaded from. So far this works perfectly.
On success of .load() I create a call back function which executes .unitegallery(). Unitegallery() successfully executes and beautifully creates the image gallery. After unitegallery() I have another function which is waiting using .on("click" for a click event on <a id="return">. This function will perform another .load that will return <div id="replace"> back to its previous state. This is when things stop working.
Note:The selector used for the function <a id="return">, was inserted into the webpage via the first .load().
Issue: This .on("click" is not executing.
Ideas on why that portion of the script is not executing? Is the <a id="return"> loaded into the document by the first .load() not able to be selected?
Ask me questions for clarification! :)
please see my comment below if it works.
$("#return").on("click", function(){
$("replace").load(" Portfolio1.html #replace1") // you need the # because i think the event registration will not recognize 'replace'
//enter code here`
});
Also if this does not work, can you please paste your html so we can see the structure of your document.
I also just want to point out, there is nothing wrong when the event registration will be moved outside of the load scope.
I have using dropzone.js in mvc by following this tutorial for uploading images but after uploading the image the thumbnail image still showing and I need it to be removed after every time I upload an image.
I have tried to replace the generated HTML after uploading the image using jQuery but it not showing correctly as the first time I need to refresh the page to show correctly but I don't want to do that.
$("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
+'<div class="fallback">'
+'<input name="file" type="file" multiple />'
+'<input type="submit" value="Upload" />'
+'</div>');
You can try this:
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
More information here:
http://www.dropzonejs.com/#dropzone-methods
removeAllFiles() and removeFile() will trigger the server-side removal too, if you hooked Dropzone to remove files as well.
The solution to clear it only client-side, remove the file preview, and if you had a blank state message, remove the dz-started class to prevent the Dropzone CSS from hiding it:
$('.dropzone')[0].dropzone.files.forEach(function(file) {
file.previewElement.remove();
});
$('.dropzone').removeClass('dz-started');
Another option (similar to answer of Giraldi, but then when all files are completed):
myDropzone.on("queuecomplete", function () {
this.removeAllFiles();
});
it was actually an easy thing to do but some time it go hard so i just delete the dropzone generated code using jquery and add a button with 'id = btnCreate' then
$('#btnCreate').click(function () {
$('div.dz-success').remove();
});
and when i upload the thumbnail image removed after i click the button
Just an fyi...
The method removeAllFiles is not necessarily the prime choice. Which is the same as removeFile(file).
I have an event handler for dropZone's removedfile event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method removeAllFiles (as well as the individualized removeFile(file)) fires the event removedfile which deletes the uploaded images in addition to clearing the thumbnails.
So one could add some finessing around this but in the reality of it the method as mentioned in the primary answer on this thread is not correct.
Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method disable() will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.
My work around is to manually reset the containing div for dropzone:
document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""
This clears the thumbnails without firing off the event removedfile which is supposed to be used for deleting an image from the server...
docsDropzone.on('complete', function (response)
{
$(".dz-preview").remove();
});
Above works for me
try this on your library dropzone dropzone.js; but set time out to auto close 2500
success: function(file) {
if (file.previewElement) {
return file.previewElement.classList.add("dz-success"),
$(function(){
setTimeout(function(){
$('.dz-success').fadeOut('slow');
},2500);
});
}
},
It is very simple if you listen complete event in your dropzone options:
const dropZoneOptions = {
url: ...,
// complete event
complete: function(file) {
setTimeout(() => {
this.removeFile(file); // right here after 3 seconds you can clear
}, 3000);
},
}
Another way of clear those thumbnails
Dropzone.prototype.removeThumbnail = function () {
$(".dz-preview").fadeOut('slow');
$(".dz-preview:hidden").remove();
};
then you call it like this:
{your_dropzone}.removeThumbnail();
I am trying to call up an "example.js" file containing an image gallery (the bulk of the code for the gallery, seeing as how i will have 3 to choose from) using:
<img src="img.jpg" onClick="thisAction()" />
What I want to do is place all of the contained "example.js" code within a div elsewhere in the page. I have a seperate javascript.js file that references the thisAction() function, but I can't seem to figure out where to go from there, nothing is working.
I have tried a load function, and I've delved into ajax, not really knowing what I'm doing... Please help!
Ok, so just to clarify ^^^above^^^, I am not actually trying to call in any javascript in my "example.js", I was simply instructed to do so, because of some reason I can't recall that had to do with recognizing the formatting.... because what I actually want is some html to be inserted, which includes some divs. What i'd like, if possible, is to insert all the code in "example.html" which may contain something like this:
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
into a div elsewhere on the page in my existing "gallery.html" by calling the function with the
<img src="examplenavpic.jpg" onClick="thisAction() />
tag.
The closest I've been able to come was with this:
function thisAction()
{
$('#divonmygalleryhtml').html('gallery1.html');
}
But this doesn't actually spit out the above mentioned example.html code, it just puts the text "gallery.html" into the div. I've tryed simply copying all the code from example.html and replacing it with
function thisAction()
{
$('#divonmygalleryhtml').html('
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
');
}
But that won't do a thing... Ive tried the last 2 suggestions with no luck... Any suggestions would be great.
Not sure if i get you right. With jQuery's AJAX - function and the HTML - function you can reload code from the server and place it in a div on your page:
$(document).ready(function({
function thisAction(){
$.ajax({
url: "/pathToFile/example.js",
cache: false
}).done(function( data ) {
$("#targetDiv").html( data );
});
}
thisAction();
});
To call a external javascript file you would do
function thisAction(){
var divfill = getElementById(targetDiv);
var newscript;
newscript.src ="example.js";
divfill.innerHTML = (newscript);
}
Hope that works :).
Looks like you can use jQuery then you can use the .load() to load the contents of a remote source to an element
function thisAction() {
$('#divonmygalleryhtml').load('example.html');
}
So I have an asp:imagebutton for lets say loginning into a web site.
OnClick the page does xyz and then redirects you, there is a pause time between the redirect from when the button was clicked. To make the wait a bit more user friendly I am replacing the button with a processing image and text the javascript that does this is:
$(document).ready(function () {
$(".ShowProcessing").click(function () {
$(this).replaceWith("<img src='/content/images/processing.gif' /> Processing");
});
});
This is the button:
<asp:ImageButton ID="Login" runat="server" OnClick="Login_Click" CssClass="ShowProcessing" />
The problem is the change to processing image happens but the asp OnClick event however does not fire.
Instead of replacing the entire element with something else entirely, just alter the src of the current element:
$(".ShowProcessing").click(function () {
$(this).attr("src", "/content/images/processing.gif");
});
This is if ImageButton is rendered as an img proper, somewhere, and not just some funky input with scripting (I don't recall off the top of my head, and webforms does some things in strange ways). Then proceed to insert text after the existing element as desired.
Instead of using .replace() tried and succeeded with:
$(".ShowProcessing").click(function () {
$(this).hide();
$(this).after("<img src='/content/images/processing.gif' /> Please wait..." )
});
I guess you may try to remove the first image and then add the new processing image.
instead of replace use (Remove then add) functions.