MVC Data passage from Javascript Function with Bootstrap Modal - javascript

I have a button that open a confirmation modal created with bootstrap.
When the modal is confirmed i execute a Javascript function with the data passed from the first button.
This is the button that open the modal:
<input class='btn btn-info btnChiusura' type='button' value='Close Day' data-corriere="Bartolini" data-magazzino="#item.NomeMagazzino" data-committente="#ViewBag.comm" />
This is the code for click on each btnChiusura of my page:
$('.btnChiusura').on('click', function (event) {
event.preventDefault();
_self = $(this);
var corriere = _self.data('corriere');
var magazzino = _self.data('magazzino');
var committente = _self.data('committente');
$("#myModalLabel").text("Close day " + _self.data('corriere') + " " + _self.data('magazzino'));
$("#myModaBody").text("Conferm close day for " +_self.data('corriere') + " " + _self.data('magazzino')+"?");
$("#myModalClick").attr("onclick", "Close(" + _self + ");");
$("#myModal").modal();
});
});
I try to call this function:
function ChiusuraGiornata(el) {
alert(el.data('corriere'));};
But i have this error on console:
Unexpected identifier
How can i pass _self data to another javascript funtion?
Thanks to all

With your current code you are reading the data attribute of the clicked button and using that to set the title and body content of the modal dialog. If you want to access that later using the data attribute again when the button in modal is clicked. You need to set those same values to some elements's data attribute.
You can set those to the "save"/"delete" button which is in the modal so that you can access it when user click on one of them.
Assuming your modal footer has these 2 buttons.
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-save" class="btn btn-primary">Save changes</button>
</div>
Now, before firing the modal, find the button with id "btn-save" and set it's data attribute.
$('.btnChiusura').on('click', function (event) {
event.preventDefault();
_self = $(this);
var corriere = _self.data('corriere');
var magazzino = _self.data('magazzino');
var committente = _self.data('committente');
$("#myModalLabel").text("Close day " + _self.data('corriere') +
" " + _self.data('magazzino'));
$("#myModaBody").text("Conferm close day for " + _self.data('corriere') + " "
+ _self.data('magazzino') + "?");
$("#myModalClick").attr("onclick", "Close(" + _self + ");");
// Set the attributes to the button in modal.
$("#btn-save").attr("data-magazzino", magazzino).attr("data-corriere", corriere);
$("#myModal").modal();
});
Now when the button is clicked,you can read it's data("magazzino") to get the value you set.
$(document).on("click","#btn-save",function (e) {
e.preventDefault();
alert($(this).attr("data-corriere"));
alert($(this).attr("data-magazzino"));
});

Related

jQuery delay() not working as intended

Working on a small piece of code for a custom shopping cart. I want to change a button to show a success message for 2 seconds, then revert the button back to the original HTML.
HTML...
<button id="42" class="btn btn-primary btn-block" type="button" onclick="added_to_order('42')">1st Semester<span class="glyphicon glyphicon-chevron-right float-right"></span></button>
Javascript...
function added_to_order(id){
var old_html = $('#' + id + '').html();
$('#' + id + '').html('<span class="glyphicon glyphicon-ok-sign"></span> Added to your order!');
$('#' + id + '').removeClass('btn-primary').addClass('btn-success').delay(2000).html(old_html);
}
Everything is fine, except I'm not getting the delay of 2 seconds before the button is updated with the old HTML.
Any ideas?
It's best to use the setTimeout function in this case.
function added_to_order(id){
var old_html = $('#' + id + '').html();
$('#' + id + '').html('<span class="glyphicon glyphicon-ok-sign"></span> Added to your order!');
$('#' + id + '').removeClass('btn-primary').addClass('btn-success');
setTimeout(function() {
$('#' + id + '').html(old_html);
}, 2000);
}
I don't think that any old function qualifies to be a valid member of the jQuery effects queue. I've wrapped your code in some queue function calls. Take a look at the other examples on that page for more ideas.
function added_to_order(el){
var old_html = $(el).html();
$(el).html('<span class="glyphicon glyphicon-ok-sign"></span> Added to your order!');
$(el)
.queue(function () {
$(el).removeClass('btn-primary').addClass('btn-success').dequeue();
})
.delay(2000)
.queue(function () {
$(el).html(old_html).dequeue();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary btn-block" type="button" onclick="added_to_order(this)">1st Semester<span class="glyphicon glyphicon-chevron-right float-right"></span></button>

Prevent page reload when blank link is clicked?

I have a web page to download files using a button.But for some cases the files does not exit and download links are blank...So whenever the user clicks the link page just reloads.It would have been great if i could somehow disable the page reload and display an alert that says file not yet available..
This is the download link button code.row["slink"] gives the download link and may become empty sometime.
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';
Check if row['slink'] is present, else replace href with javascript:alert(...)(This won't do page reload for blank href, and show an alert):
var href = row["slink"].trim().length > 0 ? row["slink"] : "javascript:alert('File Not Yet Available')"
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';
Simple Solution
You can set target to blank:
<a ... ... target="_blank" > ... </a>
This will open it in a new tab instead of refreshing.
More Sophisticated Approach:
You can also use a conditional to build your anchor tag.
if (row["slink"] == "")
{
var atag = '<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</button> ';
}
This will give an alert if there is no file.

close a popup modal and true the value on click event

I am trying to create a popup window and put 2 button on that, and when click on the button the value of btn be true and close the popup and see the Main window,
I have done some thing! but when the main window loaded its gray!
I mean this:
and this:
and when press F12 in browser I see this:
<body class="modal-open" style=""></body>
and this is my .cshtml file:
#{
List<string> formRows = new List<string>();
string btnReceiptPrint = string.Format(#"<button id='BtnReceiptPrint' style='height:35px;width:110px;' class='btn btn-success' type='button'
onclick='$(""#ReceiptPrint"").val(""true"");hideModal(this);_submitForm(""sellInvoiceForm"");'>{0}</button>", Resources.UI("ReceiptPrint"));
string btnNormalPrint = string.Format(#"<button id='BtnNormalPrint' style='height:35px;width:110px;' class='btn btn-success' type='button'
onclick='$(""#NormalPrint"").val(""true"");hideModal(this);_submitForm(""sellInvoiceForm"");'>{0}</button>", Resources.UI("NormalPrint"));
formRows.Add("<p style ='text-align : center'>" + btnReceiptPrint + "</p>");
formRows.Add("<p style ='text-align : center'>" + btnNormalPrint + "</p>");
#Html.FormGroupGenerator(formRows)
}
Can anyone help me PLZ?
When you press btn then do : $('#your-modal').modal('hide'). It will close the modal.

JS code to change form submit is not working

I have a form that has many fields in it. I am using JS code to modify the parameters submitted by that form via GET request.
Basically the form submits 3 params- search_address, search_city,search_state, search_zip along with other params-- My JS code just combines the address, city, state, and zip params into a single param and modifies the search query accordingly.
But when I run the page with the code below, the original query goes through as it is- as if the JS code has no effect. What am I doing wrong here?
This is the HTML code for the form HTML tag--
<form method="get" class="searchform" id="searchform" action="target_URL_value">
This is the HTML code for the submit button--
<input type="submit" class="submit" name="submit" id="searchsubmit" onclick="JavaScript:submit_form()" style="width:20%" />
This is the Javascript code for submit_form function--
<script>
function submit_form()
{
$('searchform').submit( function() {
var $form = $(this);
//Arvind IMP put the below paraemeter's name as s or the value of name in Search field of original header.php in parent template...
// This is a typical search string
//?post_type=property&search_keyword=&submit=Search&price-min=&price-max=&city=&state=&zip=&beds=&baths=&sqft=&status=
var data = 'post_type='+$('#post_type').val()+'&search_keyword='+$('#search_address').val()+", "+$('#search_city').val()+", "+$('#search_state').val()+", "+$('#search_zip').val()
+ '&price-min='+$('#price-min').val()+ '&price-max='+$('#price-max').val() +'&city='+$('#search_city').val()
+ '&state='+$('#search_state').val()+ '&zip='+$('#search_zip').val() +'&beds='+$('#beds').val()
+ '&sqft='+$('#sqft').val()+ '&status='+$('#status').val();
$.get( $form.attr('action'), data);
return false;
});
}
</script>
Do not declare the submit event into a function.
Also remove inline code onclick="JavaScript:submit_form()"
And finally, do not forget the # of the form selector $('#searchform') to select the id (or . to select the class)
$(document).ready(function () {
$('#searchform').submit(function () {
var $form = $(this);
//Arvind IMP put the below paraemeter's name as s or the value of name in Search field of original header.php in parent template...
// This is a typical search string
//?post_type=property&search_keyword=&submit=Search&price-min=&price-max=&city=&state=&zip=&beds=&baths=&sqft=&status=
var data = 'post_type=' + $('#post_type').val() + '&search_keyword=' + $('#search_address').val() + ", " + $('#search_city').val() + ", " + $('#search_state').val() + ", " + $('#search_zip').val() + '&price-min=' + $('#price-min').val() + '&price-max=' + $('#price-max').val() + '&city=' + $('#search_city').val() + '&state=' + $('#search_state').val() + '&zip=' + $('#search_zip').val() + '&beds=' + $('#beds').val() + '&sqft=' + $('#sqft').val() + '&status=' + $('#status').val();
$.get($form.attr('action'), data);
return false;
});
});
Your selector is incorrect. Plus you are registering the handler again and again, calling the submit button click. You dont need it. Just place your handler under document.ready to register first up.
Script
<script>
$(function(){
$('.searchform').submit(function () {
var $form = $(this);
//Arvind IMP put the below paraemeter's name as s or the value of name in Search field of original header.php in parent template...
// This is a typical search string
//?post_type=property&search_keyword=&submit=Search&price-min=&price-max=&city=&state=&zip=&beds=&baths=&sqft=&status=
var data = 'post_type=' + $('#post_type').val() + '&search_keyword=' + $('#search_address').val() + ", " + $('#search_city').val() + ", " + $('#search_state').val() + ", " + $('#search_zip').val() + '&price-min=' + $('#price-min').val() + '&price-max=' + $('#price-max').val() + '&city=' + $('#search_city').val() + '&state=' + $('#search_state').val() + '&zip=' + $('#search_zip').val() + '&beds=' + $('#beds').val() + '&sqft=' + $('#sqft').val() + '&status=' + $('#status').val();
$.get($form.attr('action'), data);
return false;
});
});
</script>
Remove onclick="JavaScript:submit_form()" from your button as you don't need it.
<input type="submit" class="submit" name="submit" id="searchsubmit" style="width:20%" />
Demo
You forgot a dot to designate the class, see:
$('searchform').submit( function() {
^----- HERE you lack a dot . to select class name
You need use preventDefault():
function submit_form()
{
$('.searchform').submit( function(e) {
e.preventDefault();
//rest of code
});
}
second add dot to selector .searchform;
third remove onclick="JavaScript:submit_form()" from your form

Div's content editor

I have this code:
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#k123").click(function () {
//var text=$(this).val(); //this does not work
var text=$(this).text();
var k='<div id="k123"><textarea rows="10" cols="10">' + text + '</textarea><br /><input type="button" onclick="save();" value="save"><input type="button" onclick="cancel();" value="cancel"></div>';
$(this).replaceWith(k);
});
});
function save() {
}
function cancel() {
//alert(text);
var k='<div id="k123"></div>';
$("#k123").replaceWith(k);
}
</script>
</head>
<body>
<div id="k123">aaaaa</div>
</body>
</html>
My question is :
1)In both functions : cancel & save , How can I get content of div id->#k123->textarea->content
functions cancel & save are outside the scope and they are independent functions I cannot tell $(this).parent().
I need to ask about div which has id #k123 , then get inside to textarea's content and get it.
and I have also to get id #k123 automatically because if I have many divs I cannot tell save & cancel manually the div's id, cancel & save should know the div's id sender from the input type='button'`s parent id.
**please I do not prefer the suggestion of sending div id from input button
**We are assuming that both input buttons have no IDS or Names
I tried another way but still having same problem
I replaced
$(document).ready(function() {
$("#k123").click(function () {
var text=$(this).text();
var k='<div id="k123"><textarea rows="10" cols="10">' + text + '</textarea><br /><input type="button" value="save"><input type="button" value="cancel"></div>';
$(this).replaceWith(k);
});
//$("#k123 > input").click(function() {
$("#k123").children("input:second").click(function() {
alert("hi");
});
});
thank you.
I have the working code for you below. You don't even need an id.. just a container div and delegation of events. The below accomplishes what I thought you were after, in what I believe to be a much simpler, and much more efficient fashion:
(I've added comments to assist in understanding the code)
$(document).ready(function() {
$(".container").on('click', function(e) {
if (!$(e.target).is('input') && !$(e.target).is('textarea')) { //check to make sure the target is neither an input or a textarea
var div_text = $(e.target).text(); // use a variable named something other than text, because text is already a method for another element
$(e.target).data('text',div_text); // set the div's current contents as a hidden data attribute, to be retrieved later. You can get rid of this and the other line if you want cancel to completely wipe the div.
var k = '<textarea rows="10" cols="10">' + div_text + '</textarea><br /><input type="button" value="save"><input type="button" value="cancel">';
$(e.target).html(k); //set the inner HTML of the div, so we don't lose any data saved to that div
}
if ($(e.target).is('input') && $(e.target).val() == 'save') {
$(e.target).parent().html($(e.target).parent().find('textarea').val()); // replace the current contents of the parent div with the contents of the textarea within it.
} else if ($(e.target).is('input') && $(e.target).val() == 'cancel') {
$(e.target).parent().html($(e.target).parent().data('text')); //set the contents to the old contents, as stored in the data attribute. Just replace the contents of the .html() here with '' to completely clear it.
}
});
});​
DEMO
REVISED - WORKS
Check this out... not quite there but close!
REVISED JS Fiddle
function editit() {
var divId = $(this).attr('id');
var text = $(this).html();
var k = '<div id="' + divId + '" class="editable"><textarea id="newvalue' + divId +'" rows="10" cols="10">' + text + '</textarea><br /><input id="save' + divId + '" type="button" value="save"><input id="cancel' + divId + '" type="button" value="cancel"></div>';
$('#' + divId).replaceWith(k);
$('#cancel' + divId).click(function() {
$('#' + divId).replaceWith('<div id="' + divId + '" class="editable">' + text + '</div>');
$('.editable').bind('click', editit);
});
$('#save' + divId).click(function() {
$('#' + divId).replaceWith('<div id="' + divId + '" class="editable">' + $("#newvalue" + divId).val()+ '</div>');
$('.editable').bind('click', editit);
});
}
$('.editable').bind('click', editit);

Categories