jquery slideshow dialog for html dynamic content - javascript

I'm looking for a slideshow tool (for jquery) which i can load in a dialog and every time i click on the next or previous button i load the content from the database.
If i use the dialog jquery-ui widget and i add buttons, it puts them below the content. And i want them to be on the side, as it is the way the client asked:
with the following js code the dialog looks like this:
$(function() {
var x = 1;
$('#dialog').dialog({buttons:
{
Next: function() {
x++; // Increment counter
$(this).text(x); // Build dialog based on new value
},
Prev: function() {
x--; // Decrement counter
$(this).text(x); // Build dialog based on new value
}
}
});
});
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Somebody told me that it's better if i load all the content when the page is loading, but, what happens if there are 10000 or 15000 divs, each one with html content and image. My first thougth was "the page will take too long to include those objects, and maybe they will never be clicked by the user" and that's what i told him. And he told me, "as you'll be growing in web developmente you'll want to avoid requests"
If it's better to have a dialog which has next a previous button on the side, which tool can i use?
The page is beeing made on Rails with jquery
Thanks in advance for your opinions.

Related

Jquery can't seem to target contents of modal

I wish to append some content within form within a modal and so have created:
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>");
However, this does not appear to work -the HTML above deosnt not append, not do I see any errors in the console.
I can do other stuff on the page - append the text anywhere else, just not to part of the modal.
The site is using the Near Me platform, an example site of which is here: https://desksnear.me/
I am just trying to affect the modal that appears when you click Log In at the top right.
Would anyone know why this isn't working and what I could do to get back on track?
I think the modal gets created anew every time you click the Log In button. So the .simple_form changes get overwritten before they can be seen.
There isn't an ideal solution to this problem if you can't tap into an event that occurs when the modal is opened and all the content in it has been initialized. I would suggest using an interval to repeatedly check if the modal is visible (for some capped amount of time, in case something fails), and then insert your HTML code at that point.
$('.nav-link.header-second').click(function() {
var token = setInterval(function(modal) {
if (modal.hasClass('visible')) {
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>")
clearInterval(token)
}
}, 10, $('.modal-content'))
// set a limit on the interval in case of failure
setTimeout(clearInterval, 2000, token)
})
Wrap it in document ready, the element must be there when the code executes(assuming you already have the element with class .simple_form as hidden)
$(document).ready(function(){
$('.simple_form').append("<p><a href='google.com'>Apply now</a></p>");
});

Run code to click javascript button within Android app? Trying to scrape reply button contact-info on craigslist.org page

I have an app I'm working on which needs to display craigslist ads. I am parsing the html to get the attributes off of the page. But herein lies the problem:
The reply button is a javascript button. In it is the email/phone# for the ad.
I need to get the info from the pane that is generated when the button is clicked and then parse its information.
You can register a callback in click event and target the affected div to probe for the content required to be parsed...
Hypothetically, lets consider a scenario...
<!-- CONSIDER THIS AS THE TARGET DIV WHERE CONTENT IS POPULATED-->
<div id="replydiv"></div>
<!-- BUTTON WHICH POPULATES THE DIV-->
<button id="clickme"></button>
<script>
$(function()
{
$("#clickme").click(function()
{
//Will check if the div is populated
doCheckReply();
})
})
</script>
function doCheckReply()
{
if($("#replydiv").children().length > 0)
{
//start parsing
}
}
If the replydiv is taking some time to load, use setInterval() to keep checking for availability of content.
It would help me a lot if you could share a snippet of the code
Hope it helps!

Making jquery Dialog working between two pages

I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");

How to make sure ajax is fully loading content using .load

We have a site where on the left we are displaying our products and on the right shows the product the user clicks on (on same page). When the page loads we have the first product being shown on the right by default, when the user clicks on a new product then the right columns changes to show the new product (via ajax).
Here is how I have the ajax setup:
<script>
jQuery(document).ready(function($){
var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");
$(".main").load(defaultValue);
$("ul.products li.shop-thumb a").click(function(e){
e.preventDefault();
var addressValue = $(this).attr("href");
//alert(addressValue );
$(".main").load(addressValue);
//$("a.woocommerce-main-image").addClass("image-popup-no-margins");
});
});
</script>
We are using magnific popup to show the larger image of the product when the user clicks on the (right sides) main product image.
This works great for the first (default) product but when the user clicks on a new product and the content to the right changes, then the user clicks on the main image, the pop up fails to load. So in other words it works when you first load the page and the default product is shown, but fails to fire when a new product is clicked.
Here is the product-image.php filter which just adds our class of image-popup-no-margins:
apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
And in the footer we have this:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
Im may have given too much info here but I felt better safe then sorry, so perhaps its better if I give you a link for you to see what I mean. When you visit the page, click on the big image on the right and you should see the popup functioning. Now try clicking on one of the products on the left so the main image on right changes and try to click it again, the default behavior happens instead of our pop up.
I checked classes and everything looks fine, I'm sure it has to do with the ajax but can't get it worked out.
Update:
After more tinkering with this I think the problem is that the .load is not 'reloading' the content when the anchor is clicked. Like I said it works when you first load the page and click on the first image, but when you change the image and the ajax is called I don't think it really reloads the content in the main container. How would I make sure the ajax is fully loading the content like it does when you first open the page? If you go to the site and click the big image on right, it works, change the image by clicking on a product from the left and the pop up fails to work and so does the "Tag It" pop up… Maybe this is less specific to magnific popup and more of a basic ajax
It seems your server is just quite slow and delivering the content required for the new popup. you can see the get requests by viewing the firebug console. once these have completed it works perfectly. I suggest upgrading for hosting or finding another way to deliver the higher quality images faster, such as imgur or other image hosting services.
So the problem was indeed with the magnific popup, replaced it with Fancybox and all seems to be functional correctly -- Thanks for the help guys

Caching issue with loading partial views into JQuery dialogs

Imagine a simple list of users with "edit" links. Clicking "Edit" opens up a dialog box with details for the selected user. The "Details" popup is a partial view.
I have an issue with Partial Views being cached when opening them in JQuery dialog windows.
My partial view( Notice the OutputCache attribute as one of the things I tried to solve the caching issue):
[HttpGet]
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public PartialViewResult EditUser(int id)
{
var userList = userRepository.GetByRole(id);
return PartialView("EditUser",userList);
}
The PartialView above is requested and loaded from the following Javascript function:
function editUserOpen(id) {
$.ajaxSetup({ ///// Another thing I tried to solve caching
cache: false
});
var url = "/User/PartialViewResult/" + id;
$('#user-wrap').empty().load(url, function () {
$("#dialog-edit-user").dialog({
title: "Edit User",
autoOpen: false,
height: 300,
width: 500,
modal: true
});
$('#dialog-edit-user').dialog("open");
});
}
As shown above "dialog-edit-user" ( along with "dialog-add-user" and "dialog-delete-user" ) are located inside of the "user-wrap" Div in the DOM.
Functionally everything works but when I open a dialog, cancel and then try opening dialogs for other users, until the page is refreshed the dialogs will always contain info from the initially displayed dialog.
I figured its a caching issue but I ran out of ways to solve it.
I would like to stay away from $.ajax({ cache:false; }).html(content) if possible. It seems to me that it's a lot slower than .load().
Here is what I discovered.
Everytime JQuery dialog is initialized with .dialog() as shown above the div that becomes a pop up is being taken out of the DOM and moved the the bottom of the page. Dialog Div cannot be a child of another Div. In my example it was:
<div id="user-wrap">
<div id="dialog-edit-user"> /// <--- Jquery dialog div
</div>
</div>
Dialog cannot be wrapped in other divs.
After the first click, when the dialog is displayed JQuery simply starts accumulating duplicate Divs at the bottom of the page. $("#").dialog('open') opens the very top DIV of accumulated duplicated every time making the programmer/user think it's a caching issue.
So the solution is to either remove the div created by JQuery from the bottom of the page on .dialog({close: } event or to move it back up to the parent wrapper DIV with JQuery .append() / .appendTo() functions.
Hope this helps to a next programmer who runs into similar issue.
Add some random hash to the URL to keep it unique:
...
var url = "/User/PartialViewResult/" + id + "?t=" + new Date().getTime();
...
This will always load new content.

Categories