jQuery styling function in loaded ajax content?

Question

I'm loading some div content using a navigation and i've got most of the content working properly. However I'm now trying to set up:

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

On a select dropdown, however the styling is called using the following:

$(function () {
$("#select").selectbox();
});

And I can't see how I can I can apply:

$(document).on('mousedown', '.nav-link', function() {

To it for when it first appears? Any advice much appreciated, cheers.

UPDATE

Nevermind, i've done it.

SECOND UPDATE

Ok i've just found 2 problems. Firstly, I made it show by using:

if (href == 'requestedpage.php') { 
    $(function () {
        $("#select").selectbox();
});
};

And when the page loads the first time, the selectbox is styled properly, however if you go to another page and then go back, it doesn't apply the style second time around?

~~The other problem i've got is that when you click on the options, the dropdown makes your selection, but all of the options in the select list remain in view.~~

~~HTML code is:~~

<select id="selectlist" name="selectlist" onchange="updatevariable(this.value)" tabindex="1">
<option value="">-- Select Quantity --</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>

Sorted problem 2 by removing onchange event!

Thanks in advance to anyone who can help me out.

wild_nothing · Accepted Answer · 2014-01-14 23:30:14Z

If it's not applying the styling when you navigate back, it might be as simple as setting a flag in your callback.
One way to do this is to send a flag value to a hidden input field which will post to your server on page-submit. This means when you navigate back, you can check if the flag is there, if it is, apply the styling.
Alternatively, if you are building this application for browsers which support HTML5, you can save to the sessionStorage in your AJAX callback.

So, where you're checking the href, add this:

if (href == 'userarea-page1.php') { 
    $(function() { 
        $("#select").selectbox();
        sessionStorage.selectFlag = "true";
    });
};

Then, above your $("a.nav-link").click event (in your document.ready) you can check if this is has been set. If it has, apply the styling.

$(document).ready(function() {
    if (sessionStorage.selectFlag == "true") { 
        $("#select").selectbox();
    }

    $("a.nav-link").click(
        ...
    );
);

This will take care of maintaining the styling state between pages. Just make sure you clear the flag if you ever want to remove the styling, otherwise it'll be applied forever.

Thanks for that, I have just tried this and unfortunately no joy with it. Also tried adding the if (sessionStorage.selectFlag == "true") { $("#select").selectbox(); } in other areas such as after the click, but no joy.
Got it! if (sessionStorage.selectFlag == "true") { $("#select").selectbox(); } else { $("#select").selectbox(); }; }); Majorly based on what you gave me, I placed that after where the new page is loaded and it's sorted it. Many thanks!

wild_nothing · Accepted Answer · 2014-01-14 01:11:14Z

0

I'm not sure why you're setting the styling via javascript if you want it on page load, but if that is the way you're doing things try this may help:

$(document).ready(function() {
    $("#select").selectbox();
);

answered Jan 14, 2014 at 1:11

wild_nothing

3,0711 gold badge40 silver badges50 bronze badges

3 Comments

BN83 Over a year ago

It's loaded in JavaScript because that's how the plugin works, not what I chose to do. And you can't set document ready for Ajax loaded content because the content isn't there when the document loads so you need to apply a workaround for it to load when the item does exist. I've got it working with the first time you click the button but it seemingly fails when trying to load the function again. Not sure whether it's because the function is still active and loading it again is failing because it sees the function is already there?!

wild_nothing Over a year ago

Hmmm, might have something to do with the AJAX request caching. Try playing around with setting cache: false. Also, what does your actual AJAX call look like?

BN83 Over a year ago

Tried this, but no joy: $.ajaxSetup({ cache: false }); This is what calls the page:

$("a.nav-link").click(function (ev) {     // cancel the default behaviour     ev.preventDefault();     // get the address of the link     var href = $(this).attr('href');     // getting the desired element for working with it later     var $wrap = $('#userrightcontainer');     $wrap         .html('')         .hide()         .load(href + ' #userright', function () {             $wrap.show(); 		if (href == 'userarea-page1.php') {  		$(function() { 			$("#select").selectbox(); 		});}; 	}); 		 }); });

Collectives™ on Stack Overflow

jQuery styling function in loaded ajax content?

2 Answers 2

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Related