Page elements stop being responsive - javascript

I am newbie to the Asp.net so please bear with me for this :)
I added a hyperlink html tag like this
<h2><a class="iframe2 cboxElement" id="frameEdit" onclick="return OpenEditPage()">(EDIT)</a></h2>
Here is the OpenEditPage() method
<script>
function OpenEditPage()
{
var pid = document.getElementById("ProjId").value;
var link = document.getElementById("frameEdit");
link.setAttribute('href', "/Project_MainPageEdit.aspx?editpid=" + pid);
return false;
}
</script>
As soon as I click EDIT hyperlink, edit page is opened in Iframe. But when i close the edit page, I return back to MainPage but all the buttons and other elements on the page become unresponsive until I refresh the page.
What's the reason behind this?

I added following code inside the script and it worked like a charm
$(document).ready(function ()
{
$(".iframe2").colorbox({ onClosed: function () { window.location.reload(); } });
});

Related

How to automatically click a href link when the page loads?

I'm trying to automatically click a href link when the page loads.
<div class="loadmore" kind="rb">
تحميل المزيد...
</div>
The link is supposed to load more comments when you click it.
I tried this:
window.onload = function() {
autoloadmore()
};
function autoloadmore() {
var loadmoreClass = document.getElementsByClassName("loadmore")[0];
var loadmoreChild = loadmoreClass.getElementsByTagName("a");
if(loadmoreClass){
loadmoreChild[0].click();
}
}
but it doesn't seem to work. The problem seems to be with click(), because when I use other codes such as .style.color, they work.
I'm using Blogger by the way.
This's a sample blog:
http://blog-sample-001.blogspot.com/2018/09/title.html
(go to تحميل المزيد...)
ps: I can't change the div.
Assign some ID to تحميل المزيد... . For example, clickAfterPageLoad or whatever you want, and then try this...
$(document).ready(function() {
$("#clickAfterPageLoad").trigger('click');
});
or if you cant't change div, you can do like this:
$(document).ready(function() {
$(".loadmore a").trigger('click');
});

Have to wait to execute jQuery till the service is loaded

I am trying to open the hyper links in a new tab. For loading in a new tab I am using the following code, which will run once and adds target="_blank" in the anchor tags:
<script>
$(document).ready(function(){
alert("ready");
$("a", "#myCustomContent").each(function() {
$(this).attr('target', '_blank');
});
});
</script>
but the jQuery is executed before the contents is retrieved from the service call and I cannot open the hyperlinks in a new tab, so I tried using the below code:
$(window).bind("load", function() {
$("a", "#myCustomContent").each(function() {
$(this).attr('target', '_blank');
});
});
here it fails as some of the images or the files fails to load, or it will take more time?
I need to find a way to call the jQuery to open the "ahref" tag in a new tab.
Try this one. Maybe this will solve the problem
$(document).click(function(e){
if($(e.target).parents('#myCustomContent').size() && e.target.tagName=="A"){
e.preventDefault();
window.open(e.target.href);
}
})
Without seeing more of the code I'd have a hard time deciphering exactly what the best step would be, but it sounds like you are having images with links load after your code runs. You could always try something that would update the click handler on load:
$('body').on('click', 'a', function(){
$(this).attr('target', '_blank');
});
Or you could look into a function that checks if your images are loaded and sets a timeout until they are all set.
var changeTarget = function() {
if ($('body').find('#img')) {
//do code it's loaded
} else {
//repeat in 100 miliseconds
setTimeout(changeText,100);
}
}
changeTarget();
the below code works fine for opening the hyperlink in a new tab.
if only certain anchor tags(hyperlinks) in the page has to be opened in a new window then the below code can be used
$(document).click(function(e){
if($(e.target).parents('#myCustomContent').size() && e.target.tagName=="A"){
e.preventDefault();
window.open(e.target.href);
}
});
where "myCustomContent" is the id given to the division or the tag where the hyper link is present.
or
if all the anchor tags in a page has to be opened in a new tab then the below code can be used.
$('body').on('click', 'a', function(){
$(this).attr('target', '_blank');
});
thanks for the help, #JeremyS and #doniyor

HTML elements only show after i reload page?

I have this javascript code that inserts a label into an existing html page. However, it only shows when i reload the page. Like if i visit the page it doesn't show. once im at the page and reload, it then shows. How do i fix it so it shows right when i visit the page?
$(document).ready(function () {
insertlabel();
});
function insertlabel() {
var $label = $('<label>test</label>');
//place them on the page
$('.div1').after($label);
}
I'm not sure if it makes a difference, but I always define my functions inside $(document).ready();
$(document).ready(function () {
function insertlabel() {
var $label = '<label>test</label>';
$('.div1').after($label);
}
insertlabel();
});

content not showing when clicking nav

I'm trying to figure out why my jquery isn't working correctly. I click on my navbar link and the content space shows for .0923202 of a second and goes back to be hidden. Thank you.
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
});
});
http://jsfiddle.net/NHgpg/
While anchor tags are meant to send users to another page, you're using it to show new content on the page. You will want to return false to override the default behavior of the anchor tag
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
return false;
});
});

JQuery Ajax: Old content flicks in before showing the loaded content

have a problem with my ajax code.
I have some links and a content area.
When i click on a link, i hide the content area, load the new data and show the content area again. It works, but when showing the content area, you see the old content for a short time and then it flickers to the new content.
Can i somehow let the loading screen appear for a longer time?
Also the hide function only works the first time i use a link.
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
I have this ajax code from this source
Thanks in advance!
You could try emptying your content element before issuing the AJAX retrieve command:
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
To make the application more robust, you can also use the .queue() methods to build a queue of actions. Then when a user clicks another link while one is already loading, it's easy to cancel.

Categories

Resources