i hope anybody can help me ...
index.php (http://jsbin.com/elocek)
<script type="text/javascript">
$(document).ready(function() {
$('.open').popupWindow({
windowURL:'popup.php',
windowName:'external'
});
});
</script>
popup.php (http://jsbin.com/agepog)
<script type="text/javascript">
$(document).ready(function() {
$('.close').click(function() {
window.close();
});
});
</script>
so you can see 2 files, the "index.php" is only a snippet from the whole one but you can see the jquery etc. my problem is i would open a popup/modal-box whatever - see the new window and would like to reload/refresh/replace the mainwindow (index.php) if i close the popup/modal-box ... is this possible?
the index.php has some additional vars e.q. index.php?site=news&text=....
(sorry for my bad english)
Try this
$(document).ready(function() {
$('.close').click(function() {
window.opener.location.reload(true);
window.close();
});
});
Related
I have a partial view in ASP.NET MVC 3, with a script:
<script type="text/javascript" >
$(function () {
$("#tagbox").autocomplete({
source: "/Tag/GetTags",
minLength: 1,
select: function (event, ui) {
$("tagbox").val(ui.item.value);
}
});
});
</script>
when I load the patial view in my content div, the auto complete won't work, unless I remove the '$(function () {... }) so the script looks like this:
<script type="text/javascript" >
$("#tagbox").autocomplete({
source: "/Tag/GetTags",
minLength: 1,
select: function (event, ui) {
$("tagbox").val(ui.item.value);
}
});
</script>
But when loading it as new view by accessing the URL, everything works just fine.
Also I have those references on my main view:
<script src="http://static.jsbin.com/js/prod/jsbin-3.4.4.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Second, when I change the order between the references, my ajax call opens as a new view and not as partial. Maybe one of them is unnecessary or something?
Please follow the below link it will clearly explain about the jquery $(function(){}.
$(function(){}
I'm building a site utilising Bootstrap tabs and AJAX. I've set it up so that when a link with the class of .load is clicked the content of that html document is loaded into the active tab, in this case #tab2.
This is done using the following:
$(function(){
$("#tab2").delegate('.load', 'click', function (e) {
e.preventDefault();
$("#tab2").load($(this).attr("href"));
});
});
I also need some links in #tab2, those with the class of .load-tab1 to load content into #tab1, which I have achieved with the following code.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
});
});
The problem is I can't work out how to make it so that when .load-tab1 links are clicked the active tab is also switched from #tab2 to #tab1.
Any help would be greatly appreciated!
UPDATE:
I was able to get it working with the following code but still thinking there is a better solution.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
$(".tab2").removeClass("active");
$(".tab1").addClass("active");
$(".tab-content #tab2").removeClass("active");
$(".tab-content #tab1").addClass("active");
});
});
You should select the tab in the .load() callback:
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"), function(response, status, xhr){
$( theFirstTabAnchorSelector ).tab('show');
});
});
});
I am using the following code for ajax page loading
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({ opacity:0.1 }, 500);
}).load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({opacity:1});
});
});
});
</script>
This is working fine but loads newer contents with very low speed. Can anyone please tell me how to improve its speed of loading newer contents or provide me some alternate jQuery AJAX.
You could try to take away some of the additional fade functions:
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').hide().load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200);
});
});
</script>
Of course this is not exactly the same behaviour but it will surely appear faster.
I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)
I have a JQuery function/script that I'm using for posts on a blog that upon hover of the post image shows the post title, excerpt, and link.
Additionally, I have an AJAX Fade Out/Fade In pagination script running and when I go to the next set of posts in the pagination, the first JQuery script doesn't run any longer. I know I need to be using the .live function somehow for jQuery, however I can't seem to figure it out. Here are the two scripts.
<script type="text/javascript">
$(function() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
});
</script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#postPagination a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#page-wrap').fadeIn(500); });
});
});
</script>
Thanks for your help.
you could put the capslide command into a function and call it after each ajax load:
function addCappslide() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
}
$(function() {
addCappslide(); // call it once the page has loaded
$('#postPagination a').live('click', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){
jQuery('#page-wrap').fadeIn(500, addCappslide() ); // call it after each ajax load again after it faded in
});
});
});