Develop Reference

How to open a new page in jQuery Mobile from javascript function

I have a button in my html form.When i enter values in the textfield, a background operation is performed and data is sent to the server.But since this button already has an event (submit), how do i open a new page once that background operation is completed?
This is the button.
Submit
and in my javascript i have this function
$(document).ready( function() {
$("#submit").bind('click', function(event){
doSomeBackgroundStuff();
});
This is happening from Page A, i want Page B to open when doSomeBackgroundStuff() finishes.

since this button already has an event (submit)
Use preventDefault or return false:
$(document).ready( function() {
$("#submit").bind('click', function(event){
event.preventDefault(); //or just use : return false; at last
doSomeBackgroundStuff();
});

You have a few options.
First, working with what you have already, You could use a callback function for your bind event, and add window.open to load the new page, and simply pass in a url, or hardcode it.
Your jquery would look something like:
$(document).ready( function() {
$("#submit").bind('click', function(event){
//fire AJAX request
doSomeBackgroundStuff();
},function(){//call back function
window.open('http://www.yourURL.com');
});//end bind
});//end doc ready
Here is further reading on window.open - How to open a new HTML page using jQuery?
A second option is to use AJAX. You would setup an AJAX request for the new page, and use $.ajaxSend and $.ajaxComplete to fire functions before and after the request.
Your jquery would look something like:
//on button click
$('#submit').click(function(){
doSomeBackgroundStuff();
});
//ajax start handler
$(document).ajaxStart(function(){
//do stuff before AJAX request
});
//ajax complete
$(document).ajaxComplete(function(){
//do stuff after AJAX request
});
A related question with a similar solution.
Global AJAX handlers
Hope this helps

JQuery after submit form post link is not send? [duplicate]

Hello Friends this is my code to form submit and then send post link but form submit success then after not send post link.
document.getElementById("pitch_image_path_form").submit(function(e){
$.post("submit_investorform.php",{'flage':'getallimagesfromselectedid','form':'pitch_image_path_form'},function(result){
$("#pitch_image_path_showalldatafromid").html(result);
});
e.preventDefault();
});
this is my code form is submit but post request is not send.

dear renishkhunt please try this code. this is help fully for me.
$("#pitch_image_path_form").ajaxSubmit({ success: function(){
$.post("submit_investorform.php",{'flage':'getallimagesfromselectedid','form':'pitch_image_path_form'},function(result){
$("#pitch_image_path_showalldatafromid").html(result);
});
} });
please check this link this is tutorial.
http://malsup.com/jquery/form/

.submit() is a jQuery function, so you need to wrap your $("#pitch_image_path_form")[0] in a jQuery wrapper, like so:
$($("#pitch_image_path_form")[0]).submit(function(){

There is no submit() event in DOM, you are mixing DOM and jQuery
change
document.getElementById("pitch_image_path_form").submit
to
$("#pitch_image_path_form").submit

$("pitch_image_path_form").submit(function(e){
e.preventDefault();
$.post(
"submit_investorform.php",
{'flage':'getallimagesfromselectedid','form':'pitch_image_path_form'}
, function(result) { $("#pitch_image_path_showalldatafromid").html(result); }
);
});

Because DOM does not support submit(), there is do submit() function in DOM. Same exact answer when you asked this the last time.

When you call .submit(), it posts the form with the specified action of the <form>.
You might want to stop the propagation, by using either event.stopPropagation();, event.preventDefault(); or return false; at the end of your function.
$("#pitch_image_path_form").submit(function(event){
event.stopPropagation();
event.preventDefault();
//Your .post()
return false;
});
Plus, as epascarello pointed out, .submit() is a jQuery function.
If you want to use it, use it on the jQuery object by removing [0] before submit(), as you're not supposed to have multiple elements with the same ID.

Delegate to capture two form submissions

Using the following function to capture two dynamically generated form submissions, but is not preventing their submission.
$('body').delegate('.edit_faq, .new_faq', 'submit', function(e){
e.preventDefault();
//voodoo
});
I was using the following, using live. This works, but live is depreciated and the end result is for this code to end up in a flexible plugin.
$('.edit_faq').add('.new_faq').live('submit', function(e){
e.preventDefault();
//magic
});

What you have written is actually working.
check:
http://jsfiddle.net/peuqU/
press run as jsfiddle sometimes needs a refresh before testing submits.
I have only been able to test it with chrome 23.

Try on which is the recommended way, and return false:
$('body').on('submit', '.edit_faq, .new_faq', function(e){
e.preventDefault();
//Do your stuff here.
});
As to why the submission still occurs, maybe you have a JS error somewhere in the page?

FIXED--
The problem was that the code required being wrapped on a document onReady:
$(document).ready(function(){
$('body').on('submit', '.edit_faq, .new_faq', function(e){
e.preventDefault();
//voodoo
});
})
I occurs to me that since live did not require the ready, that maybe this is still wrong?

applying script to elements inserted via jquery .html()

i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere.
To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function.
That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?
For example, code like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}
How do I make the #touchMe.click command apply to the new incoming HTML?
thanks a lot

Take a look at live()
$('#touchMe').live('click', function() {

Try -
$('#touchMe').live('click',function(){
alert ("WORKED");
});

Instead of
$('#touchMe').click(function(){
alert ("WORKED");
});
use
$('#touchMe').live('click', function(){
alert ("WORKED");
});

you use .live() or .delegate() function instead of click.
$(document).ready(function(){
$('#myButton').live('click', function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').live('click', function(){
alert ("WORKED");
});
}
note: the live on "mybutton" is not necessary in this example.

Refresh conent with JQuery/AJAX after using a MVC partial view

Using the following JQuery/AJAX function I'm calling a partial view when an option is changed in a combobox named "ReportedIssue" that is also in the partial view. The is named "tableContent".
<script type="text/javascript">
$(function() {
$('#ReportedIssue')
.change(function() {
var styleValue = $(this).val();
$('#tableContent').load(
'/CurReport/TableResults',
{ style: styleValue }
);
})
.change();
});
</script>
My problem is that after the jump to the partial view I lose the link to the javascript. I think I'm supposed to use the JQuery ".live()" but I'm unsure.
In short, I want to re-establish the link between my JavaScript and my combobox and after the inclusion of the partial view's HTML.
I hope I'm being clear enough,
Aaron

This answer is deprecated, see Mike's answer
As of jQuery 1.4 you can use the live handler with the change event. Simply change your code to work with it. If you are stuck with an earlier version of jQuery, you need to reapply the handler in the AJAX callback.
$(function() {
$('#ReportedIssue').live('change', function() {
var styleValue = $(this).val();
$('#tableContent').load(
'/CurReport/TableResults',
{ style: styleValue }
);
})
});

Since .live() is now deprecated. Use .on(). Or, in my success callback, I simply did a .load()
$('#container').load('index.php', '#right'); Worked like a charm.

Yes you should use live():
$('#ReportedIssue').live('click', function() {