CODEWITHSUNDEEP
jqueryiphoneasp.net-mvchtmlmobile
Gun
Gun

Reputation: 521

Jquery Onclick on Iphone devices

I'm using MVC on my website and I have troubles using a "onclick" on a form. Here is my code :

using (@Html.BeginForm("findpost", "keyword", FormMethod.Post, new { id = "mainForm" }))
                    {
                        <button type="submit" class="btn-submit" name="s" onclick="showupdate();"></button>
                        <input name="query" type="text" id="query" value="@Model.search" placeholder=" ex: iPod">
                        <input type="hidden" name="pos" value="" />
                        <input type="hidden" name="dis" value="" />
                    }

The showupdate(); shows a gif during the loading of the result page. This is working just fine on desktop & android device. The search has strange behavior on iphones. It only takes into account the first keyword I enter (from the homepage). If I remove the "onclick=...", it works but it doesn't load the gif ... Any idea where could come from ? I tried to add the click directly in JS but it doesn't work neither.

Here is the gif :

function preparepreloader() {
var loader = $('<div class="preloaderwrapper hiddenn">' +
'</div>' +
'<div class="preloader hiddenn">' +
    '<div class="prewrapper">' +
        '<div class="eyeglass">' +
            '&nbsp;</div>' +
        '<div class="preloaderanimate">' +
            '&nbsp;</div>' +
    '</div>' +
'</div>');

var new_loader = $('<div class="preloader_gif preloader hiddenn"> <img src="'+ mediaUrl +'/img/loader/712.gif" /> </div>');

$('#updatepreloader').append(loader);
$('#updatepreloader').append(new_loader);}

Upvotes: 0

Views: 66

Answers (1)

Vixed
Vixed

Reputation: 3499

Just add a class hasLoader for the forms you want to show your gif after submit, so you can prevent the default event, load the gif, and then the form will be submitted automatically after. Sorry, but I got confused with showupdate() and preparepreloader() so I hope that was the some stuff has I understood.

MVC

using (@Html.BeginForm("findpost", "keyword", FormMethod.Post, new { @id = "mainForm", @class = "hasLoader" }))
{
    <button type="submit" class="btn-submit" name="s"></button>
    <input name="query" type="text" id="query" value="@Model.search" placeholder=" ex: iPod">
    <input type="hidden" name="pos" value="" />
    <input type="hidden" name="dis" value="" />
}

JS

$('.hasLoader').on('submit',function(e){
    e.preventDefault();
    var loader = $('<div class="preloaderwrapper hiddenn"></div>' +
    '<div class="preloader hiddenn">' +
        '<div class="prewrapper">' +
            '<div class="eyeglass">&nbsp;</div>' +
            '<div class="preloaderanimate">&nbsp;</div>' +
        '</div>' +
    '</div>');

    var new_loader = $('<div class="preloader_gif preloader hiddenn"> <img src="'+ mediaUrl +'/img/loader/712.gif" /> </div>');

    $('#updatepreloader').append(loader, new_loader);
    $(this).off('submit').submit();
});

Upvotes: 1

Related Questions