ASP.NET not working well with external JavaScript files - javascript

I'm an ASP.NET beginner. I'm having problems getting my ASP.NET web form to process the external JS file I have listed on the page. Does jQuery have limited functionality with ASP.NET when used externally?
It is processing the first click event on the checkbox, but not the submit button. I've run other tests like alert(), alert without jquery using window.document.onready. I've tried to alter the CSS on elements and manipulate the DOM with jQuery. I've had no success with those techniques either. NOTE: When I use embedded jQuery directly on the web form, everything works fine.
To whom ever responds, Thanks!!!
// THIS IS WHAT IS IN THE EXTERNAL FILE
$(function(){
$("#CheckBox1").click(function () { // FIRST FUNCTION WORKS FINE
$('#Panel1').toggle(!this.checked);
}); // end click
$("#SubmitBtn").click(function () { // CONFIRM ON CLICK IS NOT WORKING
return confirm("Are you sure you want to submit?");
}); // end click
}); // end ready

If you're in an external file, you may want to use the CSS class instead of the button ID. Button IDs are dynamic, like the other poster pointed out.
Instead of $('#SubmitBtn'), you could use $('.cssClassname')

Try class for accessing the control..
$(function(){
$("#CheckBox1").click(function () { // FIRST FUNCTION WORKS FINE
$('#Panel1').toggle(!this.checked);
}); // end click
$(".class").click(function () { // CONFIRM ON CLICK IS NOT WORKING
return confirm("Are you sure you want to submit?");
}); // end click
}); // end ready
Here class is the name of the Css Class

Are you using an ASP.NET server control for the submit button? If so, then it automatically generates an ID on the client side. If that's the case, try something like:
$('#<%= SubmitBtn.ClientID%>').click(function () {
return confirm("Are you sure you want to submit?");
});
EDIT: Just saw that this is an external file, so the above solution won't work. If you are using and ASP.NET button, you can always define a function and have it execute on the onClick event like so:
<asp:Button id="SubmitBtn" onClientClick="myFunction()" runat="server"/>
And then in the javascript file:
function myFunction() {
return confirm("Are you sure you want to submit?");
}

Related

Loader with python & flask

I make a premise: I'm working on a school project and the technologies that I can use are: python, flask, bootstrap, JavaScript and JQuery.
I have a button (that I will call to "Update Product") that "onclick" must enable one of these buttons:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp, the "Update Product" button must be hidden and must call a function in python (example: updateProducts ()).
At the end of this function (the function returns ok or ko), I return the message (using flash), but I do not know how to hide the Loading button and show the "Update Product" button again.
Can you help me?
Here is one way.
When you render the template in python you could pass a variable to control the visibility of the button.
render_template('page.html', visible=True)
Then, on your page perhaps something like this (found at Hiding a button in Javascript and adapted)
<script>
var hidden = {{ visible|safe }};
function action() {
if(hidden) {
document.getElementById('button').style.visibility = 'hidden';
} else {
document.getElementById('button').style.visibility = 'visible';
}
}
You can also change the variable with an onclick function on then page itself.
Your button to call a python function could look something like this.
<input type="button" id="toggler" value="Toggler" onClick="/funcionName" />
Remember to use the #app.route("/functionName") before the python function.
Hope this is close to what you wanted.
Here are the steps to achieve this.
Add loading button with hidden class.
When you click update Product button, following things should happen.
$(".update_button").on("click", function(e){
$(".loading_button").show(); // show loading button
$(".update_button").hide(); // hide update button
$.ajax({}) // send ajax request to update product, on success, hide loader and show update button
});

Use javascript AND PHP in one <input> tag?

I feel like I've looked around for the answer for this question, but most of the responses are very hacky: involving javascript that pops in via AJAX, redirects and other ways of modifying the DOM on the fly.
What I want to do is make the submit button disappear when a user submits a document (javascript) and submit the message via mail (php). The code I have is the following:
<form action="" method="post">
...
<input onclick="removeElements()" id="subButton" class="submit" name="submit" type="submit" value="submit">
The php mail function is in the same document.
Here is the removeElements() function:
var el = document.getElementById("subButton");
el.remove();
document.getElementById("thankYouMessage").setAttribute("style", "display:block");
The submit function works without the javascript call, but when I add the onclick="removeElements()" part, then the javascript part starts working, but the php is no longer executed.
I know that there are other methods for doing this, but in this case, I'm actually curious about why this doesn't function as I had planned. By removing the submit button, am I in effect killing the child PHP process mid(or pre)-execution?
Thanks!
If you add onclick you will have to fire the submit manually.
The other option is add your javascript call code in onsubmit="removeElements()" on the form tag. This way, it will execute your code after executing submit
Related question here
Don't remove the button, rather set visible: hidden or display: none for its style. This way it will still be in the document and will work, it just won't be shown.
When you send the form reloads your page so I suggest:
Using Ajax and only delete button on the response, or
Not generate the button when reloads your page.
Jquery Ajax examples: You can see them here api.jquery.com/jquery.ajax/
Regards.
You could simple use the .hide functionality which JQuery gives you. It's very simple to use and very clean.
Example1 using JQuery:
$("#FormID").submit(function(e)
{
e.preventDefault();
// Hide button
$("#subButton").hide();
// Display thank-you message
$("#thankYouMessage").css("display", "block");
});
Example2 using JQuery:
$(document).ready(function() {
$(".submit").click(function() {
$("#subButton").hide();
$("#thankYouMessage").css("display", "block");
return false;
});
});

Can I/how do I use an OnClick with an if statement in?

I am trying to create a button that when pressed deletes a database entry, when I click it I want a message to say "are you sure you want to delete this" and then if I click cancel the message goes away and nothing happens, if I click okay the deletion runs -- but also it reloads the page, I think this will require a jquery(this is what I would like it to be in ) if statement that basically says if ok is clicked then run the default and also refresh the page after the code has run.
so far I have
<button name="del" type="submit" value="1" onclick="return confirm('Are you sure you want to delete this?') "> delete</button>
Please tell me if I am going the wrong way with this and if I am not, please help me out with how to write the if, (I have infact searched for this and the information is not complete enough for me to understand, I am a PHP developer, never used any Javascript before in my life but would like to start)
EDIT: if this is a caching issue how do I solve it?
The confirmation you have is fine.
However, you're basically performing 2 requests when you press "Ok".
I'd do this one of 2 ways:
1.
Postback to the same page and use PHP to handle the $_POST data before generating the data for the page. Pseudo code:
if($_POST['userid']!= null)
deleteUser($_POST['userid']);
getUsers();
2.
Use Javascript to fire an Ajax request to another page which does the deletion of your user. Then on the "Complete" event, get JS to reload the page that you're currently on.
I think option 2 would be best. It will give you some more exposure to JavaScript too.
$.ajax({
url: "deleteuser.php?userid=1",
}).done(function() {
location.reload();
});
Or the equivilant for $.post
You don't even need to reload the page. You can use Javascript to remove the row containing the user you just deleted.
This of course uses jQuery, but jQuery is just a wrapper for Javascript
I believe your issue is more of a caching issue and reloading the page after a form submission is not efficient since you are performing an unneeded roundtrip to the server, however if that's what you want here's one way of doing it:
PS: Remove the onclick attribute on your submit button.
document.addEventListener('DOMContentLoaded', function () {
initDeletionPage(document.getElementById('the-id-of-the-form-to-target'));
});
function initDeletionPage(deletionForm) {
refreshPageIfNeeded();
deletionForm.addEventListener('submit', onSubmit);
function refreshPageIfNeeded() {
if (sessionStorage.getItem('pageRefreshNeeded')) {
sessionStorage.removeItem('pageRefreshNeeded');
location.reload();
}
}
function onSubmit(e) {
if (!confirmDeletion()) e.preventDefault();
else indicatePageRefreshNeededAfterSubmission();
}
function confirmDeletion() {
return confirm('Are you sure you want to delete this?');
}
function indicatePageRefreshNeededAfterSubmission() {
sessionStorage.setItem('pageRefreshNeeded', true);
}
}
Sorry but I asked for a more Jquery way
Ok...
$(function () {
initDeletionPage('#the-id-of-the-form-to-target');
});
function initDeletionPage(deletionForm) {
refreshPageIfNeeded();
$(deletionForm).submit(onSubmit);
function refreshPageIfNeeded() {
if (sessionStorage.getItem('pageRefreshNeeded')) {
sessionStorage.removeItem('pageRefreshNeeded');
location.reload();
}
}
function onSubmit(e) {
if (!confirmDeletion()) e.preventDefault();
else indicatePageRefreshNeededAfterSubmission();
}
function confirmDeletion() {
return confirm('Are you sure you want to delete this?');
}
function indicatePageRefreshNeededAfterSubmission() {
sessionStorage.setItem('pageRefreshNeeded', true);
}
}

jQuery hide form on submit?

I have a form setup where a user can register, and on submittal, a PHP script runs which validates the user, and once that is done, it echoes a messagebox which jQuery quickly hides and then fades in over the course of 1 second. What I now want to do is to be able to hide that form on submittal, and I thought this might do it:
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function() {
$(this).hide(1000);
});
});
Where div.mainsuccess is the success message, and form.register is the form (with a class of register). Now the first line works, which tells me the script is being called, but the form is not being hidden at all. I'm doing something stupid here, but I cannot figure out what?
I've tried to look through the jQuery API documentation for submit(), but I cannot understand what is being said. Thanks.
I think the reason it may not work is because the form is submitting it's data and waiting for page to refresh... which means, it will stop all of it's javascript stuff coz it's pointless ... I could be wrong but hey, your hide would take 1 second to hide but your page could reload quicker.
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function(e) {
e.preventDefault();// will stop the form being submited...
$(this).hide(1000);
// do ajax here...
return false;
});
});
Updated
here is a list of tutorials
http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
Videos ....
http://www.youtube.com/watch?v=0CMTQtnZ0G0
Try this:
$("form").submit(function(e){
e.preventDefault();
$(this).hide(1000);
});
You'd want to incorporate an ajax call (I'm taking post) to call the php instead of reloading the page
$('form.register').submit(function(e) {
e.preventDefault();
url = $(this).attr('action');
$.post(url,$(this).serialize(), function(data) {
alert('success');
// data will return source code of the URL so you can grab that data and put it somewhere on the script like so.
$('#result').html($(data).find('form'));//form can be replaced with anything
// #result is the id of an element you wish to return the info to
});
$(this).hide(1000);
});
And you'd be done.
More info here
Well, seems that the form refreshes after submission, so it is still there.
I suggest using something like jQuery form: http://jquery.malsup.com/form/
Read up on it and you will find how to use it, and when it is submitted, it won't refresh, and using hide() you will be able to hide it.
N.B you will need jQuery referenced in your code to use jQuery form.
Enjoy.

AJAX jquery Form Post not working

I am trying to post a form using ajax.
Right now, the code I have is
$("#sub").click(function() {
var tag = $("#tagbar").val();
var opinion = $("#op").val();
alert($("#expressform").serialize());
$.post("dbfunctions.php", $("#expressform").serialize());
});
This works, but it takes a long time to post and add to the database (thats what dbfunctions does) compared to how long it took before, when I was using a form action and refreshing the page. Why is this?
Also, if I remove the alert, the script stops working completely. I can't figure out anyway in which this makes sense.
Thanks
Make sure you cancel the default action of the button by returning false from the click handler:
$("#sub").click(function() {
$.post("dbfunctions.php", $("#expressform").serialize());
return false;
});
Also instead of subscribing for submit button clicks, it's better to subscribe to the submit event of the corresponding form directly:
$("#expressform").submit(function() {
$.post(this.action, $(this).serialize());
return false;
});
This way you are no longer hardcoding any urls in your javascript files. You are simply unobtrusively AJAXifying your form.
You can use below function for submit the data
through Ajax form Submit
$('#form1').ajaxForm({
success:function(response){
$('#save_data').html(response);
});
$('#btnSubmit').click(function() {
$('#form1').submit();
});

Categories

Resources