Add new filed and clone in bootstrap 3 modal? - javascript

I am using some append new data in form, that does not exists
HTML
Phone number :
JS
$(document).ready(function(){
var phone_number_form_index=0;
$("#add_phone_number").click(function(){
phone_number_form_index++;
$(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
$("#phone_number_form" + phone_number_form_index).css("display","inline");
$("#phone_number_form" + phone_number_form_index + " :input").each(function(){
$(this).attr("name",$(this).attr("name") + phone_number_form_index);
$(this).attr("id",$(this).attr("id") + phone_number_form_index);
});
$("#remove_phone_number" + phone_number_form_index).click(function(){
$(this).closest("div").remove();
});
});
});
And here is working fiddle
http://jsfiddle.net/wc28f/3/
I am trying to add to boostrap 3 modal, but i have no luck, here is that same code in bootstrap 3 modal
http://www.bootply.com/J9cv7EZv6K
Does can be extended this exmaple like select, but what i need post array of that select values
http://www.bootply.com/S9WGrK0WhL
Here is my example, what i need is to
phone_number1 becomes phone_number[1],
and qty1 to becomes qty[1]

Working demo
I have removed line and it worked
$("#phone_number_form" + phone_number_form_index).css("display","inline");
Used this:
$("#phone_number_form" + phone_number_form_index).removeClass("hidden");
You want phone_number[1] try this:
$(this).attr("name",$(this).attr("name") +"["+ phone_number_form_index+"]");
Updated DEMO

Related

how to print jquery value in html

This is my code in jQuery, it's working fine when its alert popup, but i want to print this in html body i tried below but not working
// Do What You Want With Result .......... :)
$("#printermodel").change(function() {
//'you select
Model = ' + $('#manufacturer').val() + 'type=' + $('#printertype').val() + 'And Model=' + $('#printermodel').val()
alert('you select Model = ' + $('#manufacturer option:selected').text() + ' ,type= ' + $('#printertype option:selected').text() + ' And Model = ' + $('#printermodel option:selected').text());
});
});
<div id="manufacturer"></div>
You should use text to insert text inside div:
$('#manufacturer').text($('#manufacturer option:selected').text());
Docs: http://api.jquery.com/text/
If you want to add HTML inside div, you can use html instead of text
$('#manufacturer').html(('you select Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());
If you want to take more sophisticated approach I would recommend you to use templates.
One of many options would be to use official jquery-tmpl plugin.
You need to include jquery and http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js plugin to your site and then you can do for example:
Html:
<div id="target"></div>
Javascript:
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );
You can adjust it to your needs and for eaxmple read the template (first parameter of tmpl) from some file
See this jsfiddle

Autofill input text on Sharepoint 2007 using Jquery

im sure this is a simple question but can't understand why this isn't working. I simply want to set the current time automatically to an input field. I am using Jquery at the moment to accomplish the task. I know jquery works because if I do alert (time); it shows me the time as expected.
Just to add, I set the jquery script in a text then referenced into a Content Editor Webpart under the list.
Below is the HTML of my input generated by Sharepoint. I decided to target the title as its the only consisting attribute in there.
<input type="text" class="ms-long" title="Current time" id="ctl00_m_g_dd7a368d_cc10_4464_a245_c7fc87ae6650_ff2_1_ctl00_ctl00_TextField" maxlength="255" name="ctl00$m$g_dd7a368d_cc10_4464_a245_c7fc87ae6650$ff2_1$ctl00$ctl00$TextField">
Below is the Jquery script I am trying to run. A the moment this script does nothing to my input text box.
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
$("input[Title='Current time']").val(time);
});
</script>
Any help would appreciated on this.
I tested your code and it works fine if you define the dNow first: tested on Chrome and Opera
jQuery(document).ready(function($) {
var dNow = new Date();
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
alert(time);
$("input[title='Current time']").val(time);
});
If that's not working for you, you have some other problem in your JavaScript, debug and check for other errors

Set the content of Bootstrap tooltip via Javascript

I have included tooltips in my table's cells. Here is how I did it:
<td data-container="body" data-toggle="tooltip" data-html="true" data-original-title="10.5">10.5</td>
<script type="text/javascript">
$(document).ready(function(){
$(".table td").tooltip();
});
</script>
Until here, I don't have a problem. Now, I want to change the way it works. I have two dictionaries from numeric to text translations.
dic1 = {'0':'zero','1':'one','2':'two','3':'three'....}
dic2 = {'0.25':'a quarter','0.5':'half',....}
Numbers in the table are standards, so there isn't something that I don't have in dictionaries.
I want to change the title of the tooltips to this: one half (1.5) instead of 1.5. Splitting the number and take the text from one dictionary and the text from the other and then combine them.
Adding just the tooltip was easy, but now I think that I am stacked.
I haven't tested it, but something like this should work.
$('.table td').each(function () {
var title = $(this).attr('data-original-title').split('.');
$(this).attr('data-original-title', dic1[title[0]] + ' ' +
dic2['0.' + title[1]] + ' (' + title[0] + '.' + title[1] + ')');
});

Parsing in jquery

I am trying to parse what I am getting JQuery to show data ! I am consuming data from an API , but I am getting an error .
Can I do a Loop on JQuery this way ?
$.each(data.results, function (i, item) { // on this line
var Name = item.name;
var Date = item.auditInfo.dateCreated;
var Creator = item.creator.display;
$htmlstring.append($('<li/>').append('<p>Test</p>'));
$htmlstring.append("<div class='title'> Info : "
Name + Date + Creator "</div>");
}); $('#afficher').html($htmlstring);
I am sharing code on JSFiddle (Check drug_omrsRestCall function ) :
http://jsfiddle.net/zTXyq/23/
As #adeneo commented on the question, the concept is right but you should be careful about what element you are appending HTML content to.
With this snippet of your code:
$htmlstring.append("<div class='title'> Info : "
Name + Date + Creator "</div>");
(BTW, it is missing two plus signs for a correct concatenation, I hope that's not the error you are getting).
you append a DIV to the UL and you actually want to append it to the LI, for example:
$('<li />').append("<p>Test</p>")
.append("<div class='title'> Info : " + Name + Date + Creator + "</div>")
.appendTo($htmlstring);
Check this fiddle for a working solution of your issue:
http://jsfiddle.net/d3dcj/2/

Removing rows that do not contain search-term with jQuery

I'm using the following JQuery to filter rows on a datatable, which works fine...
yuiDtFilter = function(tableDivId, filter) {
//custom jQuery function defines case-insensitive fn:Contains, use default fn:contains for case-sensitive search
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#" + tableDivId + " .yui-dt-data").find('tr').hide();
$("#" + tableDivId + " .yui-dt-data").find('td:Contains("' + filter + '")').parents('tr').show();
}
However I have a need for the filter work in the opposite way. I need it to remove rows that don't match the search terms.
I've found out that I need to use 'not()', but I've spent most of the day in vain trying to get it to work (using every example I can find).
I've tried many variations of -
$("#" + tableDivId + " .yui-dt-data")
.find(:not(('td:Contains("' + filter + '")'))
.parents('tr').remove();
Could anyone give me a hand using my code as a starting point?
Try
$("#" + tableDivId + " .yui-dt-data").find('td').not(':contains("' + filter + '")').parents('tr').remove();
or
$("#" + tableDivId + " .yui-dt-data").find( 'td:not(:contains("' + filter + '"))' ).parents('tr').remove()
Remove row from HTML table that doesn't contains specific text or string using jquery.
Note: If there are only two column in HTML table, we can use "last-child" attribute to find.
*$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:last-child");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: If there are more than two column in HTML table, we can use "nth-child(2)" attribute to find.
Passing column index with "nth-child(column index)"
$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:nth-child(2)");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: "DrivePilot" is nothing but text or string

Categories