I have a form which action is set to a link , http://website.co.za/blablabla
and I have a js script to auto submit it on page load and NOT redirect it to the form action url.
but it doesnt work , pls help.
My Code:
The following code will make it auto submit on page load BUT it loads the page to the form action URL and it should not redirect.
<script>
$(function(){
$("#myform2").submit();
});
</script>
$(function(){
$.post($("#myform2").attr("action"), $("#myform2").serialize());
});
You opened a parenthesis, so close it.
$(function(){
$("#myform2").submit(function(e){
e.preventDefault();
});
});
Related
Need help..
I have an index.php page. On that page, I have a link to page-2.php.
On page-2.php,
i also have a link to other page. May I know how to load the link on page-2.php in a same div on index.php page.
I'm using jQuery load method do to this. I'm able to load page-2.php inside a div on index.php. Below are the codes that I made.
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
the above code will direct me to a new page not on a same div
Ajax is asynchronous.
$('#content').load(page);
The above starts loading page two
$('a#upd_staff').click(function(){ //link on page2.php
Then you try to bind your event handler to content from page 2 before it is has finished loading.
So when you click on the link, there is no JS bound to it, so it acts as a normal link.
Use deferred event handlers (so they listen on the document and check what element was clicked when the click happens).
$(document).ready(function() {
function ajaxLoad(event) {
event.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
}
$(document).on("click", "a#staff_info, a#upd_staff", ajaxLoad);
});
when you click on $('a#staff_info') this -- I can see that you use e.preventDefault(); for preventing the normal action of the anchor tag but when you click on $('a#upd_staff') this you did not use e.preventDefault(); -- that's why this redirect to page2.php. Use e.preventDefault(); - this for next one click may be this will help you
You can use get() for add directly on your div:
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$.get(page, function(data, status){
//action on page loaded, data is your page result
$('#content').html(data)
});
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
In below,i am trying to redirect from one page to another page with href attribute is appended to URL link.
<script src="jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$('a').click(function(){
var clk=$(this).attr('href');
//alert(clk);
window.location='http://www.shopeeon.com&ver='+clk;
});
});
</script>
Google<br/>
Yahoo<br/>
Rediff<br/>
In above example onclick first i want href(i.e. http://www.google.com,http://www.yahoo.com,..etc) which is stored in 'clk' variable and redirect to another page(i.e. http://shopeeon.com) with our link which is stored in "clk" variable.
In my case when i click on link instead of redirecting to other page with appended link it runs that particular href.
You have to stop its Default behaviour by using .preventDefault()
WORKING FIDDLE
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
var clk=$(this).attr('href');
//alert(clk);
//window.location='http://www.shopeeon.com&ver='+clk;
window.location='http://www.shopeeon.com&ver='+encodeURI(clk);
});
});
UPDATE FIDDLE
Better Remove a tag, Have some div tag with data attribute place URL there.
For example,
<script src="jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$('a').click(function(){
var clk=$(this).attr('data-href');
//alert(clk);
window.location='http://www.shopeeon.com&ver='+clk;
});
});
</script>
<div data-href="http://www.yahoo.com">Yahoo</div><br/>
$(document).ready(function(){
$('a').click(function(){
var clk=$(this).attr('href');
clk ='http://www.shopeeon.com&ver='+clk;
alert(clk);
$(location).attr("href", clk);
});
})
Google
Click on Google to see what is in url to redirect page
This is my index.html page where am trying to implement a simple AJAX when clicked on anchor tag the text will be passed to PHP data.php page and that page will display the page being clicked. Yes, the code is working, but when I first click on the link nothing is displayed and from the second time it stars working. Where is the problem actually?
This is my script
<script>
$(document).click(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
</script>
And this is my PHP for the AJAX
<?php
$anchortext=$_GET['page'];
if(isset($anchortext))
{
echo 'this is a'.$anchortext;
}
?>
You misplaced $(document).click(..) for $(document).ready(....), so only after the first click the click handler is registered to the a element
$(document).ready(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
Use $(document).ready instead of $(document).click.
How to open javascript or jquery popup to display target url in same page
either using jquery or javascript
can anyone please provide me with a link i have searched on google but was unable to found a valuable thing
Here's some markup..
Some Site Link
<div id="popup"> This is the popup text pre $.load() </div>
Here's some code...
$('#popup').dialog({
autoOpen: false,
modal: true
});
$('a').on('click', function(e){
e.preventDefault();
$('#popup').load($(this).prop('href'), function(){
$('#popup').dialog('open');
});
});
Just use following things
<script>
$("#target").load("your link");
</script>
lets say you already make the popup appear on click of a link or a button so call a function on onClick event and pass the target url as a parameter. the in that function you can use alert like
alert(url);
and then use
window.location = url;
to redirect the page.
I have implemented highslide js and it is working fine...
Thanks fellows
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()