I want to add dynamic contents to the slides of my jquery slider. the dynamic contents are selected by user through select boxes. The problem is when I add dynamic content it is shown in the div of slider but as soon as I click on Next or Prev that content is lost:(
Please tell me how to store that information on the slider page, so that it won't get lost.
Thanks..
I do this sort of thing all the time. Put the slider on a separate page with all its logic (ie reading the the slides etc from a table). Make it entirely self contained. You can either pass some variables from your user selection or set a session variable that controls the dynamic retrieval.
In your main page call this page with JQuery, something like
$(document).ready(function() {
$('#mysliderdiv').load("whateverthepagewiththeslideriscalled");
});
You can put logic on the boxes to change the session variables. If you are using php for example in the onclick you could use AJAX to pass the selection to a php template which will change the session variable. It will of course be invisible to the user.
As the slider page is loaded by AJAX every time a page is loaded it will be correct.
Sounds a bit long winded but I have done this many times and it works fine.
Related
I have an image slider where the class name 'current' changes when the next and previous buttons are clicked to display the current image. I wanted to create a separate Overview page which displays all the images in a grid, then when an image is clicked you are directed to the Slider page, and the selected image has the class of 'current'.
Because I can't access and add/remove the 'current' class from my Overview page, I'm not sure how to achieve the functionality I'm looking for. I'm hoping there's a way to load the Slider page and pass in a function which alters the class names on the page you're directed to.
Any help or suggestions on a different way to approach this would be appreciated.
Also, this is just using Vanilla JS. I'm relatively new and still trying to understand the basics.
Thanks!
The easiest solution that comes to mind is using GET parameter: https://example.com/overview?currentimage=1. This way you include the image id in the url and can act accordingly on the overview page. This however works only as you open the new page.
If you'd like the image to change in real time on the overview page as it changes on the slider, you have to look into cookies, session, and/or HTML5 Web Storage. These allow you to store and share data across multiple pages. You update the cookie/session/storage on slider change, and then retrieve the data on the overview page with a loop that checks for changes every second or two, and updates the grid.
I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery
I want to build a UI where a user selects several products, and those products are shown to the user, and then various computations are made on those selected products. So:
div1: area where user selects products
div2: current product selections are shown
div3: results (showing results of computations made on user selections)
I am primarily a back-end PHP programmer, and by no means a JS of front-end programmer programmer, so nuances of jQuery, JavaScript or working knowledge of them, and such are not my area of expertise. I can probably implement this without JS, and have it work, without all the dynamic content. It maybe not be as immediate but it will work. Although, this is a good opportunity to try dynamic content, and when it comes to the world of JS, I figure gotta start somewhere.
I think ideally this can be implemented by using an autosuggest->select widget in div1, where I can preload existing products from DB. Then, something in div2 to show current user selections. Results in div3 can then be either computed on the fly with JS, but since majority of the computations are done in PHP I figure I will do those on the back end, and display results wither via AJAX or via page reload (form submit).
So, while I figure I can make it all completely dynamic (aka JS), rewriting existing PHP code into JS is probably not exactly beneficial.
Question: How do I do UI to support features for div1 and div2 keeping in mind that I am not an expert on JS or jQuery. And how do I pipe those selections via POST to my PHP script? After that my intentions is to reload the page with results in div3, keeping div1/div2 same as user left them before page reload. I
Use jQuery & Ajax Calls to achieve this. You need to follow something like this -
Add jQuery to your application
Assign some event listeners to your product selection in div 1
Using the even listeners, upon selection of some product in div 1, show it in selected items in div 2.
At this point you can make an ajax call to your server where your PHP code does the computation & send the list of products you selected via an Ajax call.
The server can then process stuff & respond back to you with the data you need to show.
You capture this data in your ajax request response & then populate your div 3 with this.
Showing how to do the whole thing would be a lot of code, let me show you some references that will help you -
How to start using jquery - http://learn.jquery.com/about-jquery/how-jquery-works/
Event handling in jQuery - http://learn.jquery.com/events/
Ajax Calls in jQuery - http://api.jquery.com/jquery.ajax/
Hope this helps.
Since JS is event driven. We just need to attach event handler to the products.
Let this be the 3 divs
<div id="a">
<div onclick="show('p1');">p1</div>
<div onclick="show('p2');">p2</div>
</div>
<div id="b"></div>
<div id="c"></div>
We've attached the onclick listeners to each product, which will trigger the show function
function show(ele) {
$('#b').html(ele + " was selected");
$.ajax("http://fiddle.jshell.net/favicon.png").done(function( data ) {
$('#c').html("data: " + data);
});
}
It will first update div b, then does an ajax call and update div c. You just need to replace the ajax URL to your php for processing(, and add some POST or GET request params)
Here's the fiddle: http://jsfiddle.net/5h8RV/4/
I have web page with four grid views. Each grid is hidden under a div tag. Whenever user clicks on div the data grid corresponding to the div is shown. I have binded data to the grid views at the page load only, since the data size is huge I cannot load the data binding at the page as the time taking to page load is huge. I was thinking a way that grid view gets data loaded only when user clicks on the corresponding div tag .
Kindly advice me how can we do it ?
As stated by the first comment, you need to convert the grids to load via AJAX to achieve this.
You can use the function toggle() from jQuery to display/hide the divs.
With jQuery, you can also add events when you click on a div. This event should fire the appropriate jQuery function.
http://api.jquery.com/toggle-event/
I am facing some problems when page is posted back partially. I have some radio buttons based on which I am making tr display="" and display="none" by javascript. After that I am adding rows gridview. The gridview contains empltyTemplate and footer to add new rows. But when I add row in grid view, the user control is posted back and hence all the tr becomes displa="none" which is default when page is loaded. I tried to keep gridview in update panel but it not working. Hierarchy of my controls is as below.
Level-1-Master page--->Level-2-master page--->Level 3-.aspx page--->Level 4-user control--->Level-5 -multiple accordians-->Level-6: 1 user control in each accordian..
code is too long to past here.. I tried to keep update panel inside user control(Level 6) but it was not working. After some googling I found that update pane not works if it is inside accrdian. So I tried to keep all accrdian inside update panel but in that case .aspx page is not posted back but all user controls placed inside accrodian are posted back so the selection is set as they are on default load.
I want all selection to retain when the last level user control is posted back.
The situation is quite complex to understand but this is what the things are..How to solve my problem?
Changes made to the DOM from JavaScript are not retained cross-PostBack; the server has no idea what you've done, and therefore has no way to track it.
To solve this, you either need to have your JS code update state on the server side with a Callback or Ajax call -- or perhaps have it update a hidden input field in the form that reflects the state of your tags, and have the server look there and update the rendered HTML accordingly.