Develop Reference

Execute a function after a redirection jQuery / JavaScript

I would like to execute a function after a redirection on my site. Here is my code:
$('a.filter-redirect').on('click', function(){
window.location.replace('/technos/');
filter();
});
And here is my function "filter":
$('a.filter-tech').on('click', function filter(){
var tag = $(this).attr('rel');
var val_input = $('#tag').val();
if(tag === val_input){
$('#tag').val('');
$('#form').submit();
}
if(val_input){
$('#tag').val(val_input + ',' + tag)
}
$('#tag').val(tag);
$('#form').submit();
return false;
});
I am not an expert in JS and jQuery and the code may be wrong. My function works, but not after the redirection.

when you redirect to a new page the scripts on the previous page are no more executed. So you have to call this function as soon as the new page is loaded e.g. on $(window).load() or $(document).ready() not on an click in previous page.
$(document).ready(function(){
var tag = $(this).attr('rel');
var val_input = $('#tag').val();
if(tag === val_input){
$('#tag').val('');
$('#form').submit();
}
if(val_input){
$('#tag').val(val_input + ',' + tag)
}
$('#tag').val(tag);
$('#form').submit();
return false;
})

When you redirect your page location changes, which means that a new page is loaded and the old is gone.
To do some action in the new page you have to add it in that page (for example in the body on load or in a script tag)

When you go to the new page, keep all your required code inside $(document).ready() or window.load()
Somthing like this
function runOnPageLoad() {
alert('Hey There');
}
window.onload = runOnPageLoad;
Or in jquery as
$(document).ready ( function(){
alert('Hey There');
});​
Hope it helps

how to scroll a page at specific position when page reloads in MVC ASP.NET

This is ASP.NET MVC project, I have placed a div at specific position in the page and added id dealProductAnchor. When this page loads or reloads normally it behaves as normal, but when a specific button is clicked I want that page after completing all postback progress when page loads done, it comes to the position of that div.
with java script I tried this, but did nothing any solution from server side or client side will be appreciable.
$(".button-1").click(function () {
if (localStorage && !localStorage.getItem('click')) {
localStorage.setItem('click', true);
}
});
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
window.location = window.location.href + "#dealProductAnchor";
//click = false;
}
});

If you want to Achieve this via BackEnd you Can set a value into ViewBag and check it on .cshtml page like below:
Controller Code :
public ActionResult TextAction() {
// Do your Logic here
ViewBag.testValue = "test";
return View();
}
JavaScript Code:
$(document).ready(function () {
#if (ViewBag.testValue == "test") {
<text>$('html,body').animate({
scrollTop: ($("#dealProductAnchor").offset().top) - 200
}, 'slow');</text>
}
});
hope it helps you :)

Can you try this??
$(".button-1").click(function () {
$('html, body').animate({
scrollTop: $("#dealProductAnchor").offset().top
}, 2000);
});

Instead of setting:
window.location = window.location.href + "#dealProductAnchor";
In your $(document).ready callback, set the scrolltop using Javascript:
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
$('body').scrollTop($("#dealProductAnchor").offset().top)
localStorage.removeItem('click');
}
});
If that doesn't work, you may need to add a window.setTimeout() wrapper to allow the browser to finish rendering:
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
window.setTimeout(function() {
$('body').scrollTop($("#dealProductAnchor").offset().top);
});
localStorage.removeItem('click');
}
});

I'd try changing the form action attribute to include the hash
$(".button-1").click(function () {
//Change $("form") to use the form ID if you have one
$("form").attr("action", $("form").attr("action") + "#dealProductAnchor" );
}
If the button is submitting the form you may need to change the button from submit to button then submit the form in the click handler.

jquery iframe item selector not working

I'm trying to add class to an iframe (on same domain) element but check some of the same issues here and came up with the solution.
The iframe is next to body tag and the js was place before the body end tag.
<script>
$(document).ready(function() {
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
</script>
There is no error showing in console except the OK log but the class was not adding to #mnucompany.
What else could be wrong? Any big hints will be appreciated.

After our comments :
You should wait the iframe to be loaded !
$(document).ready(function() {
$('#my-iframe').on('load',function (){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
});

$(document).ready(function() {
var myVar = setTimeout(function () {
var $mnuCompany = $('#my-iframe').contents().find('#mnucompany');
if($mnuCompany.length>0){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
clearTimeout(myVar);
}
});
}, 1500);

Jquery function doesn't work after Ajax call

I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?

That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {

Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers

class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});

If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference

I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.

The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});

You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});

Toggle AJAX request

I have the following code which loads content into a div, then fades in:
$('a.search').click(function(){
$('.pop-up').load('search.php', function(){
$(this).fadeToggle();
});
});
However, I'm assuming this is making a request each time the a.search is clicked, if it is a toggle?
Is there a more economic way to achieve this toggle without making multiple calls?

Implement the toggle in your own code instead of using .fadeToggle.
$('a.search').click(function(){
if ($('.pop-up').is(':visible')) {
$('.pop-up').fadeOut();
} else {
$('.pop-up').load('search.php', function(){
$(this).fadeIn();
});
}
});

You can check for one time loading by setting a global variable.Assuming that your pop-up div style is set to display:none, example code is provided below:
var isPopUpLoaded = false;
$('a.search').click(function(){
if(isPopUpLoaded==false){
$('.pop-up').load('search.php', function(){
isPopUpLoaded = true;
});
}
$('.pop-up').fadeToggle();
})
;