Unable to hide the file attachment browse button - javascript

I am sending attachments in email, while sending user can actually add multiple attachments. My code is keep displaying the browse button for every time. I want to display only one button and let the user opens the file picker for any no of attachments.
Please tell me whats wrong with my code.
Also see the attached image. Which is something I don't want that behavior.
What I want is on clicking the attach more button it should automatically open the file picker. Currently it is displaying the
Thank you.
<div class="col-sm-10">
<div class="element">
<label>Attachment</label>
<span class="upload_file_button"><input type="file" name="upload_file1" id="upload_file1"/></span>
</div>
<div id="moreImageUpload"></div>
<div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
Attach More
</div>
</div>
</div>
</div>
javascript
<script type="text/javascript">
// onclick browse button attach the file id and show the attachmore link
$(document).ready(function() {
$("input[id^='upload_file']").each(function() {
var id = parseInt(this.id.replace("upload_file", ""));
$("#upload_file" + id).change(function() {
if ($("#upload_file" + id).val() != "") {
$("#moreImageUploadLink").show();
}
});
});
var upload_number = 2;
$('#attachMore').click(function() {
//add more file. Everytime clicking on attachmore link show the browse button also attach more as well.
var moreUploadTag = ''
moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
moreUploadTag += '<span class="upload_file_button"><input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/></span>';
moreUploadTag += ' Delete ' + upload_number + '</div>';
$('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
upload_number++;
});
});
function del_file(eleId) {
var ele = document.getElementById("delete_file" + eleId);
ele.parentNode.removeChild(ele);
}
</script>
On click + Attach More it is displaying the browse button. Instead I want to open the file picker right away upon clicking + Attach more.

Just add this line
$('#upload_file' + upload_number).trigger('click');
before
upload_number++;
in order to have the "Attach more" button to trigger the opening of the file pickup.
Then you could hide the input file tag with CSS.

Related

jquery call function from dynamic div

I am using jquery. I have a div that is populated by jquery. Inside div, there is a list of items under row tag. And, Inside, the dynamic div section, I also have a anchor tag. On clicking on that anchor tag, I want to call the ajax function. Is it even possible?
var content='';
$.each(products, function(key, value) {
content += '<div class="row">' +
'<img src="' + value.image + '" class="img img-responsive" style="height: 65px;"/>' +
'<h3>' + value.name + '</h3>' +
'<p>' + value.category + '</p>' +
'</div>' +
'Delete' +
'<hr>';
});
modal.find('.modal_product_list').html(content);
When the anchor tag is clicked, I want to call ajax function. Here is my ajax sample:
$('.delete_product_from_space').on('click', function(e) {
e.preventDefault();
alert('hello');
var product_id = $(this).attr('data-id');
});
The on click event is never fired. Is it possible to call like this? Or I am approaching in a wrong way?
You may try to add the event on modal, as the dynamically generated elements would not be available at the time of code execution. Try the below code,
$('.modal_product_list').on('click', '.delete_product_from_space', function(e) {
e.preventDefault();
alert('hello');
var product_id = $(this).attr('data-id');
});

How to click each link individually in JS?

Try to separate both links individually by clicking each of them. What should I edit or add?
<script type="text/javascript">
$('#submit').click(function() {
if ($('#user').val() != '') {
alert('For demonstration purposes only. Please do not point your RSS reader to this server.');
var user = $('#user').val();
First One
$('#output')
.html('')
.append('hhtp://www.breakingnews.com/feeds/rss/' +
$('#user').val())
.attr('href', 'http://www.breakingnews.com/feeds/rss/' +
$('#user').val());
Second One
$('#output')
.html('')
.append('https://www.theguardian.com/world/' + user +
'/rss')
.attr('href', 'https://www.theguardian.com/world/' + user + '/rss');
var user = $('#user').val();
$('#output')
.html("")
.append(jQuery('<a>').attr('href', 'hhtp://www.breakingnews.com/feeds/rss/' +
user).text('hhtp://www.breakingnews.com/feeds/rss/' + user));
$('#output')
.append('<br/>')
.append(jQuery('<a>').attr('href', 'https://www.theguardian.com/world/' + user + '/rss').text('https://www.theguardian.com/world/' + user + '/rss'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user" value="user"></input>
<div id="output"></div>
Problem is in
.html('')
when you add new link you erase all html content added before.
You should to remove this method in second link creation code.
And you should create a link element
Create a link, you are adding a attributes to a text
var user = "user";
$('#output').empty().append('https://www.theguardian.com/feeds/rss/' + user + '/rss').append('<hr>https://www.theguardian.com/world/' + user + '/rss');

kendo grid command change button

How is possible to change button on click in command column? In my case, there should be "Validate" and "Reset" button that should be displayed as different buttons depending on Status. Function for validating works normally, but there is a problem with applying another class to the button, there is always .valid class. Here is a problem, I don't know where to apply .reset class. Thanks
template:
'<kendo button class = "k-primary button button-valid"ng-click="OnChangeStateMaterialDefinitionHeaders($event)"> #= Status == ' + STATUS_MDH_VALIDATE + ' ? " ' + kendo.htmlEncode(txt.TXT_VALIDATE) + '" : "' + kendo.htmlEncode(txt.TXT_RESET) + '" #</kendo button> ' +
'<button ng-click="OnRemoveMaterialDefinitionHeaders($event)">' + kendo.htmlEncode(txt.TXT_SET_VALIDATED) + ' </button>',
The other button is not important now, but is a part of this command column.

How can I hide jQuery email attach more button

I implemented email attachments features which is working fine.
But when I click on attach more button , I am keep displaying the browse button.Which is not good.
Initially, I display browse button but when I click on attach more button I don't want to display the browse button again, instead it should automatically pop up the file to choose.
How can I do that. Please see the image attachment.
html code
<div class="col-sm-10">
<div class="element">
<label>Attachment</label>
<span class="upload_file_button"><input type="file" name="upload_file1" id="upload_file1"/></span>
</div>
<div id="moreImageUpload"></div>
<div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
Attach More
</div>
</div>
</div>
</div>
jquery /javascript
<script type="text/javascript">
// onclick browse button attach the file id and show the attachmore link
$(document).ready(function() {
$("input[id^='upload_file']").each(function() {
var id = parseInt(this.id.replace("upload_file", ""));
$("#upload_file" + id).change(function() {
if ($("#upload_file" + id).val() != "") {
$("#moreImageUploadLink").show();
}
});
});
var upload_number = 2;
$('#attachMore').click(function() {
//add more file. Everytime clicking on attachmore link show the browse button also attach more as well.
var moreUploadTag = ''
moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
moreUploadTag += '<span class="upload_file_button"><input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/></span>';
moreUploadTag += ' Delete ' + upload_number + '</div>';
$('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
upload_number++;
});
});
function del_file(eleId) {
var ele = document.getElementById("delete_file" + eleId);
ele.parentNode.removeChild(ele);
}
</script>

Loading popups with $.get - Jquery Mobile

I'm trying to load some data from a server. I have some links that when I click on them, I want them to open the right corresponding popup with that data in them. But the popups just appears as formatted text on the page. If you look at the code they are containing <p> tags. The result of the loadPopups function is that it just prints the <p> tags to the page. No popup behaviour.
Here is my code to get the popup data
function loadPopups() {
$.get("load.php", function(data) {
data = $.parseJSON(data);
var str = '';
for( laxa in data.laxor) {
var laxaArray = data.laxor[laxa];
str += '' +
'<div data-role="popup" id="' + (laxaArray.laxa_id + 'rubrik') + '">' +
'<p>' + laxaArray.rubrik + '<p>' +
'</div>' +
'<div data-role="popup" id="' + (laxaArray.laxa_id + 'beskrivning') + '">' +
'<p>' + laxaArray.beskrivning + '<p>' +
'</div>' +
'';
}
//alert('Data loaded');
$("#popup_containor").html(str).page();
});
}
this then gets added to this <div>
<div id="popup_containor">
</div>
When I try to display the popup by using the same id that is specified in the for loop for each popup like this
<p>Hej<p>
Nothin happens. The popups are simply displayed as if there where no <div data-role="popup">
Any help is appreciated
Thanks
Why won't you separate the logic?
Get whatever values you want first from server.
let's say var a= 'string 1 from server', b='string 2' and so on.
Create functional popup in your page with no data.
Done
<div data-role="popup" id="134rubrik" data-overlay-theme="b">
<p id="serverdata"> </p>
</div>
Than fill your popup using JS or jQuery:
document.getElementById('serverdata').value= a;

Categories