I'll try my best to explain what is going on as it is quite strange. Previous to making some changes on our website (this wasn't touched) this worked perfectly I am currently having 2 unexpected errors with Radio buttons in JQuery when I use .buttonset()
We currently have a multistep form, on the second step we use details from the first step to provide a list of service providers to the client where they can select which one they would like to use.
We use ajax to return HTML that is placed inside radio-group div. Example of HTML below:
<input type="radio" value="1" name="cleaner-select" id="cleaner-select-1" class="cleaner_selection ui-corner-left">
<label for="cleaner-select-1" class="cleaner-selection-box col-md-2 col-xs-12">
<div class="col-md-12 col-xs-12 center fivepxpad">
<button type="button" class="btn btn-default btn-primary" onclick="view_profile(1)"> View Cleaner Profile <span class="btn-icon-right icon-circle-right"></span></button>
</div>
<div class="col-md-12 col-xs-12 cleanerproducts">
<span class="icon green icon-leaf fontsize16"></span> Eco / Natural Products
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-shield cleanerverified"></span> Verified
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-location"></span> Close-By
</div>
</label>
This is placed inside a DIV below:
<div id="radio-group" class="center">
</div>
Using this JQuery
$('#radio-group').html(result[1]);
$('#radio-group').buttonset();
Current Errors:
When buttonset is called the values of all the radio inputs are removed. eg. changes from value="1" to just value. This didn;t previously happen, I know buttonset is causing this because when I remove $('#radio-group').buttonset(); the value stays just fine (no error in HTML).
When buttonset is applied to the parent div "radio-group" it receives ui-buttonset class as expected but nothing else happens, the input radio buttons are still visible, the colours aren't showing when selected and the labels stay white (meant to be a slight grey colour) but when the labels are clicked on the correct raido input is selected.
On our last update we joined a few CSS files and JS files together but kept everything in the same order that it was previously loaded in. This was to reduce the amount of calls we had to make and everything else is working fine so not entirely sure this is causing it. We also get no console errors.
Things I've tried:
Changed $('#radio-group').buttonset(); to $('#radio-group').button();
Called $('#radio-group').buttonset(); in document.ready and tried $('#radio-group').buttonset('refresh); when HTML changes
$('#radio-group').buttonset('refresh); by itself
Double checked all CSS and JS. (JQuery-UI .js and .css is included)
I'm about to try switching back to our old header and footer files (where more calls are made) to see if that fixes it but if anyone knows what is going on, any help / ideas / advice would be appreciated.
I can't seem to find anyone with a similar issue and I've been working in this for hours it's doing my head in. If you need anymore info let me know.
Related
Had a question. I'm trying to include a widget (which is contained in a div) for my landing page. Now, essentially what I am trying to do is when i hit the button is to fire the OverLayTwo BUT have it fall to the background, instead of the foreground. I tried the z-index method and it doesn't seem to help.
<div class="OverLay">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<div class="OverLayTwo">
</div>
<button class="randomButton">Hello</button>
</div>
So essentially what I want is when User hits button, to have 'OverLayTwo' drop however have it fall to the BACKGROUND/backdrop behind the "widgetContainer" div. --
The reason is I want the user to be able to type into the input field(s), however, lately everything I have looked at or referenced is not solving the problem. Essentially just drops the overlay ontop/into the front of the widget - Not allowing the user to enter text into the appropriate input field.
Hope that made sense. The land of CSS is a true maze o.o ...Also, it should be noted I am using javascript and jQuery functionality.
Any tips and/or suggestions would be truly appreciated!
Thank you!
would be hard to make it fall in the background when it lives inside the first overlay.. try something like this..
<div class="OverLay" style="z-index:100">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<button class="randomButton">Hello</button>
</div>
<div class="OverLayTwo" style="z-index:90">
</div>
every one, perhaps this topic has been asked before but i surf a lot and didn't find any straight answer to this issue.
Problem: I need to have a progress bar that is filled simultaneously as the user is filling a form, and above of the progress bar I need an image be moving as well as the progressBar progress.
So, fill the progress bar as the form is being filled is simple, but I not quite handy as to manage moving the image with progressBar progress.
This is html example:
<div class="row">
<div class="col-xs-3" id="progress_step1">
<img src="img/step1.png" width="60" height="60" />
</div>
</div>
<div class="trial_banner col-xs-12">
<div class="col-sm-12 progress" style="padding: 0;">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria- valuemin="0" aria-valuemax="100" style="width:20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
What you could try is using javascript, check where the user is on the form (Which input or how far they have scrolled or something) and use jQuery to change the information needed.
thanks for your comments I come up with a solution which I post in this codepen:
enter code hereForm & ProgressBar with Image filled simultaneously.
In my solution I had to comply with requirements as:
The ProgressBar won't advance if a form element isn't validated.
The ProgressBar won't advance if a form element was visited already, for example if an input has already been filled and you want to change the info.
After certain steps of the filling process the image has to change.
Up on completion of the form filling process the ProgressBar has to change color.
And of course, certain validation requirements for the elements on the form, for example: elements required, or phone number validation.
P.S: This solution is a partial of a bigger project, so that's why I use bootstrap and different js-plugins for easy form validation such as bootstrap-formhelpers, jquery-validate and additional-methods for jquery-validate.
Of course, any comments on how to make the code better will be most welcomed.
I am always leery of asking dumb questions here but I need to move on and create a few more active pages but this is a lingering issue in my way ...The chtml in razor contains a switch ,,, in one of the cases there's three if statements.. THIS IS JUST ONE OF THEM depending on the if statements a different string in viewdata is to be fed into a div and the div class "hidden" is removed and the supplied text displayed....
I have over the past few hours regained my briefly lost ability to remove that hidden class (I hate css) but I have never been able to update the content of the div.
PLEASE Advise Thank you !!
<div id="divUnUsableEvent" class="hidden">
<div class="row clearfix">
<div class="col-md-1"></div>
<div id="systemExceptionLbl" style="font-size: 2em; color: red;"
class="text-danger:focus">
Please contact IS support
</div>
</div>
</div>
//alphascores Not present AND BetaSCores Not Present Ready for xxxxx //alphascores Not present AND BetaSCores Not Present Ready for xxxxx Scoring
if (!Convert.ToBoolean(#ViewData["alphaPresent"])
&& !Convert.ToBoolean(#ViewData["betaPresent"]))
{
<script type="text/javascript">
$(function() {
$('#UnUseableEvent').addClass("hidden");
var txtMsg = #Html.Raw(Json.Encode(ViewData["beforeAlpha"]));
$('#divUnUsableEvent').removeClass("hidden");
$('#systemExceptionLbl').removeClass("hidden");
$('#systemExceptionLbl').innerText = txtMsg;
});
</script>
<a id="XXXReScoreEvent"
href="#Url.Action("Readyforxxxxxx", "Exception", new { Id = (int)#ViewData["Id"] })"
class="btn btn-primary btn-default btn-too-large pull-left margin"
aria-label="XXXReScoreEvent">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Ready for xxxxxx Scoring
</a>
}
break;
I know its hitting the javascript, as that html element (a button) named '#UnUseableEvent' is correctly being hidden in this case. I of course would want the javascript out of this html page and just have function calls in the razor but baby steps
Specifically regarding the ('#systemExceptionLbl').innerText = txtMsg; I have tried
.text
.value
.innerHTML
all to no avail. I can see the correctly formatted Json.Encoded text reach the variable txtMsg, but again I cant get it into the div ..
I am having success now with displaying the div (remove class hidden) I was attempting to affect the wrong div name and the line removing the hidden class from the element $('#systemExceptionLbl') is not needed.
I even tried to skip the JQuery reference and go old school document.getElementById('systemExceptionLbl').innerHTML = txtMsg;
Ever tried :
$('#systemExceptionLbl').text( txtMsg );
or
$('#systemExceptionLbl').html( txtMsg );
as innerText is not a jquery function. Instead use .html() or .text() to insert data into it
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.
I have fullcalendar.js wrapped in a div (content) (I use bootstrap3 to set the size).
This content area of the page is currently setup to cover only 2/3rds of the left side of the page and the other 1/3rd of the page on the right side, is blank.
The right side remains blank/empty until a button is clicked and then ko will slide in a side form (id="sideform") to take up the empty space.
What I need to do is instead of starting with a page split 70%/30% where the 30% is blank, I would like the content area to actually start at 100%/0%.
Then if a sideform is in place, I want to content area re-size from the 100%/0% to the 70%/30% of the page, else 100%/0%.
Since there are a lot of pages like this and after watching John Papa's videos, I believe creating a handler would be the best way to go.
For the last couple of weeks I have looked at and tried to modify examples to do what I need, but with no luck.
The contents col-md-9 and col-lg-9 represent 70% of the screen width and sideforms col-md-3 and col-lg-3 represents the other 1/3 of the page.
The page is currently setup like...
<div class="container">
<div id="**content**" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="calendar" data-bind="fullCalendar: {}"></div>
</div>
<div id="*sideform*" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 pull-right">
<!--ko router: { transition:'entrance', cacheViews:false,activate: true }-->
<!--/ko-->
</div>
</div>
Anyone have any ideas?
Thank you
First, add an observable, sideFormShowing, to the appropriate section of your ViewModel, and initialize it to false.
Second, add data-bind="if: sideFormShowing" to the *sideform* div (BTW, I don't think asterisks are allowed as leading characters, if it all, in HTML ids).
Third, take col-md-9 col-lg-9 out of the class attribute on your **content** div, and add the following binding to it:
data-bind="css: {'col-md-9 col-lg-9': sideFormShowing,
'col-md-12 col-lg-12': !sideFormShowing()}"
Don't forget the quotes around the class-name lists and the parens in the second entry.
Now whenever sideFormShowing is false the content div will take up 100% and the sideform div won't be rendered; when it's true the content will shrink to 70% and the sideform will be rendered (I used an if binding rather than visible because you presumably don't want the virtual-element bindings to run unless the sideform should be shown.