I have some problems with Javascript and calling 'function in function'.
I have this code:
Sorry about pastebin.com/tKVNmGLJ , again problems with pasting a code.
And i need to call first function in second one, but only cut of that code:
$('#delete-confirmation-modal-document').on('show.bs.modal', function(e) {
var invoker = $(e.relatedTarget);
$('button.confirm', this).off('click').on('click', function(){
$.get(invoker.data('href'), function(resp){
invoker.parents('.thumbnail').parent('div').remove();
$('#delete-confirmation-modal-document').modal('hide');
});
});
});
cause there is no button to confirm.
Edit:
Sorry for less information!
I have drop box, for uploading a file. When you upload file you see the file in that drop box and down bellow drop box, but when you refresh page you don't have this file in that drop box (what is correct). But problem is, if you upload file and you have uploaded mistaken file you have button 'Remove' (talking about drop box), so you remove the file and it's gone from box, but it's not removed down bellow drop box (it is removed but I have to refresh page to see that changes).
So the first function is removing that file from down bellow drop box, let's call it 'other box' for example, if it's already uploaded and when you click 'Remove' from that other box, you have modal to confirm that changes to remove file, and it's removed correctly. Second remove function is removing file only from drop box, but I need to remove it from other box too. So i need somehow to call that function and to remove that added file. I tried to paste that cut of code in second code but it's not working, I know why but not sure how to write that.
$('button.confirm') probably should be $('button#confirm')
... with the HTML, this is just a guess - because it's not reproducible.
Related
I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");
I am trying to add a div link where users can drag and drop files. It works well on every files, but when I drop a Linked (.lnk) file, it takes the lnk file instead of the real one behind the link.
my code
$("html").on("drop", "#mydiv", function(event) {
...
data.append("file-0", event.originalEvent.dataTransfer.files[0]);
//then sending data object via ajax
...
});
is there a way to get the real file on drop ?
Thanks by advance
The variable data passed to a Bootstrap modal is hard coded in HTML data-text element field using "data-text" (according to the Bootstrap examples). If the modal's purpose is to allow a user to change that, then how do I send that back to the raw HTML data-text to update it for next time?
JS newbie here. I got Bootstrap 4 modals working and updating back to the server by Ajax (with a lot of Googling of StackOverFlow thanks!). I have about 100 text elements on the page which all load the same modal for editing of the clicked text field. The field initial value is hard coded into the page HTML in the data-text field (following the Bootstrap modal example). This allows passing of the current text value to pre-populate the modal field with the existing text value for editing.
Next, the user edits the note field in the modal and clicks submit. I am able to get the value and pass it back to the server, and update the DOM with the new edited value on the page, and everything works and looks great! So far so good.
Now here's the problem. Since I have not been able to figure out how to change the data-text field (which is hard coded in the page HTML), the screen (DOM) updates with the new value after submit correctly, but the data-text field of the element does not update. It is still the old value. It means the NEXT time I click to edit the text, the OLD value of the text field is pre-populated in the modal for editing.
Question: how do I update html data-text field by JS?
I have researched this problem at great length and without Stack Overflow I would never be able to get it working, so much appreciate you guys. Dozens of questions about passing variable TO Modals, but very few about passing the data back, and NONE about setting data-text on submit by JS.
text element definition example. This is a slightly simplified example. The text field contains some data from the server database, HTML is generated by PHP/MySQL. (1 out of 100 elements on page):
<td id="note_12345678" data-toggle="modal" data-target="#noteModal" data-note="<some text from db>" class="note"><same text from server db></td>
Here is the JS on submit code. Everything works except for the last line where I am trying to change the "data-note" field of the element:
function note_submit(element) {
var note = document.getElementById('message-text').value;
ajaxcall("/ajaxclick.php" , { note:note } , null); // Simplified, all is working.
noteElement = document.getElementById('note_12345678');
noteElement.innerText = note ; // Updates the DOM with submitted note.
noteElement.data-note = note ; // <== trying to change data-note here but obviously a syntax error.
}
Everything is working fine up to that last step. Clicking the text field opens modal, pre-loads the text for editing, allows the user to edit, click submit sends to server by Ajax for update, DOM note on screen is updated by JS. if I RELOAD the page, it loads the new edited text value from server db. Everything working great. Lots of joy.
Problem is NEXT time I click on the text element to edit it, the modal loads the OLD value from data-note hard coded into HTML. How to update it upon submit by JS? Thanks a million for any assistance. So close.
Updated: page is loading jquery-3.3.1.js, and bootstrap/4.0.0/js/bootstrap.min.js. Browser is FF V66.
I am working on a project and I am trying to create a web application. So far, my code is like this example. I press the button and a table appears. As you can see in the example, this table contains data of an XML file. THE PROBLEM: I want by clicking each 'td', a popup box to appear. This box will contain different data for each 'td', from the same XML file. Specifically, it will contain an image and some text that refers to the 'td'. Actually, I want something like this. I tried adding this code to my code and I created a popup button in every 'td'. But clicking these buttons, nothing happens. It would be nice if you share your knowledge with me!
i think its help full for your logic.
$('td').click(function () {
$("#MyModal").modal("show");
});
you can assign a class to td , and by click of that id with jquery modle called by
$("#MyModal").modal("show");
checkout this example
P.S. i have used bootstrap model for popup, but any other can be used with minimum change in code.
I am using
https://github.com/Rovak/InlineAttachment
I currently have it all setup so I can drag and drop images to my textarea and they upload straight to imgur, from following this tutorial:
http://wilfreddenton.com/posts/drag-and-drop-photo-uploads-to-imgur
what I'm trying to do is add an input so if the user doesnt want to drag and drop, they can simply browse their pc and upload files, and have them go straight into the textarea upon selection. (just how github comments work)
I just cant seem to get the input to insert into the textarea.
Here's a live example: http://codepen.io/DrCustUmz/pen/KzZOeP
or if your logged into github you can see the end goal what im trying to do: https://github.com/wilfreddenton/dynamic-scss/issues/new
dont actually submit but click "selecting them" below the textarea, pic a few images, and watch the textarea after you click open.
the input selection is not working in this example. How can I get it so I open the choose files, select a few images, then when I select "open" on the browse my pc popup, they are directly inserted into the textarea, just like i drag and dropped them.
Most of the writting work is done in background so I had to rewrite the writting to textarea. Sorry I mostly use pure javascript so I didn't use any fancy jquery features.
This is where the magic happens. The upload can handle only one file at a time so I had to use loop for all of them. I recommend you take a look at the whole code.
document.getElementById("inputFile").addEventListener("change", function() {
var object = this;
var editor = document.getElementById("editor");
for(var i=0;i<this.files.length;i++) {
editor.value += "uploading...";
uploadHandler.customUploadHandler(this.files[i], function(result) {
editor.value = editor.value.replace("uploading...",result.filename);
});
}
});
Whole code on CodePen
You can simply attach the eventListener upon file is selected via choose files option. You just have to trigger the upload in callback. Assume that you've given id of the input type file as "fileUpload"
document.getElementById('fileUpload').addEventListener('change', function () {
console.log(this.files);
/*trigger the upload here, like you're doing in drag and drop*/
});