Develop Reference

Javascript modal that displays list that closes and returns to main html

Rather new to javascript, jquery and bootstrap, etc., so bear with me. I have a situation where I want to present a list of errors in a model dialog after the user hits a "validate" button. Got all the working - I am generating a list of objects that indicate to the user they need more work to the exact spot that needs additional data entry. I have the the DIV "id" that represents the field that needs more data (and each item will jump someplace different).I do not want a drop down list since there are be lots and lots of these items.
A few questions:
How do I go about jumping from the modal to the main html. I believe I have seen scrollIntoView mentioned in a few other posts as I was looking but will that hop to the DIV and also close the modal?
What construct should I use for the list? A list of scrolling button? The size of this can be quite large (hundreds) so it will need a scroll capability.
Finally, the app is "paged" with a next and prev buttons. I assume that will not be a problem from the aspect of jumping to a page not already displayed?
Here is the current modal code:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="message-container">
<div class="header">
Validation Errors
</div>
<div class="message">
The following fields are required:
</div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
</script>
and
showValidationError: function (fieldlist) {
settings.focusedField = $(':focus');
$("#validationErrorModal").detach();
$(".device-container").append(templates.validationerror({ fieldlist }));
$(".message-container input").focus();
},
validationErrorOk: function () {
$("#validationErrorModal").detach();
if (settings.focusedField) {
settings.focusedField.focus();
}
},
The field list is a list of objects that contain the id (field.id) of the DIV and also a description (field.fieldName) that I want to display.
Here is something I mocked up in paint...I am not sold on it but it show in a general sense what I am looking for:
I don't need a full solution rather, just want mechanisms I can use.
UPDATE
Just to help out anyone else in the future, using the info provided in the correct answer below I have a new code as follows:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="validation-container">
<div class="header" align="center">
Validation Errors
</div>
<div class="message">
<div class="scrolling-container" style="background-color: rgb(238, 238, 238); height:660px">
<div class="grid grid-pad">
{{#each fieldlist}}
<div class="row click-row" onclick="fffdevice.validationErrorFix('{{id}}');">
<div class="col-7-8 field-name">{{fieldName}}</div>
<div class="col-1-8">
<img class="pull-right" src="/mysite/Content/device/images/fix.png" style="width: 40px; position:relative; top: -5px;">
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div><br/></div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
Then the Javascript for the onClick is:
validationErrorFix: function (id) {
$("#validationErrorModal").detach();
var x = document.getElementById(id);
x.scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
},
Which closes the dialog and jumps to the field. It looks like (I know this is ugly and I will clean it up later):

Bind the modal event to the validation code and show the modal if error(s) are found.
Display the modal with the list of errors using an html unordered list, inside the li element an anchor tag where the href attribute will have a value with the id that corresponds to the input field, all this done dynamically from your validation code.
Once an error in the list is clicked hide the modal using bootstrap $('#your-error-modal').modal('hide'); so the code would be something like this:
$('#your-error-modal').on('click', 'a.error-item', function(){
$('#your-error-modal').modal('hide');
});
I haven't tested this code, but if you're having issues with scrolling to the section of the input and closing the modal you can probably do something like this too:
$('#your-error-modal').on('click', 'a.error-item', function(e){ // use this method of onclick because your list will be created dynamically
e.preventDefault(); // prevent the default anchor tag action
var href = $(this).attr('href'); // grab the href value
$('#your-error-modal').modal('hide'); // close the modal first
scrollToDiv(href); // then take the user to the div with error with a nice smooth scroll animation
});
function scrollToDiv(location) {
$('html, body').animate({
scrollTop: $(location).offset().top
}, 2000);
}
Again this is untested code, but the idea is there.
For UX reasons you might also want to create a floating div or something where users can click on it and go back to the modal to continue reading your list of errors.

Jquery image change

I have been having some trouble making this work, I need to create an html page that has three images in a row and a button that change all the three images to other images, and when the button is pressed again the images switch back to the first three images from the beginning .

You should load all the images into two div elements, hide one of them by default, then switch which div is shown and which is hidden whenever the button is pressed. The jQuery click function can detect when the button is clicked, and the jQuery toggle function can switch show/hide states.
$(document).ready(function(){
$('#imageSet2').hide();
})
$('#imageSetBtn').click(function(){
$('#imageSet1').toggle();
$('#imageSet2').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="imageSetBtn" type="button">Switch</button>
<div id="imageSet1">
<img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png?mmfb=a5234ae3c4265f687c7fffae2760a907">
</div>
<div id="imageSet2">
<img src="https://www.mozilla.org/media/img/firefox/template/header-logo-inverse.510f97e92635.png">
</div>

Sort DIV's after clicking a button which moves you to another site

Say I have 2 pages:
mysite.com/site1
mysite.com/site2
On site 1 I have a few buttons (all of them redirecting to site2)
On site 2 I have a few boxes with content (divs)
Is there a simple way to only show the divs I want to on site2 based on which button was clicked on site1? I remember something with the redirect?
For example, when I click button one, I end up on site2 with only box 2 and 3 visible, but if I'd've clicked button 2, I only see box 1 on site2.

This could possibly be a huge answer, but I will try to simplify it.
Basically, you want to use ajax- $.load here and with that you can just get content of other page.
Say you have below markup in site1
<button id="button1" class="btn" data-load="#div1">Load Div1 from Site 2</button>
<button id="button2" class="btn" data-load="#div2">Load Div1 from Site 2</button>
<div id="loadContent"></div>
Now what you can do is onclick of any button above fetch its data-load value and make a valid url and pass it through $.load. For Example.
$('.btn').on('click',function(){
var url="/site2"+$(this).data('load');
//url here will be www.mysite.com/site2#div1 or www.mysite.com/site2#div2 based on button clicked
$('#loadContent').load(url,function(){
//#div1 from site2 will be loaded within loadContent element
//callback function after content is loaded
})
//or just $("#loadContent").load(url);
});

You can have each button send a different query string to site 2 representing the allowed divs (e.g. mysite.com/site2?div1=true&div2=false)
Of course you will have to handle the query string on site2's javascript...

You can set id's for the elements in your 2nd page and then do the following:
First redirect to your page with the following Button:
<button onclick='window.location="page2.html#yourid"' >klick me</button>
Use the following Script in your page2.html:
var url=document.URL;
if(url.substr(url.indexOf("#"))=="#id1")
{
//delete Elements
}
else
{
if(url.substr(url.indexOf("#"))=="#id2")
{
//delete Elements
}
else
{
if(url.substr(url.indexOf("#"))=="#id3")
{
//delete Elements
}
}
}
replace the id's with the ids, you have chosen and delete the Elements in the if statements, which you want to delete:
document.getElementById("id#").remove();

The problem is it is a wp page and the button page looks like this (site 1):
<div class="col-sm-12" onclick="window.location.href='<?=get_permalink($child->ID)?>'">
<div class="r-targets-block-content">
<div class="r-targets-block-bg" style="background:url('<?=$thumbnail?>') center top no-repeat"></div>
<div class="r-targets-descr-block">
<div class="r-targets-title"><?=$child->post_title?></div>
<div class="r-targets-subtitle"></div>
<div class="r-targets-button-block">
<?=r_arrowed_button(
get_permalink($child->ID),
"SEE MORE",
["standard", "small", "border-yellow", "arrow-right"]
)?>
</div>
</div>
<div class="r-targets-recomendation-block-null"></div>
</div>
</div>

One DIV - three different contents

On one of my web pages, I have buttons at the top, say A, B and C.
Below it, I would like to display varying content in a common DIV. What is displayed is determined by which of the buttons is clicked. There is no order in which the buttons can or will be clicked.
Each of Contents A, B and C are php driven pages with menu options, forms, etc. The forms could be partly filled up after which User could navigate away from the page by clicking one of the above buttons and then clicking another button to come back to the form - I need to retain values of partially entered data.
Could someone share code (or point me in the right direction) where:
1) How do I ensure that Content A is displayed when page is initially loaded?
2) How do I define the page?
So far, I have defined a container DIV for the area where the content is to be displayed. And thereafter three DIVs where each of the three php pages are loaded.
My problem is that All 3 DIVs are displayed and I can scroll up and down to view them.
I can handle 2 DIVs but 3 DIVs challenge me.
Thank you in advance.
Uttam

Check out this awesome jquery plugin which will add some kind of parallax effect to your page.
fullpage.js
http://alvarotrigo.com/fullPage/#4thpage

The layout
<button class="toggleButton" data-target="div1">A</button>
<button class="toggleButton" data-target="div2">B</button>
<button class="toggleButton" data-target="div3">C</button>
<div id="div1" class="toggleDiv">
Content A
</div>
<div id="div2" class="toggleDiv" style="display:none">
Content B
</div>
<div id="div3" class="toggleDiv" style="display:none">
Content C
</div>
The JavaScript code:
$(function(){
$('.toggleButton').click(function(){
var target = $('#' + $(this).attr('data-target'));
$('.toggleDiv').not(target).hide();
target.show();
});
});

Modifying a page from JQM dialog

What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}

onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}