I'm using dropzone from https://www.dropzonejs.com to upload a single picture. I'm loading a html-page with the command .load of jquery like this:
$( "#showsettingsother" ).click(function() {
$('#settingscontent').load('settingscompany.html', function() {
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone($('.dropzone').get(0), {
init: function() {
var me = this;
$.getJSON(webserverurl + '?sessionid=' + sessionkey + '&settings=true&company=checkCompanyPhotoExists', function( json ) {
if(json.STATUS == 'OK') {
var mockFile = { name: "Firmenlogo", dataURL: getcompanypicture, accepted: true };
me.createThumbnailFromUrl(mockFile, getcompanypicture);
me.files.push(mockFile);
me.emit('addedfile', mockFile);
me.emit('thumbnail', mockFile, getcompanypicture);
me.emit('complete', mockFile);
}
});
},
... [shortened]
}
}
}
Inside settingscompany.html I've got this:
<form id="uploadCompanyPicture" action="" class="dropzone"></form>
Now I've got a menu like this:
<ul>
<li id="settingscompany"><a id="showsettingscompany" href="#">Company settings</a></li>
<li id="othersettings"><a id="showsettingsother" href="#">Other settings</a></li>
</ul>
<script>
$( "#showsettingsother" ).click(function() {
$('#settingscontent').load('othersettings.html');
}
</script>
My problem is the following:
I upload a picture to dropzone (image1.jpg). This works fine.
I upload a second picture to dropzone (image2.jpg). This works also fine.
Now I click on "Other Settings" and I click back to "Company settings".
The result is, that it shows image1.jpg and not image2.jpg.
When I restart the browser it shows image2.jpg.
So it displays the wrong picture. Has anybody an idea what I'm doing wrong?
I belive you aren't calling back your onload picture or the function you are using to get the first image. My advise is that you encapsule the function, when you change the picture you called it back and it gets to refresh at your command.
// I'would have added a comment but I can't yet.
Related
Right now, I have a javascript function which is triggered onclick. However, I want the same function to be triggered when DOM is loaded. Following code works, however, I don't want to put 'script' tag in the middle of the view. Calling the function from the body tag is not an option here.
<script>document.addEventListener("DOMContentLoaded",function(){extractions.RefreshCheck(#check.ID)});</script>
Code snippet of where I want to implement this:
#foreach (var check in Model.FailedChecks)
{
<li class="#( check.IsOK ? Html.Raw("bg-success") : Html.Raw("bg-danger") ) " cid="#check.ID">
#Html.ActionLink(check.Display, "XList", "XList", new { filter = check.GetQuery(), Layout = check.Layout }, new { target = "_blank" });
<span class="glyphicon glyphicon-refresh" onclick="extractions.RefreshCheck(#check.ID);" onload="initAutoRefresh"></span>
#*<script>document.addEventListener("DOMContentLoaded",function(){extractions.RefreshCheck(#check.ID)});</script>*#
</li>
}
Above codes work, but I do not want that script tag in my view. So I tried to add the following code in my javascript file using 'onload' eventlistner and it does not work. I think this is the problem.
#foreach (var check in Model.FailedChecks)
{
<li class="#( check.IsOK ? Html.Raw("bg-success") : Html.Raw("bg-danger") ) " cid="#check.ID">
#Html.ActionLink(check.Display, "XList", "XList", new { filter = check.GetQuery(), Layout = check.Layout }, new { target = "_blank" });
<span class="glyphicon glyphicon-refresh" onclick="extractions.RefreshCheck(#check.ID);" onload="extractions.InitAutoRefresh()"></span>
</li>
}
And my InitAutoRefresh function :
var extractions= {
InitAutoRefresh: function () {
if (document.readyState === 'complete') {
RefreshCheck();
console.log("function already loaded in DOM")
} else {
document.addEventListener('DOMContentLoaded', function () {
RefreshCheck();
console.log("function loaded in dom");
});
}
},
RefreshCheck: function(intCheckId){
$('li[cid=' + intCheckId + ']').addClass('bold');
$.get(window.location + '/Home/UpdateIntegritycheck?checkId=' + intCheckId, function(data){
$('li[cid='+intCheckId+']').replaceWith(data);
});
}
}
Function RefreshCheck works fine on click (i.e. it updates record). I would be more than happy to get your feedbacks. Thank you.
One approach is to define custom attribute on your html tags on which you can fire conditionaly according to the tag value. Example :
<span data-click-on-dom-ready="true" onclick="extractions.RefreshCheck(#check.ID);" ></span>
Then far away from your partial view, you can put the following:
$(document).ready(function () {
$("[data-click-on-dom-ready='true']").trigger('click');
});
Try this code:
#section scripts{
<script>document.addEventListener("DOMContentLoaded", function () { xtractions.RefreshCheck(id) });</script>
}
if you are using jquery then you can use
$(document).ready(function () {
your code here
});
I have created a fiddle here...https://jsfiddle.net/qukhn4uk/
As you can see, I have an object for clicking on a grid image that opens a flyout and loads that person's data through ajax (you won't see the data load in the fiddle obviously but you get the idea). Everything works good here. The object that handles this is:
Stories = {
flyout: '#flyout',
closeFlyout: '#flyout .close-flyout',
storyTrigger: '.story .story-trigger',
ajaxContentContainer: '#flyout .content',
loader: '<i class="fa fa-spin fa-spinner"></i>',
body: 'body',
init: function() {
$(this.storyTrigger).click(this.showStory.bind(this));
$.ajaxSetup({cache:false});
$(document).on("click", this.closeFlyout, this.closeStory.bind(this));
},
showStory: function(e) {
e.preventDefault();
var target = $(e.target),
targetName = target.data("name");
$(this.flyout).css("transform", "translateX(-100%)");
$(this.body).css("overflow", "hidden");
$(this.ajaxContentContainer).append(this.loader);
$(this.ajaxContentContainer).load("/story/" + targetName);
},
closeStory: function() {
$(this.flyout).css("transform", "translateX(100%)");
$(this.ajaxContentContainer).empty();
$(this.body).css("overflow", "auto");
}
}
I then have another load function for opening the flyout and loading the data based on a hash in the url. This is the object that handles that...
DirectStory = {
storyDiv: '.story',
init: function() {
var self = this;
if ( window.location.hash != '' ) {
$(this.loadStory.bind(this));
}
$.ajaxSetup({cache:false});
},
loadStory: function() {
var hash = window.location.hash,
story = hash.substring(1);
targetStory = $(this.storyDiv).find("[data-name='" + story + "']");
targetStory.click();
}
}
Everything works great but there is one tiny glitch. For some reason, the DirectStory object is causing the ajaxLoader from the Stories object to load twice. Can someone help me figure out why this is happening? Thanks!
UPDATE: I have figured out that the targetStory.click() is running twice inside of the DirectStory object. I have tried to unbind it first but that does not help. Why is it running twice?
I have solved this for anyone who lands here...
The targetStory variable was finding two triggers with the way I was storing it.
I simply updated the targetStory variable to...
targetStory = $(".full-link[data-name='" + story + "']");
So here is the problem:
I have two click event in one page. The first when you click on a thumbnail picture it's open a modal which shows a bigger image like Instagram on PC (I make an Instagram clone for practicing btw). The other button is for show more image.
The problem is, I use ajax for both click to get some variable and pass to the php. When the page loaded it's shows only 3 image and when I clicked one of them It's shows the right image in the modal but when I click show more it shows 3 more and after when I clicked on the thumbnail it's stucked. I mean its shows only one picture doesn't matter which thumbnail i clicked so the ajax request not runs again. I hope you can understand the problem and can help me. (sorry for my English).
So here is the code:
This is the ajax calling function:
function ajaxShow(urls,datas,element){
$.ajax({
url: urls,
data: {datas: datas},
cache:true,
}).always(function(result){
console.log("done");
element.html(result);
});
}
And these are the click events:
$(document).ready(function(){
//Open picture in modal
var pic = $(".pics");
var modalCont = $(".modal-content");
pic.on('click',function(event){
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
//Load more
var smbt = $(".smbt");
var limit = $(smbt).data('loaded');
smbt.on('click',function(event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});
});
In a nutshell: After I clicked on load more the modal open ajax request not run again.
Use overloaded version of .on() on document node.
$(document).on(events, selector, data, handler );
So your code should be rewritten as this:
$(document).on('click', '.pics', null, function (event) {
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
and
$(document).on('click', '.smbt', null, function (event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});
The case:
I use dojo to request a page and load it into a div ( view ).
The problem:
The content that gets loaded into a form contains a dojo form and relevant objects, textbox, etc... how can I controller these widgets? I believe the current way I am working around the issue is sloppy and could be more refined.
Comments are in the code to help explain the issue I have. Please let me know your thoughts.
function (parser, domAttr, util, ready, dom, on, request, domStyle, registry, TextBox) {
//This prepares the doc main html page We are looking for a click of a menu option to load in thats pages pages content
ready(function () {
//Look for click of menu option
on(dom.byId('steps'), "a:click", function(e) {
event.preventDefault();
//Get the div we are going to load the page into
var view = domAttr.get(this, "data-view");
// function that loads the page contents
load_page(view);
});
});
function load_page(view) {
//First I see if this page already has widgets and destroy them
//We do this so users can toggle between menu items
// If we do not we get id already registered
var widgets = dojo.query("[widgetId]", dom.byId('apply-view')).map(dijit.byNode);
dojo.forEach(widgets, function(w){
w.destroyRecursive();
});
//get the html page we are going to user for the menu item
request.post("/apply_steps/"+view, {
data: {
id: 2
}
}).then(
function(response){
//Add the content and parse the page
var parentNode = dom.byId('apply-view');
parentNode.innerHTML = response;
parser.parse(parentNode);
//This is where it is sloppy
//What I would prefer is to load a new js file the controlls the content that was just loaded
//What happens now is I create a traffic director to tell the code what main function to use
controller_director(view);
},
function(error){
util.myAlert(0, 'Page not found', 'system-alert');
});
}
function controller_director(view) {
//based on the view switch the function
switch(view) {
case 'screening_questions':
screening_questions();
break;
}
}
function screening_questions() {
//Now we are controlling the page and its widgets
// How would I get this info into a seperate js file that i would load along with the ajax call??
ready(function () {
on(dom.byId('loginForm'), "submit", function(e) {
event.preventDefault();
var formLogin = registry.byId('loginForm');
authenticate();
});
});
this.authenticate = function() {
var formLogin = registry.byId('loginForm');
if (formLogin.validate()) return;
}
}
});
I have to refresh view page without clicking on refresh button.
Javascript code:--
<script type="text/javascript">
$(function () {
var metaId = $("#ID").val();
var img = $("##name input[type=hidden]").val();
if ("#found" == "False") {
$.post(rootURL + "Picture/AddThumb", { guidOrName: img, meta: metaId, id: contentId }, function (data) {
//arrangePoster([data]);
});
}
});
</script>
Post sometimes doesn't work.
It is better to use ajax jquery method.
http://api.jquery.com/jquery.ajax/
Then on Picture/AddThumb add printing parameters.
Use done to show data resulted ( to test also if it works correctly )